深入理解jQuery外掛程式開發總結（二）

1，開始

可以通過為jquery.fn增加乙個新的函式來編寫jquery外掛程式。屬性的名字就是你的外掛程式的名字：

jquery.fn.myplugin = function();

但是，那惹人喜愛的美元符號$**去了？她就是jquery，但是為了確保你的外掛程式與其他使用$的庫不衝突，最好使用乙個立即執行的匿名函式，這個匿名函式的引數是jquery，這樣其他的庫就可以放心的使用$符號了。

(function( $ );  
})( jquery );

這樣更好了就。在閉包內，可以放心的使用$符號了～

2，上下文

現在已經可以編寫我們的**了，但是編寫之前，我必須說一說上下文。在外掛程式內部的範圍中，this關鍵字指向的是jquery物件。人們很容易誤解這一點，因為在正常使用jquery的時候，this通常指向的是乙個dom元素。不了解這一點，會經常使用$又包裝了一次。

(function( $ ));  
}; 
})( jquery ); 
$('#element').myplugin();

3，基本開發

接下來寫乙個能用的外掛程式吧。

(function( $ ));  
return max; 
}; 
})( jquery ); 
var tallest = $('div').maxheight();

這是乙個簡單的外掛程式，通過呼叫height()返回頁面上height最大的div的height。

4，維護鏈式開發的特性

上乙個例子是返回了乙個整數，但是大多數情況下，乙個外掛程式緊緊是修改收集到的元素，然後返回這個元素讓鏈條上的下乙個使用。這是jquery設計的精美之處，也是jquery如此流行的原因之一。為了保證可鏈式，你必須返回this。

(function( $ )  
if ( !type || type == 'height' ) 
}); 
}; 
})( jquery ); 
$('div').lockdimensions('width').css('color','red');

因為該外掛程式返回了this，所以保證了可鏈式，從而可以繼續使用jquery方法進行修改，如css()。如果你的外掛程式如果不是返回乙個簡單值，你通常應該返回this。而且，正如你可能想到的，你傳進去的引數也可以在你的外掛程式中訪問。所以在這個例子中，可以訪問到type。

5，預設值和選項

為了一些複雜的，可訂製的外掛程式，最好提供一套預設值，在被呼叫的時候擴充套件預設值。這樣，呼叫函式的時候就不用傳入一大堆引數，而是傳入需要被替換的引數。你可以這樣做：

(function( $ );  
return this.each(function() 
// 其他**咯 
}); 
}; 
})( jquery ); 
$('div').tooltip();

在這個例子中，呼叫外掛程式後，預設的location會被替換城'left'，而background－color還是'blue'。這樣可以保證高度可配置性，而不需要開發者定義所有可能的選項了。

6，命名空間

正確的命名空間對於外掛程式開發十分重要，這樣能確保你的外掛程式不被其他外掛程式重寫，也能避免被頁面上其他**重寫。命名空間可以使你更長壽，因為你能記錄你自己的方法，事件，資料等。

a，外掛程式方法

在任何情況下，都不要在乙個外掛程式中為jquery.fn增加多個方法。如：

(function( $ );  
$.fn.tooltipshow = function( ) ; 
$.fn.tooltiphide = function( ) ; 
$.fn.tooltipupdate = function( content ) ; 
})( jquery );

不推薦這樣使用，搞亂了$.fn命名空間。要糾正之，你可以把所有的方法放進乙個物件中，然後通過不同的引數來呼叫。

(function( $ ),  
show : function( ) , 
hide : function( ) , 
update : function( content ) 
}; 
$.fn.tooltip = function( method ) else if ( typeof method === 'object' || ! method ) else 
}; 
})( jquery ); 
$('div').tooltip(); 
$('div').tooltip('hide'); // calls the hide method 
$('div').tooltip('update', 'this is the new tooltip content!'); // calls the update method

jquery自己的擴充套件也是使用這種外掛程式結構。

b，事件

繫結事件的命名空間是比較不為人知的。如果你的外掛程式繫結了某個事件，最好將它搞到乙個命名空間中。這樣，如果你以後需要解綁，就不會影響到其他繫結到這個事件上的函式了。你可以使用"."來增加命名空間。

(function( $ ));  
}, 
destroy : function( ) ) 
}, 
reposition : function( ) , 
show : function( ) , 
hide : function( ) , 
update : function( content ) 
}; 
$.fn.tooltip = function( method ) else if ( typeof method === 'object' || ! method ) else 
}; 
})( jquery ); 
$('#fun').tooltip(); 
// some time later... 
$('#fun').tooltip('destroy');

在這個例子中，tooltip在init方法中初始化，它將reposition方法繫結到window物件的resize事件的tooltip名字空間下。稍候，如果開發者需要去掉這個tooltip，我們可以解綁這個繫結。這樣就不會影響到其他繫結到window物件的resize事件的方法了。

c，資料

在開發外掛程式的時候，你通常會有保持狀態或者檢查你的外掛程式是否已經初始化的需要。使用jquery的data方法是保持變數的很好的方法。但是，我們不把變數單獨儲存，而是放在乙個物件中，這樣就可以在乙個名字空間下統一訪問了。

(function( $ ));             
// if the plugin hasn't been initialized yet 
if ( ! data ) ); 
} }); 
}, 
destroy : function( ) ) 
}, 
reposition : function( ) , 
show : function( ) , 
hide : function( ) , 
update : function( content ) 
}; 
$.fn.tooltip = function( method ) else if ( typeof method === 'object' || ! method ) else 
}; 
})( jquery );

使用data方法可以幫助你在外掛程式的各個方法間保持變數和狀態。將各種變數放在乙個物件中，可以方便訪問，也可以方便移除。

7，總結與最佳實踐

編寫jquery外掛程式可以充分利用庫，將公用的函式抽象出來，「迴圈利用」。以下是簡短的總結：

● 使用(function($))(jquery);來包裝你的外掛程式

● 不要在外掛程式的初始範圍中重複包裹

● 除非你返回原始值，否則返回this指標來保證可鏈式

● 不要用一串引數，而是使用乙個物件，並且設定預設值

● 乙個外掛程式，不要為jquery.fn附上多個函式

● 為你的函式，事件，資料附著到某個命名空間

深入理解jQuery外掛程式開發總結（二）

Qt之深入理解外掛程式系統

Unity開發深入理解RectTransform

VuePress教程之深入理解外掛程式API

深入理解jQuery外掛程式開發總結（二）

Qt之深入理解外掛程式系統

Unity開發 深入理解RectTransform

VuePress教程之深入理解外掛程式API

相關推薦

Unity開發深入理解RectTransform