插件封裝 入門一

      編寫一個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