1. 插件種類?

插件其實就是對現有的方法（或者叫函數）做一個封裝，方便重用提高開發效率。?

?

jQeury主要有2種類型?

?

1）實例對象方法插件?

開發能讓所有的jquery實例對象都可以調用的方法。也就是說，只要通過$()工廠獲得的jquery實例對象，都可以調用我們開發的方法。95%的插件都是這種類型?

?

2）全局函數插件?

可以將獨立的函數添加到jQuery命名空間中了。那么調用的時候就可以使用 $.函數名稱() 或者jQuery.函數名稱（）來調用了。可以理解為靜態方法。?

?

2. 添加全局函數?

我們可以將jquery理解為類，$是這個類的別名。開發全局函數就是開發這個類的靜態方法。如:$.get() ,$.post()。添加新的全局函數，實際上就是擴展jQuery“類”本身，給jQuery命名空間上添磚加瓦. 加入新添加的全局函數的名稱是sayHello,功能是彈出一個hello的對話框.?

2.1增加一個全局函數

1 jQuery.sayHello=function(name){ 2 alert("你好,"+name); 3 } 4 調用: 5 $.sayHello('張三'); 6 或者 7 jQuery.sayHello("李四");

2.2增加多個全局函數?

使用jQuery提供的全局函數extend來一次加入多個函數?

1 jQuery.extend({ 2 sayHello:function(name){ 3 alert("你好"+name); 4 }, 5 sayBye:function(name){ 6 alert("再見"+name); 7 } 8 } 9 )

? 上面的代碼是往jquery命名空間中添加了兩個函數sayHello和syBye,調用同上?

?

2.3命名空間?

前面的方式有可能與jQuery命名空間中的其它函數產生命名沖突的危險，也有可能與其它jQuery插件中定義的方法重名，所以我們可以考慮將我們定義的所有的函數封裝到一個對象中去，相當于為我們的函數給了一個命名空間 代碼如下:?

1 jQuery.wq={ 2 sayHello:function(name){ 3 alert("你好"+name); 4 }, 5 sayBye:function(name){ 6 alert("再見"+name); 7 } 8 }

這種寫法可以這樣來理解: 首先我們為jQuery添加了一個wq屬性，而這個屬性本 身是一個對象，后面我們使用JSON來定義了一個對象，這個對象有兩個方法。 所以調用就是如下形式: 調用:

1 $.wq.sayHello("王五"); 2 jQuery.wq.sayBye("趙六");

? 注意:即使頁面中包含了jQuery文件，也不應該認為簡寫形式”$”是始終有效的。 因為”$” 只是一個別名而已，其它的庫可以重新定義這個”$” .所以在定義插件的時候， 最好使用jQuery來調用方法，或者重新定義”$”?

?

3. 為jQuery實例對象創建新方法?

對所有的jQuery實例對象中的方法進行擴展。?

?

3.1一次定義一個方法

1 jQuery.fn.sayHello=function(){ 2 alert("你好!"); 3 } 4 調用: 5 $("div").sayHello();

3.2一次定義多個方法?

前面一次定義一個方法太少，我們能不能一次多定義一些方法？jQuery庫提供了 jQuery.fn.extend方法來一次定義多個方法?

1 jQuery.fn.extend({ 2 sayHello:function(){ 3 alert("Hello"); 4 }, 5 sayBye:function(){ 6 alert("Bye Bye"); 7 } 8 });

? 可以看到extend方法的參數實際上就是一個JSON格式的對象。 調用的時候可以如下調用: $(“div”).sayHello() 和 $(“div”).sayBye();?

?

4. 插件方法內部的this關鍵字說明?

上面的寫法相當于每一個jQuery實例都可以使用，這跟全局函數沒有什么區別。而我們定義的實例方法往往是需要在特定的環境中使用的。所以我們在編寫插件方法的時候，應該考慮對象方法的環境。“this”關鍵字在任何插件方法內部引用的都是當前的jQuery實例對象。所以可以在this上調用任何 jQuery方法。需要注意的是：我們使用的jQuery選擇符可能會選取多個元素，哪么“當前的jQuery實例”有可能是一個元素，多個元素或者零個元素。我們必須考慮到這種情況。 如果我們使用選擇器選中了多個元素，那就可以使用each()方法來迭代每個元素，在each方法內部，再使用this，這個this指的就是每個 HTML DOM 元素的引用。?

?

5. 方法連綴?

使用jQuery對象方法的時候，基本都能使用連綴的方式。那么我們使用插件的時候就必須為插件方法返回一個jQuery實例對象。?

01 jQuery.fn.extend({ 02 sayHello:function(){ 03 alert("Hello"); 04 return this; 05 }, 06 sayBye:function(){ 07 alert("Bye Bye"); 08 return this; 09 } 10 });

