2009-10-24 64 views
3

從mootools和JAVA開始,mootools類的實現是構建我的代碼的一個非常好的方式,另外我還可以擁有一些很好的功能,如擴展,實現等。從jquery開始,我發現自己編寫的$ .fn插件無法使用其他插件的代碼。另外,對於與DOM元素無關的複雜內容使用插件結構似乎並不是一個好主意。有沒有更好的方法,然後$ .fn?你推薦使用jQuery來構建我的代碼。你如何構建你的jQuery代碼?

回答

6

這是一個難以回答的問題。

JavaScript令人難以置信的靈活性的缺點是每個程序員和他的姐夫都有不同的做事方式。

爲了在JavaScript中使用基於類的OOP(原型庫,Moo,Joose,JS.Class,Base2等)來拉取庫,缺點是您立即減少了一些JavaScript程序員誰可以閱讀你的代碼。

很明顯,jQuery鼓勵你用「集合」來思考。集合是您從$()或jQuery()調用中獲得的內容。 John Resig曾經考慮給jQuery添加一個類系統,但最終決定不採用這種方法。我認爲他說他從未需要JavaScript編程中真正的「類」系統。

對於除了最大的JS項目之外的所有項目,我會說忘記一個Class系統。利用JS令人難以置信的對象和數組系統(包括文字)。命名空間很大(變量和方法)。

對於大多數情況下我通常使用Classes for的情況,我使用了很多運氣。

jQuery集合概念的一個有趣擴展是在Ariel Flesler的jQuery.Collection插件here中。它可以讓你像處理jQuery中的DOM數據那樣對待「正常」數據。

我最近開始使用Underscore.js,它爲您提供了很多功能工具來將您的數據視爲集合。

2

jQuery並不真正用於構造代碼。它意味着你從其他代碼中使用的工具,而不是一種生活方式。

其餘的代碼應該以任何你喜歡的方式編寫。當您想要執行DOM操作,Ajax調用,跨瀏覽器事件等時,只需使用jQuery。

+0

是的,這是我學到的教訓,但是最好的方法是什麼。 – 2009-10-24 19:25:59

1

您可能想要了解如何使用.prototype屬性將一些代碼放入「類」中,以便你可以在不同的地方重複使用相同的代碼,只需創建一個新的實例即可。

您也可以將代碼放入對象中,以便您擁有唯一的名稱空間,因此在不同項目之間共享相關對象變得更加容易。

基本上,你會像構建直接JavaScript一樣構造代碼,但jQuery會抽象出一些常用的功能,所以你不必擔心瀏覽器問題,但它只是一個幫手,不僅僅是提供一個框架,而只是簡化一些概念。例如,我傾向於使用.bind('click',...),而不是使用onclick,但如果我想讓元素具有多個事件處理器的潛力。

3

你一般需要的是代碼擴展的機制包裝

對於前者,我使用基於類的僞默認OO機制,有時用一個輔助功能,使繼承更容易:

Function.prototype.derive = (function() { 
    function Dummy() {} 
    return function() { 
     Dummy.prototype = this.prototype; 
     return new Dummy; 
    }; 
})(); 

function Base() {} 
function Sub() {} 
Sub.prototype = Base.derive(); 

後者可以通過通過自動執行功能的命名空間來實現。甚至有可能僞造進口報表:

// create package: 
var foo = new (function() { 
    // define package variables: 
    this.bar = 'baz'; 
    this.spam = 'eggs'; 

    // export package variables: 
    this.exports = (function(name, obj) { 
     var acc = []; 
     for(var prop in obj) { 
      if(obj.hasOwnProperty(prop)) 
       acc.push(prop + '=' + name + '.' + prop); 
     } 
     return 'var ' + acc.join(',') + ';'; 
    })('foo', this); 
}); 

// use package: 
(function() { 
    // import package variables: 
    eval(foo.exports); 
    alert(spam); 
})();