jQuery插件的開發之$.extend(),與$.fn.extend()

jQuery插件的開發包括兩種：

一種是類級別的插件開發，即給jQuery添加新的全局函數，至關於給jQuery類自己添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數，另外一種是對象級別的插件開發，即給jQuery對象添加方法。下面就兩種函數的開發作詳細的說明。

1、類級別的插件開發

類級別的插件開發最直接的理解就是給jQuery類添加類方法，能夠理解爲添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類級別的插件開發能夠採用以下幾種形式進行擴展：

1.1 添加一個新的全局函數

添加一個全局函數，咱們只需以下定義：

Java代碼 

1. jQuery.foo = function() {   
2. alert('This is a test. This is only a test.');  
3. };    

 

1.2 增長多個全局函數

添加多個全局函數，可採用以下定義：

Java代碼 

1. jQuery.foo = function() {   
2. alert('This is a test. This is only a test.');  
3. };  
4. jQuery.bar = function(param) {   
5. alert('This function takes a parameter, which is "' + param + '".');  
6. };   
7. 調用時和一個函數的同樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');  

1.3 使用jQuery.extend(object);　

Java代碼 

1. jQuery.extend({      
2. foo: function() {      
3. alert('This is a test. This is only a test.');      
4. },      
5. bar: function(param) {      
6. alert('This function takes a parameter, which is "' + param +'".');      
7. }     
8. });  

 

1.4 使用命名空間

雖然在jQuery命名空間中，咱們禁止使用了大量的javaScript函數名和變量名。可是仍然不可避免某些函數或變量名將於其餘jQuery插件衝突，所以咱們習慣將一些方法封裝到另外一個自定義的命名空間。

Java代碼 

1. jQuery.myPlugin = {          
2. foo:function() {          
3. alert('This is a test. This is only a test.');          
4. },          
5. bar:function(param) {          
6. alert('This function takes a parameter, which is "' + param + '".');    
7. }         
8. };  
9. 採用命名空間的函數仍然是全局函數，調用時採用的方法：  
10. $.myPlugin.foo();         
11. $.myPlugin.bar('baz');  

 

經過這個技巧（使用獨立的插件名），咱們能夠避免命名空間內函數的衝突。

2、對象級別的插件開發

對象級別的插件開發須要以下的兩種形式：、

形式1：  

Java代碼 

1. (function($){     
2. $.fn.extend({     
3. pluginName:function(opt,callback){     
4.           // Our plugin implementation code goes here.       
5. }     
6. })     
7. })(jQuery);     

形式2：

 

Java代碼 

1. (function($) {       
2. $.fn.pluginName = function() {     
3.      // Our plugin implementation code goes here.     
4. };     
5. })(jQuery);      

       上面定義了一個 jQuery函數,形參是$，函數定義完成以後,把jQuery這個實參傳遞進去.當即調用執行。這樣的好處是,咱們在寫jQuery插件時,也可使用$這個別名,而不會與prototype引發衝突.

2.1 在JQuery名稱空間下申明一個名字

這是一個單一插件的腳本。若是你的腳本中包含多個插件，或者互逆的插件（例如： $.fn.doSomething() 和$.fn.undoSomething()），那麼你須要聲明多個函數名字。可是，一般當咱們編寫一個插件時，力求僅使用一個名字來包含它的全部內容。咱們的示例插件命名爲「highlight「    

 

Java代碼 

1. $.fn.hilight = function() {    
2.   // Our plugin implementation code goes here.    
3. };    
4. 咱們的插件經過這樣被調用：  
5. $('#myDiv').hilight();     

 

可是若是咱們須要分解咱們的實現代碼爲多個函數該怎麼辦？有不少緣由：設計上的須要；這樣作更容易或更易讀的實現；並且這樣更符合面向對象。 這真是一個麻煩事，把功能實現分解成多個函數而不增長多餘的命名空間。出於認識到和利用函數是javascript中最基本的類對象，咱們能夠這樣作。就像其餘對象同樣，函數能夠被指定爲屬性。所以咱們已經聲明「hilight」爲jQuery的屬性對象，任何其餘的屬性或者函數咱們須要暴露出來的，均可以在"hilight" 函數中被聲明屬性。稍後繼續。
2.2 接受options參數以控制插件的行爲

讓咱們爲咱們的插件添加功能指定前景色和背景色的功能。咱們也許會讓選項像一個options對象傳遞給插件函數。例如：   

Java代碼 

1. // plugin definition    
2. $.fn.hilight = function(options) {    
3.   var defaults = {    
4.     foreground: 'red',    
5.     background: 'yellow'    
6.   };    
7.   // Extend our default options with those provided.    
8.   var opts = $.extend(defaults, options);    
9.   // Our plugin implementation code goes here.    
10. };    
11. 咱們的插件能夠這樣被調用：  
12. $('#myDiv').hilight({    
13.   foreground: 'blue'    
14. });