翻譯jquery官方的插件製做方法

 

有時候你想重複使用同一個代碼塊，舉例：你想寫一方法，你能夠用這個方法，選擇作一系列的選擇操做，因此你想創造一個插件。 

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方法。可是咱們仍是須要繼續使用

$符號和其餘插件一塊兒共工做。咱們必須把咱們的代碼放在匿名函數表達式中（防止$被污染）。而後咱們把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，而後在內部判斷不一樣的行爲，來執行不一樣的操做：

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

 

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

 

典型的jquery方法包含任意數量的dom元素，這就是爲何jquery對象被稱爲對象集合。若是你想對必定數量的元素執行

 

任何操做你確定要用到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>

 

 

優化咱們的插件：

 

(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/