2009-09-05 77 views
1

这里是我的实现,想知道是否有任何改进,或分享你的想法。你如何在现场实现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); 
    } 
}); 
//... 
+0

你知不知道有一种jQuery和JavaScript的区别?你正在谈论JavaScript的BTW。 – Marius 2009-09-05 01:46:41

回答

3

虽然这可能没有资格作为一个“答案”改进建议你的问题/请求,我不得不怀疑自己的目标:
为什么编写Java脚本去OOP?该语言不是为它设计的(顺便说一下,jQuery框架也不是这样),我也没有看到性能和可维护性都没有增益。我所看到的唯一的事情就是它需要更多的代码才能获得相同的结果,并且强制实施无关的编程范例。

+0

JavaScript是一种原型语言,它是面向对象的,只是没有经典的面向对象。我同意没有理由强制JavaScript像传统的OOP语言那样行事;没有什么可以从中获益的,而你失去了这么多有用的东西。 – Marius 2009-09-05 01:39:42

+0

以前,我认为jquery是强大的,我只是写我的想法。随着时间的推移,我发现剧本很混乱,不干。所以我想要oop来解决这个问题。 – limboy 2009-09-05 01:40:53

1

我倾向于将我的网站分成多个对象,并且大多数这些对象是单例(即,他们没有构造函数)。这是因为,您每个站点多长时间需要多个对象?有时候,但不经常。

我通常使用的对象是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){ 

}