6. 為插件方法定義默認值?

通過使用jQuery.extend()方法，可以方便提供隨時可能被傳入的參數覆蓋的默認值，此時對方法的調用會大致保持相同. 注意:jQuery.extend方法在API中的兩個地方都有，一個在【核心】.【插件機制】中有，并且只有一個參數。一個在【工具】.【數組和對象操作】中。 注意這里我們使用的是后者,形式為: jQuery.extend(target, object1) 它的作用是將后面對象中所有的屬性和方法復制到前面對象中，即將object1中的屬性和方法復制到target對象中。 所以我們在定義一個插件的時候，可以使用如下方式為插件方法指定默認值：?

1 jQuery.fn.sayHello=function(properties){ 2 var defaults={ 3 name:"張三", 4 age:20 5 }; 6 jQuery.extend(defaults,properties); 7 alert("第一個參數:"+defaults.name+" 第二個參數"+defaults.age); 8 return this; 9 }

這樣一來，我們就可以這樣來調用了

01 $("div").sayHello({ 02 name:"李四", 03 age:30 04 }); 05 或者: 06 $("div").sayHello({ 07 name:"王五" 08 }); 09 或者: 10 $("div").sayHello({ 11 age:25 12 });

7. 插件開發技巧-閉包?

我們在開發插件的過程中，是將代碼寫在了一個js文件中，那么這個js文件中有可能會定義很多的方法或者一些變量。那么這些方法或者變量就有可能與別的 js文件中的變量或者方法沖突，那么如何將我們定義的js代碼“暴露”一部分，隱藏一部分呢？也就是你雖然定義了，但是在其它地方訪問不到，該暴露的暴 露，不該暴露的就藏起來，要達到這個目的，就得用到“閉包“ 那何為“閉包“？說簡單點就是允許使用內部函數，即在函數中定義另外一個函數，而且內部函數可以訪問在外部函數中聲明的變量和其它內部函數。比如有如下定 義:?

?//定義A函數?

1 function A(){ 2 //定義B函數 3 var B=function(){ 4 alert("這是B"); 5 } 6 return B; //將B函數返回 7 } 8 var c=A();//此時C就是B函數 9 c();//其實就是調用B函數

可以看到，內部函數B在包含它的A函數之外執行了，這就形成了閉包。也就是B在外部函數A返回之后被執行了，而當B執行的時候它仍然可以訪問A中定義的局部變量和其它內部函數。 利用閉包的特性，我們可以將我們需要暴露的方法暴露出來，比如B，又可以隱藏一些局部變量和函數，比如在A中定義變量和函數，A以外的其它函數是不能訪問的，但是B是可以訪問的。 其實上面的代碼就是先執行A函數，得到結果，這個結果又是一個函數，然后再執行B函數即 var c=A(); c(); 既然我們的目的是想讓B在A之外執行，那我們可以將代碼做如下變通:

1 var C; 2 function A(){ 3 var B=function(){ 4 alert("這是B函數"); 5 } 6 C=B;//將內部函數賦值給C 7 }

? //讓A函數執行，A執行之后就將B賦值給C了A();?

//現在執行C，實際上就是B的執行C();?

?//彈出對話框 "這是B函數" 去掉中間變量c將其改寫為 A()(); 這與上面的效果是一樣的。?

能不能讓A在定義之后馬上就執行呢？我們可以定義一個匿名函數 放到一對括號中,然后 再用一對小括號執行它即可:?

1 var C; 2 (function(){ 3 var B=function(){ 4 alert("這是B函數"); 5 } 6 C=B;//將內部函數賦值給C 7 })()

//現在執行C，實際上就是B的執行C(); //彈出對話框 "這是B函數" 能不能從外面傳個參數進去交給函數B呢？改寫代碼如下:

1 (function($){ 2 //這里就可以使用$符號了..... 3 //將B函數添加到JQuery的實例對象函數中 4 $.fn.B=function(){ 5 alert("這是B函數"); 6 } 7 })(jQuery);

這段代碼被瀏覽器加載就會被執行，jquery作為參數傳遞進去交給了 $符號，所以內部就能使用$符號了，在代碼中，我們使用$.fn為jQuery的實例對象添加了一個方法B，頁面 上使用:?

1 $(document).ready(function(){ 2 $("h1").B(); 3 });

執行結果 所以常見的jQuery插件都是以下這種形式: 好處就在于代碼內部定義的方法外部只有插件能夠訪問，這樣就將一些代碼隱藏起來了，該 暴露的插件方法暴露在外部了。

1 (function($){ 2 //插件代碼 3 })(jQuery)

?

總結

以上是生活随笔為你收集整理的jquery插件分类与编写详细讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。