你如何在现场实现jquery oop
问题描述:
这里是我的实现,想知道是否有任何改进,或分享你的想法。你如何在现场实现jquery oop
//* global variable *//
//I put all the variable into $('body');
$base_url = $('body').data('base_url');
$logged_in = $('body').data('logged_in');
//...
//* Object. like namespace *//
lzyy = {};
//* constructor *//
//correspond with mvc's c(controller)
lzyy.tag = function()
{
//new Class
m_ftl = new fav_tag_list('#fav_tag_list');
m_fti = new fav_tag_input('#fav_tag_input');
m_note = new note('#note');
};
//* method *//
//correspond with mvc's m(method)
lzyy.tag.property.add = function()
{
//* events bind *//
$('#fav_tag_btn').bind('click',function(e){
m_ftl.add_tag(m_fti.get_val());
m_fti.clear();
});
}
//* util functions *//
lzyy.preload_imgs = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
};
lzyy.br2nl = function(str)
{
return str.replace(/<br\s*\/?>/mg,"\n");
};
//...
//* init *//
$(function()
{
//do something that can affect all pages
});
//* objects *//
//need another code snippet provided below
var Base_Class = Class.extend({
init:function(selecotr)
{
if(!this.self)
this.self = $(selecotr);
}
});
//for example,we have an dom element id = note
//we can add method , property
var note = Base_Class.extend({
close:function()
{
this.self.slideUp('fast');
}
});
//we can override parent method
var tag_input = Base_Class.extend({
init:function(selecotr)
{
this._super(selecotr);
if(this.self.length)
{
//do something...
}
},
append_item:function(data)
{
this.self.append(data);
}
});
//...
答
虽然这可能没有资格作为一个“答案”改进建议你的问题/请求,我不得不怀疑自己的目标:
为什么编写Java脚本当去OOP?该语言不是为它设计的(顺便说一下,jQuery框架也不是这样),我也没有看到性能和可维护性都没有增益。我所看到的唯一的事情就是它需要更多的代码才能获得相同的结果,并且强制实施无关的编程范例。
答
我倾向于将我的网站分成多个对象,并且大多数这些对象是单例(即,他们没有构造函数)。这是因为,您每个站点多长时间需要多个对象?有时候,但不经常。
我通常使用的对象是GUI,它负责处理gui,后端,它具有向服务器发出请求的标准化函数,处理响应JSON的方法以及处理错误(包括错误服务器传递下来,通常显示在一个模式弹出窗口中)和一个控制对象,它处理页面如何工作。每个对象都在其自己的文件中定义。
以下是基于物体与构造(不是单)的例子:
function ClassName(arg1, arg2){
var that = this;
/****Private Variables****/
var a = 0;
var b = 1;
/****Public Variables****/
this.c = 2;
this.d = 3;
/****Private Functions****/
var e = function(arg1, arg2){
}
var f = function(arg1, arg2){
}
/****Protected Functions****/
this.g = function(arg1, arg2){
}
this.h = function(arg1, arg2){
}
/****Constructor code ****/
alert("constructed");
}
/*****Public Functions*****/
ClassName.prototype.i = function(arg1, arg2){
}
ClassName.prototype.j = function(arg1, arg2){
}
而下面是一个单身的例子:
var ObjectName = {};
/****Public Variables****/
ObjectName.a = 0;
ObjectName.b = 1;
/****Public Functions****/
ObjectName.c = function(arg1, arg2){
}
ObectName.d = function(arg1, arg2){
}
你知不知道有一种jQuery和JavaScript的区别?你正在谈论JavaScript的BTW。 – Marius 2009-09-05 01:46:41