jQuery外掛開發詳細教學_jquery

擴充jQuery外掛和方法的作用是非常強大的，它可以節省大量開發時間。這篇文章將概述jQuery插件開發的基本知識，最佳做法和常見的陷阱。

一、入門

寫一個jQuery外掛程式開始於為jQuery.fn加入新的功能屬性，此處新增的物件屬性的名稱就是你外掛程式的名稱：

複製程式碼 程式碼如下:

jQuery.fn.myPlugin = function(){

  //你自己的外掛程式碼

};

使用者非常喜歡的$符號哪裡去了？ 它仍然存在，但是，為了避免和其他JavaScript庫衝突，我們最好將jQuery傳遞給一個自我執行的封閉程序，jQuery在此程序中映射為$符號，這樣可以避免$號被其他庫覆蓋。

複製程式碼

程式碼如下:

(ffnunction ($) {(ffn .MyPlugin = function () {        //你自己的插件程式碼

    };

})(jQuery);

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



二、環境


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




複製程式碼

程式碼如下:

(ffnunction ($) {

(ffn .MyPlugin = function () {

        //此處上沒有必要將this包在$號如$(this)，因為this已經是一個jQuery物件。 this)等同於$($('#element'));

        this.fadeIn('normal', function () {        });    };

})(jQuery);

$('>})(jQuery);

$('帶>



三、基礎知識


現在，我們了解jQuery插件的基礎知識，讓我們寫一個插件，做一些事情。




複製代碼

代碼如下:

(function ($) {

$.fn.maxHeight = function () {

        var max = 0;

      max, $ (this).height());        });        return max;    };}; div').maxHeight(); //傳回高度最大的div元素的高度

這是一個簡單的插件，利用.height()返回頁面中高度最大的div元素的高度。 四、維護Chainability 很多時候，一個插件的意圖只是以某種方式修改收集的元素，並把它們傳遞給鏈中的下一個方法。 這是jQuery的設計之美，也是jQuery如此受歡迎的原因之一。 因此，要保持一個插件的chainability，你必須確保你的插件回到this關鍵字。 複製程式碼 程式碼如下:

(function ($) {

    $.fn.lockDimensions = function (type) {

     > var $this = $(this);

            if (!type || type == 'width') {
               }

            if (!type || type == 'height') {
              }

        });

    };
})(jQuery);

$('div').lockDimensions('width').CSS('color', 'red');


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

五、預設值和選項

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


複製代碼

代碼如下:(function ($) {

$.fn.tooltip = function (options) {

        //建立一些預設值，以拓展任何提供的選項
      top ',
            'background-color': 'blue'
        }, options);
    }           // Tooltip插件代碼

        });

    };
})(jQuery);

$('div').tooltip({ 
});


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




複製程式碼

程式碼如下:

{    'location': 'left', blue'}這是一個很靈活的方式，提供一個高度可配置的插件，而無需開發人員定義所有可用的選項。

六、命名空間


正確命名空間你的插件是插件開發的一個非常重要的一部分。 正確的命名空間，可以確保你的外掛程式將有一個非常低的機會被其他外掛程式或同一頁上的其他程式碼覆蓋。 命名空間也使得你的生活作為一個插件開發人員更容易，因為它可以幫助你更好地追蹤你的方法，事件和數據。

七、插件方法

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

複製代碼

代碼如下:

(function ($) { $.fn.tooltip = function (options) {        // this    };    $.fn.to  🎜>    $ .fn.tooltipHide = function () {        // bad

    };

    $.fn 🎜>
})(jQuery);

這是不被鼓勵的，因為它$.fn使$.fn命名空間混亂。 為了解決這個問題，你應該收集物件文字中的所有插件的方法，透過傳遞該方法的字串名稱給插件以呼叫它們。

複製代碼 代碼如下:

(function ($) {

var methods = {
        init: function (options) {
            //  🎜>            // is
        },
        hide: function () {
            // good
        },
     !
        }
    };

    $. fn.tooltip = function (method) {

        // 方法呼叫
       if .prototype.slice.call (arguments, 1));
        } else if (typeof method === 'object' || !method) {
          } else {
            $.error('Method' method 'does not exist on jQuery.tooltip');
     🎜>
//呼叫init方法
$('div').tooltip();

//呼叫init方法
$('div').tooltip({
    foo: ' bar'
});

// 呼叫hide方法
$('div').tooltip('hide');

//呼叫Update方法
$('div').tooltip('update', 'This is the new tooltip content!');


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


八、事件


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

複製程式碼

程式碼如下:

(function ($) {

    varmethods = {
        init: function ( {
$ (window).bind('resize.tooltip',methods.reposition);
            });

   🎜>            傳回此值。 every(function () {
                $(window).unbind('.tooltip');
   🎜>        重新定位： function () {
           // 。  隱藏：函數() {
            //...
} ,
        更新：函數（內容）{
            //...
    （方法）{

        if (methods[method]) {
            returnmethods[method. (typeof method === 'object ' || !method) {
            returnmeth ery.tooltip上不存在');
        }
    };

})(jQuery);

$('#fun').tooltip();

$('#fun').tooltip();

$('#fun').tooltip();

$('#fun').tooltip();

$('#fun').tooltip();

$('#fun').toop();
..
$('#fun').tooltip('銷毀');


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


九、資料


通常在插件開發的時候，你可能需要記錄或檢查你的插件是否已經被初始化給了一個元素。使用 jQuery 的資料方法是一個很好的基於元素的記錄變數的方法。儘管如此，相對對於記錄大量不同名字的分離的數據，使用一個單獨的物件保存所有變量，並透過一個單獨的命名空間讀取這個物件不失為一個更好的方法。

複製程式碼

程式碼如下：

(function ($) {

    varmethods = {
        init: function ( {

               var $this = $(this),
                         tooltip = $('

', {
                ('title')
                    });

            if (!data) {

                     🎜>                    */

                            目標：$this,
                        });

}
            });
        },
       each(function () {

                var $this = $(this) ,
                               $(window).unbind('.tooltip');
data.tooltip. remove();
                $this.removeData('tooltip');

   🎜>        重新定位: function () {
           / / .. .
        },
        顯示：函數() {
         隱藏：函數() {
            // ...
        },
        更新：函數（內容）{
            // ...
      {

if (methods[method]) {
            returnmethods[method].apply(this, Array.prototype.slice.call(arguments, 1));            returnmethods.init.apply(this,arguments);
        }else {
            $.error('Method ' method ' does not exist on jQuery.tooltip');
    );


將資料透過命名空間封裝在一個物件中，可以更容易的從一個集中的位置讀取所有插件的屬性。

十、總結與最佳做法

編寫jQuery外掛程式可讓你做出函式庫，將最有用的功能整合到可重複使用的程式碼，可以節省開發者的時間，讓開發更有效率。 開發jQuery外掛時，要牢記： 1.總是包裹在一個封閉的插件：

複製程式碼

程式碼如下:(function ($) {/* plugin goes here */})(jQuery);

2.不要冗餘包裹this關鍵字在插件的功能範圍內
3.除非插件會傳回特定值，否則總是會傳回this關鍵字來維持chainability 。
4.傳遞一個可拓展的預設物件參數而不是大量的參數給插件。

5.不要在一個外掛程式中多次命名不同方法。
3.始終命名空間的方法，事件和資料。