深刻理解jQuery插件開發總結（一）

因爲這篇文章比較長，因此分了四個階段講，從簡單的入門級到最後到綜合級，有些列子和圖片都是轉載其餘博主的，但願對想寫插件對同窗會有幫助。這裏分享個很久以前寫的一個jquery插件（網站的功能引導插件，思路應該有些落伍了，僅供參考）： javascript

github.com/BothEyes199…

（入門級）

1、插件的幾種寫法

首先，在具體說明編寫插件以前，咱們先假定一個使用場景：有一個HTML頁面，頁面上放置了一個5行3列的表格。css

<table id="newTable">
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
    <tr>
        <td>1</td><td>1</td><td>1</td> 
    </tr>
</table>
複製代碼

要實現的功能是：鼠標移到表格的某一行時，當前行高亮顯示，其餘行正常。java

利用JQuery插件實現上述功能。經常使用的JQuery插件有以下幾種寫法：jquery

1.對JQuery自身的擴展插件

這種插件是對JQuery自身的方法庫進行擴展的。在使用的時候經過$.MethodName()的方式直接使用。git

$.extend({
    handleTableUI : function(table){
        var thisTable = $("#" + table);
        $(thisTable).find("tr").bind("mouseover", function () {
            $(this).css({ color: "#ff0011", background: "blue" });
        });
        $(thisTable).find("tr").bind("mouseout", function () {
            $(this).css({ color: "#000000", background: "white" });
        });
    }
});
複製代碼

說明：當要對JQuery自身進行擴展的時候，須要採用$.extend();的形式進行開發，JQuery的extend()方法爲咱們提供了擴展 JQuery自身的方式，在extend()方法中，咱們採用{...}的形式編寫具體的方法體。其中，最重要的是要定義咱們本身的擴展方法，如示例中的 handleTableUI。定義的方式是：方法名 : function(參數){ 方法體 }。經過此種方式咱們就能夠定義JQuery本身的擴展方法，並且這個方法能夠在web頁面經過智能提示顯示出來。github

頁面中調用的代碼以下：web

<script type="text/javascript">
    $(document).ready(function () {
        $.handleTableUI("newTable");
    });
</script>
複製代碼

二、對JQuery對象的插件開發

形式1：bash

(function($){  
   $.fn.extend({  
    pluginName:function(opt,callback){  
              // Our plugin implementation code goes here.   
    }  
   }) 
})(jQuery);  
複製代碼

形式2：markdown

(function($) {   
    $.fn.pluginName = function() {  
         // Our plugin implementation code goes here.  
    };  
})(jQuery);  
複製代碼

使用這種插件的擴展上面的實例jquery插件

(function ($) {
    $.fn.setTableUI = function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        var options = $.extend(defaults, options);
        this.each(function(){
            var thisTable=$(this);
            $(thisTable).find("tr").bind("mouseover", function () {
                $(this).css({ color: "#ff0011", background: "blue" });
            });
            $(thisTable).find("tr").bind("mouseout", function () {
                $(this).css({ color: "#000000", background: "white" });
            });
        });
    };
})(jQuery);
複製代碼

說明：當要對頁面元素進行JQuery擴展時，須要採用(function($){...})(JQuery);的方式進行開發。在「...」處，定義咱們本身的方法，定義方式是：$.fn.自定義方法名 = function(參數){...};的形式定義擴展方法的具體內容。在頁面調用的時候不一樣於對JQuery自身的擴展。

具體調用代碼以下：

<script type="text/javascript">
    $(document).ready(function () {
        $("#newTable").setTableUI();
    });
</script>
複製代碼

2、編寫jQuery插件時，必定要注意如下列出的地方

一、插件的推薦命名方法爲：jquery.[插件名].js 二、全部的對象方法都應當附加到JQuery.fn對象上面，而全部的全局函數都應當附加到JQuery對象自己上。三、在插件內部，this指向的是當前經過選擇器獲取的JQuery對象，而不像通常方法那樣，內部的this指向的是DOM元素。
四、能夠經過this.each 來遍歷全部的元素

五、全部方法或函數插件，都應當以分號結尾，不然壓縮的時候可能會出現問題。爲了更加保險寫，能夠在插件頭部添加一個分號（；），以避免他們的不規範代碼給插件帶來影響。六、插件應該返回一個JQuery對象，以便保證插件的可鏈式操做。七、避免在插件內部使用$做爲JQuery對象的別名，而應當使用完整的JQuery來表示。這樣能夠避免衝突。

八、在JQuery命名空間下聲明只聲明一個單獨的名稱九、接受options參數，以便控制插件的行爲例如

// plugin definition 
$.fn.hilight = function(options) { 
  var defaults = { 
    foreground: 'red', 
    background: 'yellow' 
  }; 
  // Extend our default options with those provided. 
  var opts = $.extend(defaults, options); 
  // Our plugin implementation code goes here. 
}; 
複製代碼

咱們的插件能夠這樣被調用

$('#myDiv').hilight({ 
  foreground: 'blue' 
});
複製代碼

十、暴露插件的默認設置，以便外面能夠訪問例如

.fn.hilight = function(options) {

  // Extend our default options with those provided.

  // Note that the first arg to extend is an empty object - 
  // this is to keep from overriding our "defaults" object. 
  var opts = $.extend({}, $.fn.hilight.defaults, options); 
  // Our plugin implementation code goes here. 
}; 
// plugin defaults - added as a property on our plugin function 
$.fn.hilight.defaults = { 
  foreground: 'red', 
  background: 'yellow' 
};  
複製代碼