jQuery如何製作自定義外掛

儘管jQuery已經提供了豐富的功能，能夠滿足基本的需要，但是並不能夠滿足所有的需要，所以有時候需要根據實際需要自定義一些具有特定功能的外掛，下面就來介紹一下如何製作一個自定義的jQuery外掛。

一.製作外掛必用的兩個函式:

[JavaScript] 純文字檢視 複製程式碼
$.extend(object)//為jQuery新增一個靜態函式。
$.fn.extend(object)//為jQuery新增一個例項函式。

靜態函式和例項函式簡單介紹:

1.靜態函式:所謂靜態函式就是直接使用jQuery呼叫的函式，例如:

[JavaScript] 純文字檢視 複製程式碼
jQuery.grep()

2.例項函式:所謂例項函式就是需要物件例項呼叫的函式，例如:

[JavaScript] 純文字檢視 複製程式碼
$("#id").hide()

二.製作簡單的外掛:

1.自定義靜態函式:

[JavaScript] 純文字檢視 複製程式碼
$.extend({func:function(){
  alert("自定義靜態函式");
}});
$.fun();

以上程式碼為jQuery新增了一個靜態函式。

2.自定義例項函式:

[JavaScript] 純文字檢視 複製程式碼
$.fn.extend({func:function(){ 
  alert("自定義例項函式"); 
}});
$("#id").func();

三.外掛完善:

1.步驟一:

在很多外掛中，都有(function ($) { })(jQuery)這個結構的身影，下面介紹一下它的用法。

它定義個一個匿名函式，jQuery是此函式實參，在外掛中具有很重要的作用。一般說來，要將外掛的程式碼放置於一個不受干擾的環境中，也就是為這個外掛頂一個私有作用域，外部的程式碼不能直接訪問外掛內部的程式碼，外掛內部的程式碼不汙染全域性變數。

2.步驟二:

如果新增的函式需要新增引數的話，一般會給這個函式設定一個預設的值，如果沒有傳參，就使用預設值，下面就介紹一下如何設定預設值，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
(function($){   
  $.fn.setbgColor=function(option){   
    var defaultOption={backgroundColor:"green"}   
    var newSettings={backgroundColor:option}  
    $.extend(defaultOption,newSettings);   
    var bgColor=defaultOption.backgroundColor; 
    this.each(function(){
      $(this).css("backgroundColor",bgColor); 
    }) 
  }   
})(jQuery);

以上程式碼可以讓setbgColor()函式的預設值為"green"，主要利用到了 $.extend()函式，這裡就不介紹了，具體可以參閱$.extend()函式用法詳解一章節。

3.步驟三:

上面的外掛已經比較好用了，但是還不夠完美，鏈式呼叫是jQuery的一大便利之處，所以再這裡將外掛實現鏈式呼叫功能。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
(function($){   
  $.fn.setbgColor=function(option){   
    var defaultOption={backgroundColor:"green"}   
    var newSettings={backgroundColor:option}  
    $.extend(defaultOption,newSettings);   
    var bgColor=defaultOption.backgroundColor; 
    return this.each(function(){
      $(this).css("backgroundColor",bgColor); 
    }) 
  }   
})(jQuery);

以上程式碼就可以實現鏈式呼叫效果了，因為each()函式是具有鏈式呼叫效果的，那麼它的返回值一定是jQuery物件，所以使用return返回jQuery物件就可以實現了。