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

***：鏈?zhǔn)讲僮魇莏query的一個特點(diǎn)，你可以在一個被選出的元素后增加5或者6個操作。這是通過所以jquery對象方法再次返回來原來的jquery對象來完成的，使我們的方法啟用鏈?zhǔn)讲僮髦恍枰黾右恍校?/p>

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

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

$別名的保護(hù)，增加作用域

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

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

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

相應(yīng)的形參用$符號。

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

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

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

只使用一個$.fn來構(gòu)建插件：

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

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

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

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

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

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

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

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

注意：我們返回的是.each()的結(jié)果 代替了 return this. 因?yàn)閑ach()已經(jīng)是可鏈?zhǔn)降?，each內(nèi)部已經(jīng)返回了我們需要return的this.

這是到目前為止讓我們應(yīng)用鏈?zhǔn)?**的方式。

參數(shù)的配置使用：

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

字面量裝起來?，F(xiàn)在我們來讓我們的greenify插件接收一些參數(shù)：

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

實(shí)際調(diào)用的時候傳入?yún)?shù)：

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

默認(rèn)的的color顏色設(shè)定 “#556b2f”,將被 color “orange” 覆蓋掉。

把所有東西整合在一起：

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

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

// 實(shí)際調(diào)用

$( "a" ).showLinkLocation(); 

這個插件的工作方式是：把a(bǔ)標(biāo)簽的href屬性里的值，增加到a標(biāo)簽的里邊

<!—插件被調(diào)用前 -->

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

<!— 插件被調(diào)用后 -->

<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()方法接受回調(diào)，該回調(diào)函數(shù)返回的值將追加到遍歷的每一個a元素集合中。

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

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

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

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

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