jquery ----> How to Create a Basic Plugin (翻譯)
http://learn.jquery.com/plugins/basic-plugin-creation/
如何創建一個基本的插件
有時候你想在整個代碼中提供一些功能。 例如，也許你想要一個單一的方法，你可以調用一個jQuery selection來對selection執行一系列操作。 在這種情況下，您可能需要編寫一個插件。
jQuery如何工作101：jQuery對象方法
在我們編寫自己的插件之前，我們必須先了解一下jQuery的工作原理。 看看這個代碼：
1 $( "a" ).css( "color", "red" );
這是一些非常基本的jQuery代碼，但是你知道幕後發生了什麽嗎？ 無論何時使用$函數選擇元素，它都會返回一個jQuery對象。 該對象包含所有您使用的方法（.css()，.click()等）以及適合您選擇器的所有元素。 jQuery對象從$ .fn對象中獲取這些方法。 這個對象包含了所有的jQuery對象方法，如果我們想寫我們自己的方法，它也需要包含這些方法。
基本插件創作
假設我們要創建一個插件，使得一組檢索元素中的文本呈綠色。 我們所要做的就是將一個名為greenify的函數添加到$ .fn中，並且它將像其他任何jQuery對象方法一樣可用。
1 $.fn.greenify = function() { 2 this.css( "color", "green" ); 3 }; 4 5 $( "a" ).greenify(); // Makes all the links green.
6 //使所有的鏈接變成綠色
註意，要使用另一種方法.css()，我們使用 this，而不是$(this)。 這是因為我們的greenify 函數是與.css()相同對象的一部分。
鏈接
這很有效，但是我們需要為我們的插件在現實世界中生存而做一些事情。 當你將五個或六個動作鏈接到一個選擇器上時，jQuery的一個特性就是鏈接。 這是通過讓所有jQuery對象方法再次返回原始jQuery對象來實現的（有一些例外：調用.width()而不帶參數返回所選元素的寬度，並且不可鏈接）。 使我們的插件方法可鏈接需要一行代碼：
1 $.fn.greenify = function() { 2 this.css( "color", "green" ); 3 return this; 4 } 5 6 $( "a" ).greenify().addClass( "greenified" );
保護$ 別名並添加範圍
$變量在JavaScript庫中非常受歡迎，如果您使用jQuery另一個庫，則必須使jQuery不使用帶有jQuery.noConflict()的$。 但是，這會破壞我們的插件，因為它是在假設$是jQuery函數的別名的情況下編寫的。 為了與其他插件一起使用，並且仍然使用jQuery $別名，我們需要將所有代碼放入立即調用的函數表達式中，然後傳遞函數jQuery，並將參數命名為$：
1 (function ( $ ) { 2 3 $.fn.greenify = function() { 4 this.css( "color", "green" ); 5 return this; 6 }; 7 8 }( jQuery ));
此外，立即調用函數的主要目的是允許我們擁有自己的私有變量。假設我們想要一個不同的綠色，我們想把它存儲在一個變量中。
1 (function ( $ ) { 2 3 var shade = "#556b2f"; 4 5 $.fn.greenify = function() { 6 this.css( "color", shade ); 7 return this; 8 }; 9 10 }( jQuery ));
最小化插件封裝
編寫插件只需占用$ .fn中的一個插槽是一種很好的做法。 這樣既減少了插件被覆蓋的機會，也減少了插件覆蓋其他插件的機會。 換句話說，這很糟糕：
1 (function( $ ) { 2 3 $.fn.openPopup = function() { 4 // Open popup code. 5 }; 6 7 $.fn.closePopup = function() { 8 // Close popup code. 9 }; 10 11 }( jQuery ));
擁有一個插槽會更好，並使用參數來控制一個插槽執行的操作。
1 (function( $ ) { 2 3 $.fn.popup = function( action ) { 4 5 if ( action === "open") { 6 // Open popup code. 7 } 8 9 if ( action === "close" ) { 10 // Close popup code. 11 } 12 13 }; 14 15 }( jQuery ));
使用each()方法
典型的jQuery對象將包含對任意數量DOM元素的引用，這就是為什麽jQuery對象通常被稱為集合。 如果您想對特定元素進行任何操作（例如獲取數據屬性，計算特定位置），那麽您需要使用.each()來遍歷元素。
1 $.fn.myNewPlugin = function() { 2 3 return this.each(function() { 4 // Do something to each element here. // 在這裏為每個元素做點事情。 5 }); 6 7 };
註意，我們返回.each()的結果而不是返回this結果。 由於.each()已經是可鏈接的，它返回this，然後我們返回。 這是維持可持續性的一種比迄今為止我們所做的更好的方法。
接受選項
隨著你的插件變得越來越復雜，通過接受選項讓你的插件可定制是一個好主意。 最簡單的方法是使用對象字面值，特別是如果有很多選項的話。 讓我們改變我們的綠化插件接受一些選項。
1 (function ( $ ) { 2 3 $.fn.greenify = function( options ) { 4 5 // This is the easiest way to have default options. // 這是擁有默認選項的最簡單方法。 6 var settings = $.extend({ 7 // These are the defaults. // 這些是默認設置。 8 color: "#556b2f", 9 backgroundColor: "white" 10 }, options ); 11 12 // Greenify the collection based on the settings variable. //根據設置變量使集合變綠。 13 return this.css({ 14 color: settings.color, 15 backgroundColor: settings.backgroundColor 16 }); 17 18 }; 19 20 }( jQuery ));
示例：
1 $( "div" ).greenify({ 2 color: "orange" 3 });
＃556b2f的顏色默認值被$ .extend()覆蓋為橙色。
把它放在一起
下面是使用我們討論過的一些技巧的一個小插件的例子：
1 (function( $ ) { 2 3 $.fn.showLinkLocation = function() { 4 5 this.filter( "a" ).each(function() { 6 var link = $( this ); 7 link.append( " (" + link.attr( "href" ) + ")" ); 8 }); 9 10 return this; 11 12 }; 13 14 }( jQuery )); 15 16 // Usage example: 17 $( "a" ).showLinkLocation();
這個方便的插件遍歷集合中的所有錨，並在括號中追加href屬性。
1 <!-- Before plugin is called: --> 2 <a href="page.html">Foo</a> 3 4 <!-- After plugin is called: --> 5 <a href="page.html">Foo (page.html)</a>
我們的插件可以優化，但：
1 (function( $ ) { 2 3 $.fn.showLinkLocation = function() { 4 5 this.filter( "a" ).append(function() { 6 return " (" + this.href + ")"; 7 }); 8 9 return this; 10 11 }; 12 13 }( jQuery ));
我們使用.append()方法的功能來接受回調，並且該回調的返回值將決定集合中每個元素的附加內容。 另請註意，我們沒有使用.attr()方法來檢索href屬性，因為本地DOM API使我們可以輕松訪問具有恰當名稱的href屬性。
jquery ----> How to Create a Basic Plugin (翻譯)