常用的jquery模板外掛程式

常用的jquery模板外掛程式

 在初次進行jquery外掛程式開發時，我們往往無從下手，當然我們可以按照jquery官方提供的格式進行簡單的外掛程式開發，但是很多時候往往不盡完美，一不小心，就造出一個很“爛”的外掛程式：難以維護、難以擴充、使用繁瑣、效能不佳...當我們在不斷的實踐中，慢慢積累下來時，有些問題得到了有效避免，但也帶來了新的問題：在眾多紛雜的jquery外掛程式開發模式中，究竟哪一種模式才是最好的呢？

如果能提供一個模板，通過一定的約束和規範為開發人員解決在jquery外掛程式開發中的“迷惘”那該多好！在這裡主要介紹下一個在實際開發中最常用的jquery模板外掛程式——jQuery Boilerplate

jQuery Boilerplate不是jquery外掛程式開發的銀彈，他並沒有提供各種模式的完美解決方案，當然這也不是他所追求的目標，他的目的只是提供一個最基礎的模板，對於初學者而言，你只需要在這個模板的基礎上做相應的修改即可。來看一下jQuery Boilerplate提供的一個基礎模板（是不是覺得很熟悉呢？沒錯，bootstrap就是這個模式）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

// 這個分號的作用是防止和其他jquery外掛程式合并時，別人不規範的jquery外掛程式忘記使用分號結束 //影響到我們當前的外掛程式，導致無法啟動並執行問題。  ;(function ( $, window, document, undefined ) {       // undefined作為形參的目的是因為在es3中undefined是可以被修改的     //比如我們可以聲明var undefined = 123,這樣就影響到了undefined值的判斷，幸運的是在es5中,undefined不能被修改了。     // window和document本身是全域變數，在這個地方作為形參的目的是因為js執行是從裡到外尋找變數的（範圍），把它們作為局部變數傳進來，就避免了去外層尋找，提高了效率。       // 聲明預設屬性對象     var pluginName = "defaultPluginName",         defaults = {         propertyName: "value"     };       // 建構函式     function Plugin ( element, options ) {         this.element = element;         // 將預設屬性對象和傳遞的參數對象合并到第一個Null 物件中         this.settings = $.extend( {}, defaults, options );         this._defaults = defaults;         this._name = pluginName;         this.init();     }       // 為了避免和原型對象Plugin.prototype的衝突，這地方採用繼承原型對象的方法     $.extend(Plugin.prototype, {         init: function () {               // 初始化，由於繼承自Plugin原型，               // 你可以在這裡直接使用this.element或者this.settings             console.log("xD");         },         yourOtherFunction: function () {             // some logic         }     });       // 對建構函式的一個輕量級封裝，     // 防止產生多個執行個體     $.fn[ pluginName ] = function ( options ) {         this.each(function() {             if ( !$.data( this, "plugin_" + pluginName ) ) {                 $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );             }         });           // 方便鏈式調用         return this;     };   })( jQuery, window, document );

上面的模板是一個輕量級的基礎模板，在開發中已經能滿足我們大部分需求，例如：對象只執行個體化一次，鏈式調用、預設參數、以及公有和私人方法的調用。來看一個樣本：

http://jsfiddle.net/mirandaasm/wjPvF/3/

但是在實際開發中，尤其在有一定規模的組件開發中，我們還面臨著很多問題需要解決，比如命名空間的衝突、外掛程式的可擴充性以及公有方法如何方便的調用？當然還有一部分是個人愛好的原因，我就喜歡使用其他模式的開發方式。這裡jQuery Boilerplate也提供了幾種不同模式的組件開發方式，你可以選擇一個適合你的使用：

輕量級（基礎）模式 為初學者提供的一個簡單通用的基礎模板，包括基礎的預設對象、簡單的建構函式、預設參數和傳遞參數的合并以及防止對象多次執行個體化的建構函式的簡單封裝。

Widget factory 原廠模式，沒錯，jquery ui使用的典型模式，使用物件導向的方式構建複雜有狀態的組件，jquery ui中的組件大部分依賴於widget factory基礎組件，這個基礎模板提供了大部分的預設方法，包括事件觸發方法。
Widget factory + RequireJS 這是個使用RequireJS對Widget factory進行簡單封裝，使其支援AMD模組化載入規範。
Namespaced pattern 命名空間模式，在和其他外掛程式一起使用時，採用命名空間模式避免和其他外掛程式的衝突問題。