在初次進(jìn)行jquery插件開發(fā)時(shí)，我們往往無(wú)從下手，當(dāng)然我們可以按照jquery官方提供的格式進(jìn)行簡(jiǎn)單的插件開發(fā)，但是很多時(shí)候往往不盡完美，一不小心，就造出一個(gè)很“爛”的插件：難以維護(hù)、難以擴(kuò)展、使用繁瑣、性能不佳...當(dāng)我們?cè)诓粩嗟膶?shí)踐中，慢慢積累下來(lái)時(shí)，有些問題得到了有效的避免，但也帶來(lái)了新的問題：在眾多紛雜的jquery插件開發(fā)模式中，究竟哪一種模式才是最好的呢？
如果能提供一個(gè)模板，通過一定的約束和規(guī)范為開發(fā)者解決在jquery插件開發(fā)中的“迷惘”那該多好！在這里主要介紹下一個(gè)在實(shí)際開發(fā)中最常用的jquery模板插件——jQuery Boilerplate
jQuery Boilerplate不是jquery插件開發(fā)的銀彈，他并沒有提供各種模式的完美解決方案，當(dāng)然這也不是他所追求的目標(biāo)，他的目的只是提供一個(gè)最基礎(chǔ)的模板，對(duì)于初學(xué)者而言，你只需要在這個(gè)模板的基礎(chǔ)上做相應(yīng)的修改即可。來(lái)看一下jQuery Boilerplate提供的一個(gè)基礎(chǔ)模板（是不是覺得很熟悉呢？沒錯(cuò)，bootstrap就是這個(gè)模式）：
// 這個(gè)分號(hào)的作用是防止和其他jquery插件合并時(shí)，別人不規(guī)范的jquery插件忘記使用分號(hào)結(jié)束
//影響到我們當(dāng)前的插件，導(dǎo)致無(wú)法運(yùn)行的問題。
;(function ( $, window, document, undefined ) {
// undefined作為形參的目的是因?yàn)樵趀s3中undefined是可以被修改的
//比如我們可以聲明var undefined = 123,這樣就影響到了undefined值的判斷，幸運(yùn)的是在es5中,undefined不能被修改了。
// window和document本身是全局變量，在這個(gè)地方作為形參的目的是因?yàn)閖s執(zhí)行是從里到外查找變量的（作用域），把它們作為局部變量傳進(jìn)來(lái)，就避免了去外層查找，提高了效率。
// 聲明默認(rèn)屬性對(duì)象
var pluginName = "defaultPluginName",
defaults = {
propertyName: "value"
};
// 構(gòu)造函數(shù)
function Plugin ( element, options ) {
this.element = element;
// 將默認(rèn)屬性對(duì)象和傳遞的參數(shù)對(duì)象合并到第一個(gè)空對(duì)象中
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
// 為了避免和原型對(duì)象Plugin.prototype的沖突，這地方采用繼承原型對(duì)象的方法
$.extend(Plugin.prototype, {
init: function () {
// 初始化，由于繼承自Plugin原型，
// 你可以在這里直接使用this.element或者this.settings
console.log("xD");
},
yourOtherFunction: function () {
// some logic
}
});
// 對(duì)構(gòu)造函數(shù)的一個(gè)輕量級(jí)封裝，
// 防止產(chǎn)生多個(gè)實(shí)例
$.fn[ pluginName ] = function ( options ) {
this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
// 方便鏈?zhǔn)秸{(diào)用
return this;
};
})( jQuery, window, document );
上面的模板是一個(gè)輕量級(jí)的基礎(chǔ)模板，在開發(fā)中已經(jīng)能滿足我們大部分需求，例如：對(duì)象只實(shí)例化一次，鏈?zhǔn)秸{(diào)用、默認(rèn)參數(shù)、以及公有和私有方法的調(diào)用。來(lái)看一個(gè)示例：
http://jsfiddle.net/mirandaasm/wjPvF/3/
但是在實(shí)際開發(fā)中，尤其在有一定規(guī)模的組件開發(fā)中，我們還面臨著很多問題需要解決，比如命名空間的沖突、插件的可擴(kuò)展性以及公有方法如何方便的調(diào)用？當(dāng)然還有一部分是個(gè)人愛好的原因，我就喜歡使用其他模式的開發(fā)方式。這里jQuery Boilerplate也提供了幾種不同模式的組件開發(fā)方式，你可以選擇一個(gè)適合你的使用：
輕量級(jí)（基礎(chǔ)）模式 為初學(xué)者提供的一個(gè)簡(jiǎn)單通用的基礎(chǔ)模板，包括基礎(chǔ)的默認(rèn)對(duì)象、簡(jiǎn)單的構(gòu)造函數(shù)、默認(rèn)參數(shù)和傳遞參數(shù)的合并以及防止對(duì)象多次實(shí)例化的構(gòu)造函數(shù)的簡(jiǎn)單封裝。
Widget factory 工廠模式，沒錯(cuò)，jquery ui使用的典型模式，使用面向?qū)ο蟮姆绞綐?gòu)建復(fù)雜有狀態(tài)的組件，jquery ui中的組件大部分依賴于widget factory基礎(chǔ)組件，這個(gè)基礎(chǔ)模板提供了大部分的默認(rèn)方法，包括事件觸發(fā)方法。
Widget factory + RequireJS 這是個(gè)使用RequireJS對(duì)Widget factory進(jìn)行簡(jiǎn)單封裝，使其支持AMD模塊化加載規(guī)范。
Namespaced pattern 命名空間模式，在和其他插件一起使用時(shí)，采用命名空間模式避免和其他插件的沖突問題。
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試