插件封裝入門一_ZenDei技術網路在線

編寫一個jQuery插件開始於給jQuery.fn加入新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱：為什麼不用$符號呢？為了避免和其他JavaScript庫衝突，我們最好將jQuery傳遞給一個自我執行的封閉程式，jQuery在此程式中映射為符號，這樣可以避免$號被其他庫覆寫。在這個封 ...

編寫一個jQuery插件開始於給jQuery.fn加入新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱：

1 jQuery.fn.myPlugin = function(){ 
2 //你自己的插件代碼 
3 };

為什麼不用$符號呢？為了避免和其他JavaScript庫衝突，我們最好將jQuery傳遞給一個自我執行的封閉程式，jQuery在此程式中映射為符號，這樣可以避免$號被其他庫覆寫。

(function ($) {
    $.fn.myPlugin = function () {
    //你自己的插件代碼
    };
})(jQuery);

在這個封閉程式中，我們可以無限制的使用$符號來表示jQuery函數。

現在，我們可以開始編寫實際的插件代碼。但是，在這之前，我們必須得對插件所處的環境有個概念。在插件的範圍里， this關鍵字代表了這個插件將要執行的jQuery對象，這裡容易產生一個普遍的誤區，因為在其他包含callback的jQuery函數中，this關鍵字代表了原生的DOM元素。這常常會導致開發者誤將this關鍵字無謂的包在jQuery中，如下所示。

(function ($) {
    $.fn.myPlugin = function () {
        //此處沒有必要將this包在$號中如$(this)，因為this已經是一個jQuery對象。
        //$(this)等同於 $($('#element'));
        this.fadeIn('normal', function () {
        //此處callback函數中this關鍵字代表一個DOM元素
        });
    };
})(jQuery);
$('#element').myPlugin();

　　現在，我們做一個利用.height()返回頁面中高度最大的div元素的高度。

(function ($) {
    $.fn.maxHeight = function () {
        var max = 0;
        this.each(function () {
            max = Math.max(max, $(this).height());
        });
        return max;
    };
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的p元素的高度

　　維護Chainability

很多時候，一個插件的意圖僅僅是以某種方式修改收集的元素，並把它們傳遞給鏈中的下一個方法。這是jQuery的設計之美，是jQuery如此受歡迎的原因之一。因此，要保持一個插件的chainability，你必須確保你的插件返回this關鍵字。

 1 (function ($) {
 2     $.fn.lockDimensions = function (type) {
 3         return this.each(function () {
 4             var $this = $(this);
 5             if (!type || type == 'width') {
 6                 $this.width($this.width());
 7             }
 8             if (!type || type == 'height') {
 9                 $this.height($this.height());
10             }
11         });
12     };
13 })(jQuery);
14 $('p').lockDimensions('width').CSS('color', 'red');

由於插件返回this關鍵字，它保持了chainability，這樣jQuery收集的元素可以繼續被jQuery方法如.css控制。因此，如果你的插件不返回固有的價值，你應該總是在其作用範圍內返回this關鍵字。此外，你可能會推斷出，傳遞給插件的參數將會在插件的作用範圍內被傳遞。因此，在前面的例子，字元串'width'變成了插件的類型參數。

預設值和選項

對於比較複雜的和提供了許多選項可定製的的插件，最好有一個當插件被調用的時候可以被拓展的預設設置(通過使用$.extend)。因此，相對於調用一個有大量參數的插件，你可以調用一個對象參數，包含你了你想覆寫的設置。

(function ($) {
    $.fn.tooltip = function (options) {
        //創建一些預設值，拓展任何被提供的選項
        var settings = $.extend({
            'location': 'top',
            'background-color': 'blue'
        }, options);
        return this.each(function () {
            // Tooltip插件代碼
        });
    };
})(jQuery);
$('p').tooltip({
    'location': 'left'
});

在這個例子中，調用tooltip插件時覆寫了預設設置中的location選項，background-color選項保持預設值，所以最終被調用的設定值為：

{
    'location': 'left',
    'background-color': 'blue',
}

命名空間

正確命名空間你的插件是插件開發的一個非常重要的一部分。正確的命名空間，可以保證你的插件將有一個非常低的機會被其他插件或同一頁上的其他代碼覆蓋，也可以可以幫助你更好地跟蹤你的方法，事件和數據。

插件方法

在任何情況下，一個單獨的插件不應該在jQuery.fnjQuery.fn對象里有多個命名空間。

 1 (function ($) {
 2     $.fn.tooltip = function (options) {
 3         // this
 4     };
 5     $.fn.tooltipShow = function () {
 6         // is
 7     };
 8     $.fn.tooltipHide = function () {
 9         // bad
10     };
11     $.fn.tooltipUpdate = function (content) {
12         // !!!
13     };
14 })(jQuery);

這是不被鼓勵的，因為它.fn使.fn命名空間混亂。為瞭解決這個問題，你應該收集對象文本中的所有插件的方法，通過傳遞該方法的字元串名稱給插件以調用它們。

(function ($) {
    var methods = {
        init: function (options) {
            // this
        },
        show: function () {
            // is
        },
        hide: function () {
            // good
        },
        update: function (content) {
            // !!!
        }
    };
    $.fn.tooltip = function (method) {
        // 方法調用
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method' + method + 'does not exist on jQuery.tooltip');
        }
    };
})(jQuery);
//調用init方法
$('p').tooltip();
//調用init方法
$('p').tooltip({
    foo: 'bar'
});
// 調用hide方法 
$('p').tooltip('hide');
//調用Update方法 
$('p').tooltip('update', 'This is the new tooltip content!');

這種類型的插件架構允許您封裝所有的方法在父包中，通過傳遞該方法的字元串名稱和額外的此方法需要的參數來調用它們。這種方法的封裝和架構類型是jQuery插件社區的標準，它被無數的插件在使用，包括jQueryUI中的插件和widgets。

事件

一個鮮為人知bind方法的功能即允許綁定事件命名空間。如果你的插件綁定一個事件，一個很好的做法是賦予此事件命名空間。通過這種方式，當你在解除綁定的時候不會幹擾其他可能已經綁定的同一類型事件。你可以通過追加命名空間到你需要綁定的的事件通過 ‘.'。

(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                $(window).bind('resize.tooltip', methods.reposition);
            });
        },
        destroy: function () {
            return this.each(function () {
                $(window).unbind('.tooltip');
            })
        },
        reposition: function () {
            //...
        },
        show: function () {
            //...
        },
        hide: function () {
            //...
        },
        update: function (content) {
            //...
        }
    };
    $.fn.tooltip = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.tooltip');
        }
    };
})(jQuery);
$('#fun').tooltip();
//一段時間之後… … 
$('#fun').tooltip('destroy');

在這個例子中，當tooltip通過init方法初始化時，它將reposition方法綁定到resize事件並給reposition非那方法賦予命名空間通過追加.tooltip。稍後，當開發人員需要銷毀tooltip的時候，我們可以同時解除其中reposition方法和resize事件的綁定，通過傳遞reposition的命名空間給插件。這使我們能夠安全地解除事件的綁定並不會影響到此插件之外的綁定。

資料來源於http://www.php.cn/js-tutorial-393917.html

插件封裝 入門一

插件封裝入門一