常用的jquery模板插件——jQuery Boilerplate介紹
在初次進行jquery插件開發(fā)時,我們往往無從下手,當(dāng)然我們可以按照jquery官方提供的格式進行簡單的插件開發(fā),但是很多時候往往不盡完美,一不小心,就造出一個很“爛”的插件:難以維護、難以擴展、使用繁瑣、性能不佳...當(dāng)我們在不斷的實踐中,慢慢積累下來時,有些問題得到了有效的避免,但也帶來了新的問題:在眾多紛雜的jquery插件開發(fā)模式中,究竟哪一種模式才是最好的呢?
如果能提供一個模板,通過一定的約束和規(guī)范為開發(fā)者解決在jquery插件開發(fā)中的“迷惘”那該多好!在這里主要介紹下一個在實際開發(fā)中最常用的jquery模板插件——jQuery Boilerplate
jQuery Boilerplate不是jquery插件開發(fā)的銀彈,他并沒有提供各種模式的完美解決方案,當(dāng)然這也不是他所追求的目標(biāo),他的目的只是提供一個最基礎(chǔ)的模板,對于初學(xué)者而言,你只需要在這個模板的基礎(chǔ)上做相應(yīng)的修改即可。來看一下jQuery Boilerplate提供的一個基礎(chǔ)模板(是不是覺得很熟悉呢?沒錯,bootstrap就是這個模式):
// 這個分號的作用是防止和其他jquery插件合并時,別人不規(guī)范的jquery插件忘記使用分號結(jié)束 //影響到我們當(dāng)前的插件,導(dǎo)致無法運行的問題。 ;(function ( $, window, document, undefined ) { // undefined作為形參的目的是因為在es3中undefined是可以被修改的 //比如我們可以聲明var undefined = 123,這樣就影響到了undefined值的判斷,幸運的是在es5中,undefined不能被修改了。 // window和document本身是全局變量,在這個地方作為形參的目的是因為js執(zhí)行是從里到外查找變量的(作用域),把它們作為局部變量傳進來,就避免了去外層查找,提高了效率。 // 聲明默認(rèn)屬性對象 var pluginName = "defaultPluginName", defaults = { propertyName: "value" }; // 構(gòu)造函數(shù) function Plugin ( element, options ) { this.element = element; // 將默認(rèn)屬性對象和傳遞的參數(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 } }); // 對構(gòu)造函數(shù)的一個輕量級封裝, // 防止產(chǎn)生多個實例 $.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 );
上面的模板是一個輕量級的基礎(chǔ)模板,在開發(fā)中已經(jīng)能滿足我們大部分需求,例如:對象只實例化一次,鏈?zhǔn)秸{(diào)用、默認(rèn)參數(shù)、以及公有和私有方法的調(diào)用。來看一個示例:
http://jsfiddle.net/mirandaasm/wjPvF/3/
但是在實際開發(fā)中,尤其在有一定規(guī)模的組件開發(fā)中,我們還面臨著很多問題需要解決,比如命名空間的沖突、插件的可擴展性以及公有方法如何方便的調(diào)用?當(dāng)然還有一部分是個人愛好的原因,我就喜歡使用其他模式的開發(fā)方式。這里jQuery Boilerplate也提供了幾種不同模式的組件開發(fā)方式,你可以選擇一個適合你的使用:
輕量級(基礎(chǔ))模式 為初學(xué)者提供的一個簡單通用的基礎(chǔ)模板,包括基礎(chǔ)的默認(rèn)對象、簡單的構(gòu)造函數(shù)、默認(rèn)參數(shù)和傳遞參數(shù)的合并以及防止對象多次實例化的構(gòu)造函數(shù)的簡單封裝。
Widget factory 工廠模式,沒錯,jquery ui使用的典型模式,使用面向?qū)ο蟮姆绞綐?gòu)建復(fù)雜有狀態(tài)的組件,jquery ui中的組件大部分依賴于widget factory基礎(chǔ)組件,這個基礎(chǔ)模板提供了大部分的默認(rèn)方法,包括事件觸發(fā)方法。
Widget factory + RequireJS 這是個使用RequireJS對Widget factory進行簡單封裝,使其支持AMD模塊化加載規(guī)范。
Namespaced pattern 命名空間模式,在和其他插件一起使用時,采用命名空間模式避免和其他插件的沖突問題。
相關(guān)文章
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下,切換到中文輸入法,再輸入中文,是不能立即自動查詢,需要按下其他按鍵,比如CTRL,后來,通過修改源代碼即可修復(fù)這個問題2012-09-09jquery實現(xiàn)效果比較好的table選中行顏色
這篇文章主要介紹了jquery table選中行顏色實現(xiàn)代碼,需要的朋友可以參考下2014-03-03基于Jquery插件Uploadify實現(xiàn)實時顯示進度條上傳圖片
這篇文章主要介紹了基于Jquery插件Uploadify實現(xiàn)實時顯示進度條上傳圖片的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05jquery實現(xiàn)的判斷倒計時是否結(jié)束代碼
在一些購物網(wǎng)站經(jīng)常會遇到倒計時的功能,例如某些商品在一定期限內(nèi)搞活動,下面小編給大家分享一段代碼關(guān)于jquery實現(xiàn)的判斷倒計時是否結(jié)束代碼,希望對大家有所幫助2016-02-02jquery 判斷selection range 是否在容器中的簡單實例
下面小編就為大家?guī)硪黄猨query 判斷selection range 是否在容器中的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08