jQuery Boilerplate——流行的jQuery插件開發模板

在初次進行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 );

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

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 命名空間模式，在和其餘插件一塊兒使用時，採用命名空間模式避免和其餘插件的衝突問題。
• 更多...