jQuery插件開發精品教程讓你的jQuery提升一個臺階

2019-11-20 10:40:54

字體：大中小

來源：轉載

供稿：網友

要說jQuery 最成功的地方，我認為是它的可擴展性吸引了眾多開發者為其開發插件，從而建立起了一個生態系統。這好比大公司們爭相做平臺一樣，得平臺者得天下。蘋果，微軟，谷歌等巨頭，都有各自的平臺及生態圈。

學會使用jQuery并不難，因為它簡單易學，并且相信你接觸jQuery后肯定也使用或熟悉了不少其插件。如果要將能力上升一個臺階，編寫一個屬于自己的插件是個不錯的選擇。

本教程可能不是最精品的，但一定是最細致的。

jQuery插件開發模式

軟件開發過程中是需要一定的設計模式來指導開發的，有了模式，我們就能更好地組織我們的代碼，并且從這些前人總結出來的模式中學到很多好的實踐。

根據《jQuery高級編程》的描述，jQuery插件開發方式主要有三種：

1.通過$.extend()來擴展jQuery
2.通過$.fn 向jQuery添加新的方法
3.通過$.widget()應用jQuery UI的部件工廠方式創建

通常我們使用第二種方法來進行簡單插件開發，說簡單是相對于第三種方式。第三種方式是用來開發更高級jQuery部件的，該模式開發出來的部件帶有很多jQuery內建的特性，比如插件的狀態信息自動保存，各種關于插件的常用方法等，非常貼心，這里不細說。

而第一種方式又太簡單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。所以我們調用通過$.extend()添加的函數時直接通過$符號調用（$.myfunction()）而不需要選中DOM元素($('#example').myfunction())。請看下面的例子。

$.extend({sayHello: function(name) {console.log('Hello,' + (name ? name : 'Dude') + '!');}})$.sayHello(); //調用$.sayHello('Wayou'); //帶參調用

運行結果：

上面代碼中，通過$.extend()向jQuery添加了一個sayHello函數，然后通過$直接調用。到此你可以認為我們已經完成了一個簡單的jQuery插件了。

但如你所見，這種方式用來定義一些輔助方法是比較方便的。比如一個自定義的console，輸出特定格式的信息，定義一次后可以通過jQuery在程序中任何需要的地方調用它。

