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

如果能提供一個模板，通過一定的約束和規(guī)范為開發(fā)者解決在jquery插件開發(fā)中的“迷惘”那該多好！在這里主要介紹下一個在實際開發(fā)中最常用的jquery模板插件——jQuery Boilerplate

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

// 這個分號的作用是防止和其他jquery插件合并時，別人不規(guī)范的jquery插件忘記使用分號結束

//影響到我們當前的插件，導致無法運行的問題。

;(function ( $, window, document, undefined ) {

// undefined作為形參的目的是因為在es3中undefined是可以被修改的

//比如我們可以聲明var undefined = 123,這樣就影響到了undefined值的判斷，幸運的是在es5中,undefined不能被修改了。

// window和document本身是全局變量，在這個地方作為形參的目的是因為js執(zhí)行是從里到外查找變量的（作用域），把它們作為局部變量傳進來，就避免了去外層查找，提高了效率。

// 聲明默認屬性對象

var pluginName = "defaultPluginName",

defaults = {

propertyName: "value"

};

// 構造函數(shù)

function Plugin ( element, options ) {

this.element = element;

// 將默認屬性對象和傳遞的參數(shù)對象合并到第一個空對象中

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

}

});

// 對構造函數(shù)的一個輕量級封裝，

// 防止產(chǎn)生多個實例

$.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 );

上面的模板是一個輕量級的基礎模板，在開發(fā)中已經(jīng)能滿足我們大部分需求，例如：對象只實例化一次，鏈式調用、默認參數(shù)、以及公有和私有方法的調用。來看一個示例：

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

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

輕量級（基礎）模式 為初學者提供的一個簡單通用的基礎模板，包括基礎的默認對象、簡單的構造函數(shù)、默認參數(shù)和傳遞參數(shù)的合并以及防止對象多次實例化的構造函數(shù)的簡單封裝。

Widget factory 工廠模式，沒錯，jquery ui使用的典型模式，使用面向對象的方式構建復雜有狀態(tài)的組件，jquery ui中的組件大部分依賴于widget factory基礎組件，這個基礎模板提供了大部分的默認方法，包括事件觸發(fā)方法。

Widget factory + RequireJS 這是個使用RequireJS對Widget factory進行簡單封裝，使其支持AMD模塊化加載規(guī)范。

Namespaced pattern 命名空間模式，在和其他插件一起使用時，采用命名空間模式避免和其他插件的沖突問題。

更多信息請查看IT技術專欄