Jquery中文網 mm6666com单双中特 www.wvbtf.icu
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery Boilerplate——流行的jQuery插件開發模板

高手单双中特网:jQuery Boilerplate——流行的jQuery插件開發模板

發布時間:2016-09-18   編輯:mm6666com单双中特 www.wvbtf.icu
jquery中文網為您提供jQuery Boilerplate——流行的jQuery插件開發模板等資源,歡迎您收藏本站,我們將為您提供最新的jQuery Boilerplate——流行的jQuery插件開發模板資源

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

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

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

    // 這個分號的作用是防止和其他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;
                    // 將默認屬性對象和傳遞的參數對象合并到第一個空對象中
                    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 );

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

//jsfiddle.net/mirandaasm/wjPvF/3/

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

  • 輕量級(基?。┠J?為初學者提供的一個簡單通用的基礎模板,包括基礎的默認對象、簡單的構造函數、默認參數和傳遞參數的合并以及防止對象多次實例化的構造函數的簡單封裝。
  • Widget factory 工廠模式,沒錯,jquery ui使用的典型模式,使用面向對象的方式構建復雜有狀態的組件,jquery ui中的組件大部分依賴于widget factory基礎組件,這個基礎模板提供了大部分的默認方法,包括事件觸發方法。
  • Widget factory + RequireJS 這是個使用RequireJS對Widget factory進行簡單封裝,使其支持AMD??榛釉毓娣?。
  • Namespaced pattern 命名空間模式,在和其他插件一起使用時,采用命名空間模式避免和其他插件的沖突問題。
  • 更多…

您可能感興趣的文章:
漂亮的Apache目錄列表模板 h5ai
HTML的Web框架 Angular JS
JQuery 插件模板 制作jquery插件的朋友可以參考下
HTML5 開發框架 jQuery Mobile
移動端的前端開發利器 jQuery Mobile
HTML5 開發框架 jQuery Mobile
web開發人員學習jQuery的6大理由及jQuery的優勢介紹
StringTemplate遇見jQuery沖突的解決方法
基于Jquery的文字自動截?。ㄌ峁┰創耄?/a>
JQuery插件fancybox無法在彈出層使用左右鍵的解決辦法

[關閉]