有時候你想重復使用同一個代碼塊，舉例：你想寫一方法，你可以用這個方法，選擇做一系列的選擇操作，所以你想創(chuàng)造一個插件。

jquery怎么樣工作：jquery對象方法（jquery Object Methods）

在寫自己的插件之前，我們必須明白下面這段代碼是如何工作的：

$( "a" ).css( "color", "red" ); 

這是一段簡潔實用的jquery代碼段，但是你知道jquery幕后是如何工作的么？當你只用 “$"函數選擇元素的時候，它返回了一個

jquery對象。這個對象包含了所有jquery可以調用的方法，例如，你肯定已經使用過這些（.css(), .click()…等等）。

這些方法適用于你用jquery選擇器選擇出來的所有元素。jquery對象的這些方法是從$.fn object 繼承出來的。

$.fn 對象包含了所有jquery的對象方法，如果你想寫自己的方法增加到jquery, 你需要把你的自定義方法寫在$.fn上。

基本的插件制作方法：

例如我們想制作一個greenify插件，用這個插件來設置一個dom元素的文字為綠色的。所以我們把一個叫greenify得方法增加到

$.fn上，它跟其他jquery對象方法一樣。

 

$.fn.greenify = function() {     this.css( "color", "green" ); };  $( "a" ).greenify(); // 使得所有鏈接顏色為綠色。 

 

注意：這里我們使用的.css()，前邊調用它的是this,而不是$(this)對象。這是因為我們的grenify方法和.css()方法被調用的對象一樣，

this代表了一個jquery對象。

啟用鏈式：

這一步要做2件事幫助我們的插件可以被實際使用。

***：鏈式操作是jquery的一個特點，你可以在一個被選出的元素后增加5或者6個操作。這是通過所以jquery對象方法再次返回來原來的jquery對象來完成的，使我們的方法啟用鏈式操作只需要增加一行：

 

$.fn.greenify = function() {     this.css( "color", "green" );      return this;// 啟用鏈式  } 
 
$( "a" ).greenify().addClass( "greenified" ); 

 

 這里在使得a標簽的文字變成綠色后我們還可以給a標簽增加class.

$別名的保護，增加作用域

第二：$符號在javascript庫或框架中非常流行，如果你在項目中同時用了其他類庫和jquery一起，你不能使得jquery使用$符號，

用jquery.noConflict()方法釋放掉$符號，然而我們的插件是假設使用$符號構建的jquery方法。但是我們還是需要繼續(xù)使用

$符號和其他插件一起共工作。我們必須把我們的代碼放在匿名函數表達式中（防止$被污染）。然后我們把jquery作為參數傳遞進去，

相應的形參用$符號。

 

(function ( $ ) {      $.fn.greenify = function() {          this.css( "color", "green" );          return this;      };  }( jQuery )); 

 

此外，我們使用匿名函數表達式是為了把變量私有化，加入我們想使用不同的顏色，我們可以用變量緩存。

 

(function ( $ ) {      var shade = "#556b2f";      $.fn.greenify = function() {          this.css( "color", shade );          return this;      };  }( jQuery )); 

 

只使用一個$.fn來構建插件：

只使用一個$.fn 會降低你的插件方法被覆蓋的幾率，下面的例子是不推薦的做法：

 

(function( $ ) {      //不好的例子          $.fn.openPopup = function() {          // Open popup code.      };     $.fn.closePopup = function() {          // Close popup code.      }; }( jQuery )); 

 

***的實踐是只使用一個$.fn，然后在內部判斷不同的行為，來執(zhí)行不同的操作：

 

(function( $ ) {      $.fn.popup = function( action ) {          if ( action === "open") {              // Open popup code.          }          if ( action === "close" ) {              // Close popup code.          }      };  }( jQuery )); 

 

使用each()方法遍歷（each() method）

典型的jquery方法包含任意數量的dom元素，這就是為什么jquery對象被稱為對象集合。如果你想對一定數量的元素執(zhí)行

任何操作你肯定要用到each遍歷dom樹。（操作包括獲取元素的屬性 get attribute,元素位置 positions）.

 

$.fn.myNewPlugin = function() {      return this.each(function() {          //遍歷元素然后do something      }); }; 

 

注意：我們返回的是.each()的結果 代替了 return this. 因為each()已經是可鏈式的，each內部已經返回了我們需要return的this.

這是到目前為止讓我們應用鏈式***的方式。

參數的配置使用：

當你的插件越來越復雜，***的方式是讓你的插件來接收參數，這樣的插件是可定制的。最簡單的方法是，把很多個參數用一個對象

字面量裝起來。現在我們來讓我們的greenify插件接收一些參數：

 

(function ( $ ) {     $.fn.greenify = function( options ) {           // 這里是配置的默認參數          var settings = $.extend({              color: "#556b2f",              backgroundColor: “white"          }, options );          // Greenify 方法基于默認的參數設定          return this.css({              color: settings.color,              backgroundColor: settings.backgroundColor          });      };  }( jQuery )); 

 

實際調用的時候傳入參數：

$( "div" ).greenify({      color: "orange"  }); 

默認的的color顏色設定 “#556b2f”,將被 color “orange” 覆蓋掉。

把所有東西整合在一起：

下面這個插件用到了我們上面討論過的技術：

 

(function( $ ) {      $.fn.showLinkLocation = function() {          this.filter( "a" ).each(function() {              var link = $( this );              link.append( " (" + link.attr( "href" ) + ")" );          });         return this;      };  }( jQuery )); 

 

// 實際調用

$( "a" ).showLinkLocation(); 

這個插件的工作方式是：把a標簽的href屬性里的值，增加到a標簽的里邊

<!—插件被調用前 -->

<a href="page.html">Foo</a> 

<!— 插件被調用后 -->

<a href="page.html">Foo (page.html)</a> 

優(yōu)化我們的插件：

 

(function( $ ) {         $.fn.showLinkLocation = function() {             this.filter( "a" ).append(function() {              return " (" + this.href + ")";          });             return this;         };     }( jQuery )); 

 

我們只用.append()方法接受回調，該回調函數返回的值將追加到遍歷的每一個a元素集合中。

注意：我們沒有使用.attr()方法來獲得元素的屬性，這是因為 原生的DOM API給了我們簡單的獲取href屬性的方式

（原生的方法要比jquery的方法性能好）

本文來自api.jquery.com的插件制作官方文檔，如果文章有翻譯錯誤，請指正。(轉載請注明出處，謝謝)

倉庫地址：https://github.com/ollieSk8/create_jq_plugins

參考原文地址：http://learn.jquery.com/plugins/basic-plugin-creation/