翻譯jquery官方的插件制作方法
有時候你想重復使用同一個代碼塊，舉例：你想寫一方法，你可以用這個方法，選擇做一系列的選擇操作，所以你想創(chuàng)造一個插件。
jquery怎么樣工作：jquery對象方法（jquery Object Methods）
在寫自己的插件之前，我們必須明白下面這段代碼是如何工作的：
- $( "a" ).css( "color", "red" );
這是一段簡潔實用的jquery代碼段，但是你知道jquery幕后是如何工作的么？當你只用 “$"函數(shù)選擇元素的時候，它返回了一個
jquery對象。這個對象包含了所有jquery可以調(diào)用的方法，例如，你肯定已經(jīng)使用過這些（.css(), .click()…等等）。
這些方法適用于你用jquery選擇器選擇出來的所有元素。jquery對象的這些方法是從$.fn object 繼承出來的。
$.fn 對象包含了所有jquery的對象方法，如果你想寫自己的方法增加到jquery, 你需要把你的自定義方法寫在$.fn上。
基本的插件制作方法：
例如我們想制作一個greenify插件，用這個插件來設置一個dom元素的文字為綠色的。所以我們把一個叫g(shù)reenify得方法增加到
$.fn上，它跟其他jquery對象方法一樣。
- $.fn.greenify = function() { this.css( "color", "green" ); }; $( "a" ).greenify(); // 使得所有鏈接顏色為綠色。
注意：這里我們使用的.css()，前邊調(diào)用它的是this,而不是$(this)對象。這是因為我們的grenify方法和.css()方法被調(diào)用的對象一樣，
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()方法釋放掉$符號，然而我們的插件是假設使用$符號構(gòu)建的jquery方法。但是我們還是需要繼續(xù)使用
$符號和其他插件一起共工作。我們必須把我們的代碼放在匿名函數(shù)表達式中（防止$被污染）。然后我們把jquery作為參數(shù)傳遞進去，
相應的形參用$符號。
- (function ( $ ) { $.fn.greenify = function() { this.css( "color", "green" ); return this; }; }( jQuery ));
此外，我們使用匿名函數(shù)表達式是為了把變量私有化，加入我們想使用不同的顏色，我們可以用變量緩存。
- (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 ));
***的實踐是只使用一個$.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. 因為each()已經(jīng)是可鏈式的，each內(nèi)部已經(jīng)返回了我們需要return的this.
這是到目前為止讓我們應用鏈式***的方式。
參數(shù)的配置使用：
當你的插件越來越復雜，***的方式是讓你的插件來接收參數(shù)，這樣的插件是可定制的。最簡單的方法是，把很多個參數(shù)用一個對象
字面量裝起來。現(xiàn)在我們來讓我們的greenify插件接收一些參數(shù)：
- (function ( $ ) { $.fn.greenify = function( options ) { // 這里是配置的默認參數(shù) var settings = $.extend({ color: "#556b2f", backgroundColor: “white" }, options ); // Greenify 方法基于默認的參數(shù)設定 return this.css({ color: settings.color, backgroundColor: settings.backgroundColor }); }; }( jQuery ));
實際調(diào)用的時候傳入?yún)?shù)：
- $( "div" ).greenify({ color: "orange" });
默認的的color顏色設定 “#556b2f”,將被 color “orange” 覆蓋掉。
把所有東西整合在一起：
下面這個插件用到了我們上面討論過的技術(shù)：
- (function( $ ) { $.fn.showLinkLocation = function() { this.filter( "a" ).each(function() { var link = $( this ); link.append( " (" + link.attr( "href" ) + ")" ); }); return this; }; }( jQuery ));
// 實際調(diào)用
- $( "a" ).showLinkLocation();
這個插件的工作方式是：把a標簽的href屬性里的值，增加到a標簽的里邊
<!—插件被調(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()方法來獲得元素的屬性，這是因為 原生的DOM API給了我們簡單的獲取href屬性的方式
（原生的方法要比jquery的方法性能好）
本文來自api.jquery.com的插件制作官方文檔，如果文章有翻譯錯誤，請指正。(轉(zhuǎn)載請注明出處，謝謝)
倉庫地址：https://github.com/ollieSk8/create_jq_plugins
參考原文地址：http://learn.jquery.com/plugins/basic-plugin-creation/
