jquery插件分類與編寫詳細講解

時間 2020-05-28

標籤 jquery 插件分類編寫詳細講解欄目 JQuery 简体版

原文原文鏈接

當，小碼哥讀完這篇文章後，真心是受益頗多，其爲偶解惑了至今都令偶困惑的問題，，所以，借鑑而來，只爲了可以幫助更多的碼農們！jquery

1. 插件種類 數組

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

jQeury主要有2種類型 閉包

1）實例對象方法插件 ide

開發能讓全部的jquery實例對象均可以調用的方法。也就是說，只要經過$()工廠得到的jquery實例對象，均可以調用咱們開發的方法。95%的插件都是這種類型函數

2）全局函數插件 工具

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

2. 添加全局函數 this

咱們能夠將jquery理解爲類，$是這個類的別名。開發全局函數就是開發這個類的靜態方法。如:$.get() ,$.post()。添加新的全局函數，實際上就是擴展jQuery「類」自己，給jQuery命名空間上添磚加瓦. 加入新添加的全局函數的名稱是sayHello,功能是彈出一個hello的對話框. spa

2.1增長一個全局函數

jQuery.sayHello=function(name){

alert("你好,"+name);

}

調用:

$.sayHello('張三');

或者

jQuery.sayHello("李四");

2.2增長多個全局函數

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

jQuery.extend({

sayHello:function(name){

alert("你好"+name);

sayBye:function(name){

alert("再見"+name);

}

)

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

2.3命名空間

前面的方式有可能與jQuery命名空間中的其它函數產生命名衝突的危險，也有可能與其它jQuery插件中定義的方法重名，因此咱們能夠考慮將咱們定義的全部的函數封裝到一個對象中去，至關於爲咱們的函數給了一個命名空間代碼以下:

jQuery.wq={

sayHello:function(name){

alert("你好"+name);

sayBye:function(name){

alert("再見"+name);

}

這種寫法能夠這樣來理解: 首先咱們爲jQuery添加了一個wq屬性，而這個屬性本身是一個對象，後面咱們使用JSON來定義了一個對象，這個對象有兩個方法。因此調用就是以下形式: 調用:

$.wq.sayHello("王五");

jQuery.wq.sayBye("趙六");

注意:即便頁面中包含了jQuery文件，也不該該認爲簡寫形式」$」是始終有效的。由於」$」只是一個別名而已，其它的庫能夠從新定義這個」$」 .因此在定義插件的時候，最好使用jQuery來調用方法，或者從新定義」$」

3. 爲jQuery實例對象建立新方法

對全部的jQuery實例對象中的方法進行擴展。

3.1一次定義一個方法

jQuery.fn.sayHello=function(){

alert("你好!");

}

調用:

$("div").sayHello();

3.2一次定義多個方法

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

jQuery.fn.extend({

sayHello:function(){

alert("Hello");

sayBye:function(){

alert("Bye Bye");

}

});

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

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

上面的寫法至關於每個jQuery實例均可以使用，這跟全局函數沒有什麼區別。而咱們定義的實例方法每每是須要在特定的環境中使用的。因此咱們在編寫插件方法的時候，應該考慮對象方法的環境。「this」關鍵字在任何插件方法內部引用的都是當前的jQuery實例對象。因此能夠在this上調用任何jQuery方法。須要注意的是：咱們使用的jQuery選擇符可能會選取多個元素，哪麼「當前的jQuery實例」有多是一個元素，多個元素或者零個元素。咱們必須考慮到這種狀況。若是咱們使用選擇器選中了多個元素，那就可使用each()方法來迭代每一個元素，在each方法內部，再使用this，這個this指的就是每一個HTML DOM 元素的引用。

5. 方法連綴

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

jQuery.fn.extend({

sayHello:function(){

alert("Hello");

return this;

sayBye:function(){

alert("Bye Bye");

return this;

}

});

6. 爲插件方法定義默認值

經過使用jQuery.extend()方法，能夠方便提供隨時可能被傳入的參數覆蓋的默認值，此時對方法的調用會大體保持相同. 注意:jQuery.extend方法在API中的兩個地方都有，一個在【核心】.【插件機制】中有，而且只有一個參數。一個在【工具】.【數組和對象操做】中。注意這裏咱們使用的是後者,形式爲: jQuery.extend(target, object1) 它的做用是將後面對象中全部的屬性和方法複製到前面對象中，即將object1中的屬性和方法複製到target對象中。因此咱們在定義一個插件的時候，可使用以下方式爲插件方法指定默認值：

jQuery.fn.sayHello=function(properties){

var defaults={

name:"張三",

age:20

};

jQuery.extend(defaults,properties);

alert("第一個參數:"+defaults.name+" 第二個參數"+defaults.age);

return this;

}

這樣一來，咱們就能夠這樣來調用了

$("div").sayHello({

name:"李四",

age:30

});

或者:

$("div").sayHello({

name:"王五"

});

或者:

$("div").sayHello({

age:25

});

7. 插件開發技巧-閉包

咱們在開發插件的過程當中，是將代碼寫在了一個js文件中，那麼這個js文件中有可能會定義不少的方法或者一些變量。那麼這些方法或者變量就有可能與別的js文件中的變量或者方法衝突，那麼如何將咱們定義的js代碼「暴露」一部分，隱藏一部分呢？也就是你雖然定義了，可是在其它地方訪問不到，該暴露的暴露，不應暴露的就藏起來，要達到這個目的，就得用到「閉包「那何爲「閉包「？說簡單點就是容許使用內部函數，即在函數中定義另一個函數，並且內部函數能夠訪問在外部函數中聲明的變量和其它內部函數。好比有以下定義:

//定義A函數

function A(){

//定義B函數

var B=function(){

alert("這是B");

}

return B; //將B函數返回

}

var c=A();//此時C就是B函數

c();//其實就是調用B函數

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

var C;

function A(){

var B=function(){

alert("這是B函數");

}

C=B;//將內部函數賦值給C

}

//讓A函數執行，A執行以後就將B賦值給C了，A();

//如今執行C，實際上就是B的執行，C();

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

能不能讓A在定義以後立刻就執行呢？咱們能夠定義一個匿名函數放到一對括號中,而後再用一對小括號執行它便可:

var C;