2009-09-05 64 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){ 

}