$.extend({log: function(message) {var now = new Date(),y = now.getFullYear(),m = now.getMonth() + 1, //！JavaScript中月分是從0開始的d = now.getDate(),h = now.getHours(),min = now.getMinutes(),s = now.getSeconds(),time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;console.log(time + ' My App: ' + message);}})$.log('initializing...'); //調用

但這種方式無法利用jQuery強大的選擇器帶來的便利，要處理DOM元素以及將插件更好地運用于所選擇的元素身上，還是需要使用第二種開發方式。你所見到或使用的插件也大多是通過此種方式開發。

插件開發

下面我們就來看第二種方式的jQuery插件開發。

基本方法

先看一下它的基本格式：

$.fn.pluginName = function() {//your code goes here}

基本上就是往$.fn上面添加一個方法，名字是我們的插件名稱。然后我們的插件代碼在這個方法里面展開。

比如我們將頁面上所有鏈接顏色轉成紅色，則可以這樣寫這個插件：

$.fn.myPlugin = function() {//在這里面,this指的是用jQuery選中的元素//example :$('a'),則this=$('a')this.css('color', 'red');}

在插件名字定義的這個函數內部，this指代的是我們在調用該插件時，用jQuery選擇器選中的元素，一般是一個jQuery類型的集合。比如$('a')返回的是頁面上所有a標簽的集合，且這個集合已經是jQuery包裝類型了，也就是說，在對其進行操作的時候可以直接調用jQuery的其他方法而不需要再用美元符號來包裝一下。

所以在上面插件代碼中，我們在this身上調用jQuery的css()方法，也就相當于在調用 $('a').css()。

理解this在這個地方的含義很重要。這樣你才知道為什么可以直接商用jQuery方法同時在其他地方this指代不同時我們又需要用jQuery重新包裝才能調用，下面會講到。初學容易被this的值整暈，但理解了就不難。

現在就可以去頁面試試我們的代碼了，在頁面上放幾個鏈接，調用插件后鏈接字體變成紅色。

<ul><li><a >我的微博</a></li><li><a href="http://http://www.cnblogs.com/Wayou/">我的博客</a></li><li><a >我的小站</a></li></ul><p>這是p標簽不是a標簽，我不會受影響</p><script src="jquery-1.11.0.min.js"></script><script src="jquery.myplugin.js"></script><script type="text/javascript">$(function(){$('a').myPlugin();})</script>

運行結果：

下面進一步，在插件代碼里處理每個具體的元素，而不是對一個集合進行處理，這樣我們就可以針對每個元素進行相應操作。

我們已經知道this指代jQuery選擇器返回的集合，那么通過調用jQuery的.each()方法就可以處理合集中的每個元素了，但此刻要注意的是，在each方法內部，this指帶的是普通的DOM元素了，如果需要調用jQuery的方法那就需要用$來重新包裝一下。

比如現在我們要在每個鏈接顯示鏈接的真實地址，首先通過each遍歷所有a標簽，然后獲取href屬性的值再加到鏈接文本后面。

更改后我們的插件代碼為：

$.fn.myPlugin = function() {//在這里面,this指的是用jQuery選中的元素this.css('color', 'red');this.each(function() {//對每個元素進行操作$(this).append(' ' + $(this).attr('href'));}))}

調用代碼還是一樣的，我們通過選中頁面所有的a標簽來調用這個插件

運行結果：

到此，你已經可以編寫功能簡單的jQuery插件了。是不是也沒那么難。

下面開始jQuery插件編寫中一個重要的部分，參數的接收。

支持鏈式調用

我們都知道jQuery一個時常優雅的特性是支持鏈式調用，選擇好DOM元素后可以不斷地調用其他方法。

要讓插件不打破這種鏈式調用，只需return一下即可。

$.fn.myPlugin = function() {//在這里面,this指的是用jQuery選中的元素this.css('color', 'red');return this.each(function() {//對每個元素進行操作$(this).append(' ' + $(this).attr('href'));}))}

讓插件接收參數

一個強勁的插件是可以讓使用者隨意定制的，這要求我們提供在編寫插件時就要考慮得全面些，盡量提供合適的參數。

比如現在我們不想讓鏈接只變成紅色，我們讓插件的使用者自己定義顯示什么顏色，要做到這一點很方便，只需要使用者在調用的時候傳入一個參數即可。同時我們在插件的代碼里面接收。另一方面，為了靈活，使用者可以不傳遞參數，插件里面會給出參數的默認值。

在處理插件參數的接收上，通常使用jQuery的extend方法，上面也提到過，但那是給extend方法傳遞單個對象的情況下，這個對象會合并到jQuery身上，所以我們就可以在jQuery身上調用新合并對象里包含的方法了，像上面的例子。當給extend方法傳遞一個以上的參數時，它會將所有參數對象合并到第一個里。同時，如果對象中有同名屬性時，合并的時候后面的會覆蓋前面的。

利用這一點，我們可以在插件里定義一個保存插件參數默認值的對象，同時將接收來的參數對象合并到默認對象上，最后就實現了用戶指定了值的參數使用指定的值，未指定的參數使用插件默認值。

為了演示方便，再指定一個參數fontSize，允許調用插件的時候設置字體大小。

$.fn.myPlugin = function(options) {var defaults = {'color': 'red','fontSize': '12px'};var settings = $.extend(defaults, options);return this.css({'color': settings.color,'fontSize': settings.fontSize});}

現在，我們調用的時候指定顏色，字體大小未指定，會運用插件里的默認值12px。

$('a').myPlugin({'color': '#2C9929'});

運行結果：

同時指定顏色與字體大小：

$('a').myPlugin({'color': '#2C9929','fontSize': '20px'});

保護好默認參數

注意到上面代碼調用extend時會將defaults的值改變，這樣不好，因為它作為插件因有的一些東西應該維持原樣，另外就是如果你在后續代碼中還要使用這些默認值的話，當你再次訪問它時它已經被用戶傳進來的參數更改了。

一個好的做法是將一個新的空對象做為$.extend的第一個參數，defaults和用戶傳遞的參數對象緊隨其后，這樣做的好處是所有值被合并到這個空對象上，保護了插件里面的默認值。

$.fn.myPlugin = function(options) {var defaults = {'color': 'red','fontSize': '12px'};var settings = $.extend({},defaults, options);//將一個空對象做為第一個參數return this.css({'color': settings.color,'fontSize': settings.fontSize});}

到此，插件可以接收和處理參數后，就可以編寫出更健壯而靈活的插件了。若要編寫一個復雜的插件，代碼量會很大，如何組織代碼就成了一個需要面臨的問題，沒有一個好的方式來組織這些代碼，整體感覺會雜亂無章，同時也不好維護，所以將插件的所有方法屬性包裝到一個對象上，用面向對象的思維來進行開發，無疑會使工作輕松很多。

面向對象的插件開發

為什么要有面向對象的思維，因為如果不這樣，你可能需要一個方法的時候就去定義一個function，當需要另外一個方法的時候，再去隨便定義一個function，同樣，需要一個變量的時候，毫無規則地定義一些散落在代碼各處的變量。

還是老問題，不方便維護，也不夠清晰。當然，這些問題在代碼規模較小時是體現不出來的。

如果將需要的重要變量定義到對象的屬性上，函數變成對象的方法，當我們需要的時候通過對象來獲取，一來方便管理，二來不會影響外部命名空間，因為所有這些變量名還有方法名都是在對象內部。

接著上面的例子，我們可以把這個插件抽象成一個美化頁面的對象，因為他的功能是設置顏色啊字體啊什么的，當然我們還可以加入其他功能比如設置下劃線啊什么的。當然對于這個例子抽象成對象有點小題大做，這里僅作演示用。以后我可能會介紹我編寫的一個jQuery插件SlipHover,其中代碼就比較多，這樣的模式就用得上了。

所以我們新建一個對象命名為Beautifier，然后我們在插件里使用這個對象來編碼。

//定義Beautifier的構造函數var Beautifier = function(ele, opt) {this.$element = ele,this.defaults = {'color': 'red','fontSize': '12px','textDecoration':'none'},this.options = $.extend({}, this.defaults, opt)}//定義Beautifier的方法Beautifier.prototype = {beautify: function() {return this.$element.css({'color': this.options.color,'fontSize': this.options.fontSize,'textDecoration': this.options.textDecoration});}}//在插件中使用Beautifier對象$.fn.myPlugin = function(options) {//創建Beautifier的實體var beautifier = new Beautifier(this, options);//調用其方法return beautifier.beautify();}

通過上面這樣一改造，我們的代碼變得更面向對象了，也更好維護和理解，以后要加新功能新方法，只需向對象添加新變量及方法即可，然后在插件里實例化后即可調用新添加的東西。

插件的調用還是一樣的，我們對代碼的改動并不影響插件其他地方，只是將代碼的組織結構改動了而以。

$(function() {$('a').myPlugin({'color': '#2C9929','fontSize': '20px'});})

指定文字帶下劃線（我們在Beautifier對象中新加的功能，默認不帶下劃線，如上面的例子）的調用：

$(function() {$('a').myPlugin({'color': '#2C9929','fontSize': '20px','textDecoration': 'underline'});})

到這里，你可以更好地編寫復雜的插件同時很好地組織代碼了。當我們回頭去看上面的代碼時，其實也還是有改進空間的。也就是下面介紹的關于命名空間及變量各什么的，一些雜項。

關于命名空間

不僅僅是jQuery插件的開發，我們在寫任何JS代碼時都應該注意的一點是不要污染全局命名空間。因為隨著你代碼的增多，如果有意無意在全局范圍內定義一些變量的話，最后很難維護，也容易跟別人寫的代碼有沖突。

比如你在代碼中向全局window對象添加了一個變量status用于存放狀態，同時頁面中引用了另一個別人寫的庫，也向全局添加了這樣一個同名變量，最后的結果肯定不是你想要的。所以不到萬不得已，一般我們不會將變量定義成全局的。

一個好的做法是始終用自調用匿名函數包裹你的代碼，這樣就可以完全放心，安全地將它用于任何地方了，絕對沒有沖突。

用自調用匿名函數包裹你的代碼

我們知道JavaScript中無法用花括號方便地創建作用域，但函數卻可以形成一個作用域，域內的代碼是無法被外界訪問的。如果我們將自己的代碼放入一個函數中，那么就不會污染全局命名空間，同時不會和別的代碼沖突。

如上面我們定義了一個Beautifier全局變量，它會被附到全局的window對象上，為了防止這種事情發生，你或許會說，把所有代碼放到jQuery的插件定義代碼里面去啊，也就是放到$.fn.myPlugin里面。這樣做倒也是種選擇。但會讓我們實際跟插件定義有關的代碼變得臃腫，而在$.fn.myPlugin里面我們其實應該更專注于插件的調用，以及如何與jQuery互動。

所以保持原來的代碼不變，我們將所有代碼用自調用匿名函數包裹。

(function() {//定義Beautifier的構造函數var Beautifier = function(ele, opt) {this.$element = ele,this.defaults = {'color': 'red','fontSize': '12px','textDecoration': 'none'},this.options = $.extend({}, this.defaults, opt)}//定義Beautifier的方法Beautifier.prototype = {beautify: function() {return this.$element.css({'color': this.options.color,'fontSize': this.options.fontSize,'textDecoration': this.options.textDecoration});}}//在插件中使用Beautifier對象$.fn.myPlugin = function(options) {//創建Beautifier的實體var beautifier = new Beautifier(this, options);//調用其方法return beautifier.beautify();}})();

這樣做的好處，也就是上面所闡述的那樣。另外還有一個好處就是，自調用匿名函數里面的代碼會在第一時間執行，頁面準備好過后，上面的代碼就將插件準備好了，以方便在后面的代碼中使用插件。

目前為止似乎接近完美了。如果再考慮到其他一些因素，比如我們將這段代碼放到頁面后，前面別人寫的代碼沒有用分號結尾，或者前面的代碼將window, undefined等這些系統變量或者關鍵字修改掉了，正好我們又在自己的代碼里面進行了使用，那結果也是不可預測的，這不是我們想要的。我知道其實你還沒太明白，下面詳細介紹。

將系統變量以變量形式傳遞到插件內部

來看下面的代碼，你猜他會出現什么結果？

var foo=function(){//別人的代碼}//注意這里沒有用分號結尾//開始我們的代碼。。。(function(){//我們的代碼。。alert('Hello!');})();

本來別人的代碼也正常工作，只是最后定義的那個函數沒有用分號結尾而以，然后當頁面中引入我們的插件時，報錯了，我們的代碼無法正常執行。

原因是我們用來充當自調用匿名函數的第一對括號與上面別人定義的函數相連，因為中間沒有分號嘛，總之我們的代碼無法正常解析了，所以報錯。

所以好的做法是我們在代碼開頭加一個分號，這在任何時候都是一個好的習慣。

var foo=function(){//別人的代碼}//注意這里沒有用分號結尾//開始我們的代碼。。。;(function(){//我們的代碼。。alert('Hello!');})();

同時，將系統變量以參數形式傳遞到插件內部也是個不錯的實踐。

當我們這樣做之后，window等系統變量在插件內部就有了一個局部的引用，可以提高訪問速度，會有些許性能的提升

最后我們得到一個非常安全結構良好的代碼：

;(function($,window,document,undefined){//我們的代碼。。//blah blah blah...})(jQuery,window,document);

而至于這個undefined，稍微有意思一點，為了得到沒有被修改的undefined，我們并沒有傳遞這個參數，但卻在接收時接收了它，因為實際并沒有傳，所以‘undefined'那個位置接收到的就是真實的'undefined'了。是不是有點hack的味道，值得細細體會的技術，當然不是我發明的，都是從前人的經驗中學習。

所以最后我們的插件成了這樣：

;(function($, window, document,undefined) {//定義Beautifier的構造函數var Beautifier = function(ele, opt) {this.$element = ele,this.defaults = {'color': 'red','fontSize': '12px','textDecoration': 'none'},this.options = $.extend({}, this.defaults, opt)}//定義Beautifier的方法Beautifier.prototype = {beautify: function() {return this.$element.css({'color': this.options.color,'fontSize': this.options.fontSize,'textDecoration': this.options.textDecoration});}}//在插件中使用Beautifier對象$.fn.myPlugin = function(options) {//創建Beautifier的實體var beautifier = new Beautifier(this, options);//調用其方法return beautifier.beautify();}})(jQuery, window, document);

一個安全，結構良好，組織有序的插件編寫完成。

關于變量定義及命名

現在談談關于變量及方法等的命名，沒有硬性規定，但為了規范，遵循一些約定還是很有必要的。

變量定義：好的做法是把將要使用的變量名用一個var關鍵字一并定義在代碼開頭，變量名間用逗號隔開。原因有二：
•一是便于理解，知道下面的代碼會用到哪些變量，同時代碼顯得整潔且有規律，也方便管理，變量定義與邏輯代碼分開；
•二是因為JavaScript中所有變量及函數名會自動提升，也稱之為JavaScript的Hoist特性，即使你將變量的定義穿插在邏輯代碼中，在代碼解析運行期間，這些變量的聲明還是被提升到了當前作用域最頂端的，所以我們將變量定義在一個作用域的開頭是更符合邏輯的一種做法。當然，再次說明這只是一種約定，不是必需的。

變量及函數命名一般使用駝峰命名法（CamelCase），即首個單詞的首字母小寫，后面單詞首字母大寫，比如resultArray，requestAnimationFrame。對于常量，所有字母采用大寫，多個單詞用下劃線隔開，比如WIDTH=100，BRUSH_COLOR='#00ff00'。當變量是jQuery類型時，建議以$開頭，開始會不習慣，但經常用了之后會感覺很方便，因為可以很方便地將它與普通變量區別開來，一看到以$開頭我們就知道它是jQuery類型可以直接在其身上調用jQuery相關的方法，比如var $element=$('a'); 之后就可以在后面的代碼中很方便地使用它，并且與其他變量容易區分開來。

引號的使用：既然都扯了這些與插件主題無關的了，這里再多說一句，一般HTML代碼里面使用雙引號，而在JavaScript中多用單引號，比如下面代碼所示：

var name = 'Wayou';document.getElementById(‘example').innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持雙引號，JavaScript中保持單引號

一方面，HTML代碼中本來就使用的是雙引號，另一方面，在JavaScript中引號中還需要引號的時候，要求我們單雙引號間隔著寫才是合法的語句，除非你使用轉意符那也是可以的。再者，堅持這樣的統一可以保持代碼風格的一致，不會出現這里字符串用雙引號包著，另外的地方就在用單引號。

代碼混淆與壓縮

進行完上面的步驟，已經小有所成了?；蛟S你很早就注意到了，你下載的插件里面，一般都會提供一個壓縮的版本一般在文件名里帶個'min'字樣。也就是minified的意思，壓縮濃縮后的版本。并且平時我們使用的jQuery也是官網提供的壓縮版本，jquery.min.js。

這里的壓縮不是指代碼進行功能上的壓縮，而是通過將代碼里面的變量名，方法函數名等等用更短的名稱來替換，并且刪除注釋（如果有的話）刪除代碼間的空白及換行所得到的濃縮版本。同時由于代碼里面的各種名稱都已經被替代，別人無法閱讀和分清其邏輯，也起到了混淆代碼的作用。

壓縮的好處

•源碼經過混淆壓縮后，體積大大減小，使代碼變得輕量級，同時加快了下載速度，兩面加載變快。比如正常jQuery v1.11.0的源碼是276kb，而壓縮后的版本僅94.1kb！體積減小一半還多。這個體積的減小對于文件下載速度的提升不可小覷。
•經過壓縮混淆后，代碼還能閱讀嘛？當然不能，所以順帶還起到了代碼保護的作用。當然只是針對你編寫了一些比較酷的代碼又不想別人抄襲的情況。對于jQuery社區，這里本身就是開源的世界，同時JavaScript這東西其實也沒什么實質性方法可以防止別人查看閱讀你的代碼，畢竟有混淆就有反混淆工具，這里代碼壓縮更多的還是上面提到的壓縮文件的作用，同時一定程度上防止別人抄襲。

工具

所使用的工具推崇的是Google開發的Closure Compiler。該工具需要Java環境的支持，所以使用前你可能需要先在機子上裝JRE, 然后再獲取Closure進行使用。

同時也有很朋在線的代碼混淆壓縮工具，用起來也很方便。這些工具都是一搜一大把的。

插件發布

這一步不是必需的，但本著把事情做完整的態度，同時你也許也希望有更多人看到或使用你的插件吧。

•首先你需要將插件代碼放到GitHub上創建一個Service Hook，這樣做的目的是你以后更新的插件后，jQuery可以自動去獲取新版本的信息然后展示在插件中心的頁面上。關于如何傳代碼到GitHub，你去下載GitHub 提供的客戶端工具，就會知道如何操作了，非常方便。關于在GitHub創建Service Hook，也只是點幾下而以的事情。下面會截圖介紹。
•然后需要制作一個JSON格式的清單文件，其中包括關于插件的基本信息，具體格式及參數可以在jQuery官網插件發布指南頁面了解到，這里提供一個示例文件，是我之前寫的一個jQuery插件SlipHover：

{"name": "sliphover","title": "SlipHover","description": "Apply direction aware 2D/3D hover effect to images","keywords": ["direction-aware","animation","effect","hover","image","overlay","gallery"],"version": "1.1.1","author": {"name": "Wayou","email": "liuwayong@gmail.com","url": "https://github.com/Wayou"},"maintainers": [{"name": "Wayou","email": "liuwayong@gmail.com","url": "https://github.com/Wayou"}],"licenses": [{"type": "MIT","url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt"}],"bugs": "https://github.com/Wayou/sliphover/issues","homepage": "http://wayou.github.io/SlipHover/","docs": "http://wayou.github.io/SlipHover/","demo":"http://wayou.github.io/SlipHover/","download": "https://github.com/Wayou/SlipHover/zipball/master","dependencies": {"jquery": ">=1.5"}}

•然后就可以在插件的根目錄執行現行git代碼來發布插件了。其中0.1.0是版本號，以后每次你的插件有新版本發布只需更新上面命令中的版本，創建新的tag，這樣jQuery插件中心就會自動獲取到新版本信息了