jQuery插件開發學習筆記

• 2019 年 10 月 7 日
• 筆記

　　今天想了解一下jQuery的插件開發，於是google了一下，列在前面的兩篇文章都很不錯，jQuery插件開發全解析 更是將插件開發的方方面面細緻入微的進行了講解，並提供了PDF進行下載。筆者今天詳細的閱讀了這篇文章並記錄了一些筆記。

1.類級別的插件開發

　　我是這樣理解的：jQuery是類，$是jQuery的別名，$('selector')為jQuery對象

　　這種插件類似為jQuery類添加靜態的方法，然後我們就可以像在C#中調用靜態方法一樣使用插件。添加靜態方法的途徑有兩種：

jQuery.alert = function () {      alert("這是一個jQuery的提示框");  }    jQuery.confirm = function () {      confirm("這是一個JQuery的提示框");  }

　　相應的調用：$.alert(); $.confirm();

　　另一種方法的程式碼如下：

jQuery.extend({      alert: function () { alert("這是一個jQuery的提示框"); },      confirm: function () { confirm("這是一個JQuery的提示框"); }  });

　　這種是通過jQuery提供的extend方法進行功能的擴展，調用的方法同上。

　　另外，為了避免與其它jQuery插件的衝突，我們可以添加自己的命名空間：

jQuery.sample = {      alert: function () { alert("這是一個jQuery的提示框"); },      confirm: function () { confirm("這是一個JQuery的提示框"); }  };

　　添加了命名空間後的調用：$.sample.alert(); $.sample.confirm();

2.對象級別的插件開發

/*    這種寫法的說明：  var fn = function(para){      //code...  }  fn(jQuery);    先定義一個方法，再立即執行這個方法  這種寫法的好處：我們在寫jQuery插件時,也可以使用$這個別名,而不會與prototype引起衝突.    */  (function ($) {      $.fn.extend({          hilight: function (options) {              var opts = $.extend($.fn.hilight.defauts, options);              this.css("color", opts.color).css("background-color", opts.bgcolor);          }      });        $.fn.hilight.defauts = {          color: 'red',          bgcolor: 'white'      };  })(jQuery);

　　jQuery推薦這種寫法，好處就在上面的注釋部分。

　　在這段程式碼中我們將defaults暴漏出來，允許用戶直接訪問並設置defaults值，這樣做的好處，是只需要在一處設置默認值以後，別處都可以直接使用，而不用每次傳遞參數。當然，我們仍然可以傳遞參數，以改變手工設置的默認值。

　　我們還可以通過暴漏defaults的相同方法來暴漏一些可供別人擴展的方法；如果需要將一個方法或屬性私有化，只需要在閉包中定義，而不要提供相應的引用。

3.總結

　　jQuery為開發插件提拱了兩個方法，分別是：

　　　　jQuery.fn.extend(object); 給jQuery對象添加方法。fn 是什麼東西呢？原來 jQuery.fn = jQuery.prototype，jQuery.fn.extend(object)是對jQuery.prototype進行的擴展，就是為jQuery類添加「成員函數」。jQuery類的實例可以使用這個「成員函數」。

　　　　jQuery.extend(object); 為擴展jQuery類本身.為類添加新的方法。可以理解為jQuery添加靜態方法。

　　最後提供相應的pdf下載：《jQuery插件開發全解析》