1. 插件種類?

插件其實(shí)就是對現(xiàn)有的方法（或者叫函數(shù)）做一個封裝，方便重用提高開發(fā)效率。?

?

jQeury主要有2種類型?

?

1）實(shí)例對象方法插件?

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

?

2）全局函數(shù)插件?

可以將獨(dú)立的函數(shù)添加到j(luò)Query命名空間中了。那么調(diào)用的時候就可以使用 $.函數(shù)名稱() 或者jQuery.函數(shù)名稱（）來調(diào)用了。可以理解為靜態(tài)方法。?

?

2. 添加全局函數(shù)?

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

2.1增加一個全局函數(shù)

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

2.2增加多個全局函數(shù)?

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

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

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

?

2.3命名空間?

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

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

這種寫法可以這樣來理解: 首先我們?yōu)閖Query添加了一個wq屬性，而這個屬性本 身是一個對象，后面我們使用JSON來定義了一個對象，這個對象有兩個方法。 所以調(diào)用就是如下形式: 調(diào)用:

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

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

?

3. 為jQuery實(shí)例對象創(chuàng)建新方法?

對所有的jQuery實(shí)例對象中的方法進(jìn)行擴(kuò)展。?

?

3.1一次定義一個方法

1 jQuery.fn.sayHello=function(){ 2 alert("你好!"); 3 } 4 調(diào)用: 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方法的參數(shù)實(shí)際上就是一個JSON格式的對象。 調(diào)用的時候可以如下調(diào)用: $(“div”).sayHello() 和 $(“div”).sayBye();?

?

4. 插件方法內(nèi)部的this關(guān)鍵字說明?

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

?

5. 方法連綴?

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

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. 為插件方法定義默認(rèn)值?

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

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

這樣一來，我們就可以這樣來調(diào)用了

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. 插件開發(fā)技巧-閉包?

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

?//定義A函數(shù)?

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

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

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

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

//現(xiàn)在執(zhí)行C，實(shí)際上就是B的執(zhí)行C();?

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

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

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

//現(xiàn)在執(zhí)行C，實(shí)際上就是B的執(zhí)行C(); //彈出對話框 "這是B函數(shù)" 能不能從外面?zhèn)鱾€參數(shù)進(jìn)去交給函數(shù)B呢？改寫代碼如下:

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

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

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

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

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。