【轉】jQuery插件的幾種寫法

這是看到的一篇jQ插件的總結。比較到位。詳盡且簡單易懂。若是以前看過jquery的源碼，應該特別好理解了。

 

1、jQuery插件開發方式

一、經過$.extend()來擴展jQuery

二、經過$.fn 向jQuery添加新的方法

三、經過$.widget()應用jQuery UI的部件工廠方式建立

 

2、三種jQuery插件開發方式說明

一、$.extend()相對簡單，通常不多可以獨立開發複雜插件，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。

二、咱們調用經過$.extend()添加的函數時直接經過$符號調用（$.myfunction()），而不須要選中DOM元素($('#example').myfunction())。

四、$.fn則是通常插件開發用到的方式，能夠利用jQuery強大的選擇器帶來的便利，以及將插件更好地運用於所選擇的元素身上，使用的插件也大可能是經過此種方式開發。

 

3、$.extend()擴展jQuery的實例

 

 $.extend({ 
 sayHello: function(name) { 
 console.log('Hello,' + (name ? name : 'aaa') + '!'); 
 } 
}) 
$.sayHello(); //Hello,aaa 
$.sayHello('bbb'); //Hello,bbb 

說明：上面代碼中，經過$.extend()向jQuery添加了一個sayHello函數，而後經過$直接調用。

 

 

4、$.fn方式插件開發

一、定義

 

$.fn.pluginName = function() {
 //your code here

 }

 

二、定義說明

 基本上就是往$.fn上面添加一個方法，名字是咱們的插件名稱。而後咱們的插件代碼在這個方法裏面展開。

 

三、簡單實例

將頁面上全部連接顏色轉成紅色，則能夠這樣寫這個插件

 

$.fn.myPlugin = function() {
 //在這裏面,this指的是用jQuery選中的元素
  //example :$('a'),則this=$('a') 
 
 this.css('color', 'red');
 }

 

四、實例說明

 

(1)、在插件名字定義的這個函數內部，this指代的是咱們在調用該插件時，用jQuery選擇器選中的元素，通常是一個jQuery類型的集合。在插件名字定義的這個函數內部，this指代的是咱們在調用該插件時，用jQuery選擇器選中的元素，通常是一個jQuery類型的集合。

(2)、若是經過調用jQuery的.each()方法處理集合中的每一個元素時要注意的是，在each方法內部，this指帶的是普通的DOM元素了，若是須要調用jQuery的方法那就須要用$來從新包裝一下。

 

$.fn.myPlugin = function() { 
 //在這裏面,this指的是用jQuery選中的元素 
 this.css('color', 'red'); 
 this.each(function() { 
 //對每一個元素進行操做 
 $(this).append(' ' + $(this).attr('href')); 
 }))
} 

 

 

五、實例插件的使用

 

<ul> <li>
 <a href="#">aaa</a>
 </li>
 <li>
 <a href="#">bbb</a>
 </li>
 <li>
 <a href="#">ccc</a> 
 
　　 </li> </ul> 
<p>這是p標籤不是a標籤，我不會受影響</p> 
<script src="jquery-1.11.0.min.js"></script> 
<script src="jquery.myplugin.js"></script> 
<script type="text/javascript"> 
 $(function(){ 
 $('a').myPlugin(); 
 }) 
</script> 

 

 

六、讓插件支持鏈式調用

 jQuery一個時常優雅的特性是支持鏈式調用，選擇好DOM元素後能夠不斷地調用其餘方法。要讓插件不打破這種鏈式調用，只需return一下便可。

 

 

$.fn.myPlugin = function() { 
 //在這裏面,this指的是用jQuery選中的元素
  this.css('color', 'red');
 return this.each(function() {
 //對每一個元素進行操做 
 $(this).append(' ' + $(this).attr('href')); 
 })) 
} 

 

七、讓插件接收參數

(1)、一個強勁的插件是可讓使用者隨意定製的，這要求咱們提供在編寫插件時就要考慮得全面些，儘可能提供合適的參數。

(2)、好比如今咱們不想讓連接只變成紅色，咱們讓插件的使用者本身定義顯示什麼顏色，要作到這一點很方便，只須要使用者在調用的時候傳入一個參數便可。同時咱們在插件的代碼裏面接收。

(3)、爲了靈活，使用者能夠不傳遞參數，插件裏面會給出參數的默認值。

(4)、在處理插件參數的接收上，一般使用jQuery的extend方法，當給extend方法傳遞一個以上的參數時，它會將全部參數對象合併到第一個裏。同時，若是對象中有同名屬性時，合併的時候後面的會覆蓋前面的。

(5)、能夠在插件裏定義一個保存插件參數默認值的對象，同時將接收來的參數對象合併到默認對象上，最後就實現了用戶指定了值的參數使用指定的值，未指定的參數使用插件默認值。

(6)、保護好默認參數：作法是將一個新的空對象作爲$.extend的第一個參數，defaults和用戶傳遞的參數對象緊隨其後，這樣作的好處是全部值被合併到這個空對象上，保護了插件裏面的默認值。

(7)、實例

$.fn.myPlugin = function(options) { 
 var defaults = { 
 'color': 'red', 
 'fontSize': '12px' 
 }; 
 var settings = $.extend({}, defaults, options); 
 return this.css({ 
 'color': settings.color, 
 'fontSize': settings.fontSize 
 }); 
} 

 

八、插件開發中的命名空間

(1)、不只僅是jQuery插件的開發，咱們在寫任何JS代碼時都應該注意的一點是不要污染全局命名空間。由於隨着你代碼的增多，若是有意無心在全局範圍內定義一些變量的話，最後很難維護，也容易跟別人寫的代碼有衝突。

(2)、好比你在代碼中向全局window對象添加了一個變量status用於存放狀態，同時頁面中引用了另外一個別人寫的庫，也向全局添加了這樣一個同名變量，最後的結果確定不是你想要的。因此不到萬不得已，通常咱們不會將變量定義成全局的。

(3)、可使用自調用匿名函數包裹插件代碼

 

(function() { 
 $.fn.myPlugin = function(options) { 
 var defaults = { 
 'color': 'red', 
 'fontSize': '12px' 
 }; 
 var settings = $.extend({},defaults, options);//將一個空對象作爲第一個參數 
 return this.css({ 
 'color': settings.color, 
 'fontSize': settings.fontSize 
 }); 
 } 
})(); 

 

九、儘可能在插件的最前面加上分號

 這樣能夠避免咱們將這段代碼放到頁面後，前面別人寫的代碼沒有用分號結尾，這樣，這個插件代碼就會報錯。

 

十、能夠將系統變量以變量形式傳遞到插件內部

;(function($,window,document,undefined){
 //咱們的代碼。

 //...
 })(jQuery,window,document); 

 

5、將插件代碼混淆與壓縮的方法

一、咱們下載的插件裏面，通常都會提供一個壓縮的版本通常在文件名裏帶個'min'字樣。也就是minified的意思，壓縮濃縮後的版本。例如，而且平時咱們使用的jQuery也是官網提供的壓縮版本，jquery.min.js。

二、這裏的壓縮不是指代碼進行功能上的壓縮，而是經過將代碼裏面的變量名，方法函數名等等用更短的名稱來替換，而且刪除註釋（若是有的話）刪除代碼間的空白及換行所獲得的濃縮版本。同時因爲代碼裏面的各類名稱都已經被替代，別人沒法閱讀和分清其邏輯，也起到了混淆代碼的做用。