教你开发jQuery插件（转）
教你開(kāi)發(fā)jQuery插件（轉(zhuǎn)）
閱讀目錄
- 基本方法
- 支持鏈?zhǔn)秸{(diào)用
- 讓插件接收參數(shù)
- 面向?qū)ο蟮牟寮_(kāi)發(fā)
- 關(guān)于命名空間
- 關(guān)于變量定義及命名
- 壓縮的好處
- 工具
- GitHub Service Hook
原文：http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
要說(shuō)jQuery 最成功的地方，我認(rèn)為是它的可擴(kuò)展性吸引了眾多開(kāi)發(fā)者為其開(kāi)發(fā)插件，從而建立起了一個(gè)生態(tài)系統(tǒng)。這好比大公司們爭(zhēng)相做平臺(tái)一樣，得平臺(tái)者得天下。蘋果，微軟，谷歌等巨頭，都有各自的平臺(tái)及生態(tài)圈。
學(xué)會(huì)使用jQuery并不難，因?yàn)樗?jiǎn)單易學(xué)，并且相信你接觸jQuery后肯定也使用或熟悉了不少其插件。如果要將能力上升一個(gè)臺(tái)階，編寫一個(gè)屬于自己的插件是個(gè)不錯(cuò)的選擇。
本教程可能不是最精品的，但一定是最細(xì)致的。
jQuery插件開(kāi)發(fā)模式
軟件開(kāi)發(fā)過(guò)程中是需要一定的設(shè)計(jì)模式來(lái)指導(dǎo)開(kāi)發(fā)的，有了模式，我們就能更好地組織我們的代碼，并且從這些前人總結(jié)出來(lái)的模式中學(xué)到很多好的實(shí)踐。
根據(jù)《jQuery高級(jí)編程》的描述，jQuery插件開(kāi)發(fā)方式主要有三種：
通常我們使用第二種方法來(lái)進(jìn)行簡(jiǎn)單插件開(kāi)發(fā)，說(shuō)簡(jiǎn)單是相對(duì)于第三種方式。第三種方式是用來(lái)開(kāi)發(fā)更高級(jí)jQuery部件的，該模式開(kāi)發(fā)出來(lái)的部件帶有很多jQuery內(nèi)建的特性，比如插件的狀態(tài)信息自動(dòng)保存，各種關(guān)于插件的常用方法等，非常貼心，這里不細(xì)說(shuō)。
而第一種方式又太簡(jiǎn)單，僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個(gè)靜態(tài)方法而以。所以我們調(diào)用通過(guò)$.extend()添加的函數(shù)時(shí)直接通過(guò)$符號(hào)調(diào)用（$.myfunction()）而不需要選中DOM元素($('#example').myfunction())。請(qǐng)看下面的例子。
$.extend({sayHello: function(name) {console.log('Hello,' + (name ? name : 'Dude') + '!');} }) $.sayHello(); //調(diào)用 $.sayHello('Wayou'); //帶參調(diào)用?
運(yùn)行結(jié)果：
上面代碼中，通過(guò)$.extend()向jQuery添加了一個(gè)sayHello函數(shù)，然后通過(guò)$直接調(diào)用。到此你可以認(rèn)為我們已經(jīng)完成了一個(gè)簡(jiǎn)單的jQuery插件了。
但如你所見(jiàn)，這種方式用來(lái)定義一些輔助方法是比較方便的。比如一個(gè)自定義的console，輸出特定格式的信息，定義一次后可以通過(guò)jQuery在程序中任何需要的地方調(diào)用它。
$.extend({log: function(message) {var now = new Date(),y = now.getFullYear(),m = now.getMonth() + 1, //！JavaScript中月分是從0開(kāi)始的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...'); //調(diào)用?
?
但這種方式無(wú)法利用jQuery強(qiáng)大的選擇器帶來(lái)的便利，要處理DOM元素以及將插件更好地運(yùn)用于所選擇的元素身上，還是需要使用第二種開(kāi)發(fā)方式。你所見(jiàn)到或使用的插件也大多是通過(guò)此種方式開(kāi)發(fā)。
插件開(kāi)發(fā)
下面我們就來(lái)看第二種方式的jQuery插件開(kāi)發(fā)。
回到頂部基本方法
先看一下它的基本格式：
$.fn.pluginName = function() {//your code goes here }?
基本上就是往$.fn上面添加一個(gè)方法，名字是我們的插件名稱。然后我們的插件代碼在這個(gè)方法里面展開(kāi)。
比如我們將頁(yè)面上所有鏈接顏色轉(zhuǎn)成紅色，則可以這樣寫這個(gè)插件：
$.fn.myPlugin = function() {//在這里面,this指的是用jQuery選中的元素//example :$('a'),則this=$('a')this.css('color', 'red'); }?
在插件名字定義的這個(gè)函數(shù)內(nèi)部，this指代的是我們?cè)谡{(diào)用該插件時(shí)，用jQuery選擇器選中的元素，一般是一個(gè)jQuery類型的集合。比如$('a')返回的是頁(yè)面上所有a標(biāo)簽的集合，且這個(gè)集合已經(jīng)是jQuery包裝類型了，也就是說(shuō)，在對(duì)其進(jìn)行操作的時(shí)候可以直接調(diào)用jQuery的其他方法而不需要再用美元符號(hào)來(lái)包裝一下。
所以在上面插件代碼中，我們?cè)趖his身上調(diào)用jQuery的css()方法，也就相當(dāng)于在調(diào)用 $('a').css()。
理解this在這個(gè)地方的含義很重要。這樣你才知道為什么可以直接商用jQuery方法同時(shí)在其他地方this指代不同時(shí)我們又需要用jQuery重新包裝才能調(diào)用，下面會(huì)講到。初學(xué)容易被this的值整暈，但理解了就不難。
現(xiàn)在就可以去頁(yè)面試試我們的代碼了，在頁(yè)面上放幾個(gè)鏈接，調(diào)用插件后鏈接字體變成紅色。
<ul><li><a href="http://www.webo.com/liuwayong">我的微博</a></li><li><a href="http://http://www.cnblogs.com/Wayou/">我的博客</a></li><li><a href="http://wayouliu.duapp.com/">我的小站</a></li> </ul> <p>這是p標(biāo)簽不是a標(biāo)簽，我不會(huì)受影響</p> <script src="jquery-1.11.0.min.js"></script> <script src="jquery.myplugin.js"></script> <script type="text/javascript">$(function(){$('a').myPlugin();}) </script>?
?
運(yùn)行結(jié)果：
下面進(jìn)一步，在插件代碼里處理每個(gè)具體的元素，而不是對(duì)一個(gè)集合進(jìn)行處理，這樣我們就可以針對(duì)每個(gè)元素進(jìn)行相應(yīng)操作。
我們已經(jīng)知道this指代jQuery選擇器返回的集合，那么通過(guò)調(diào)用jQuery的.each()方法就可以處理合集中的每個(gè)元素了，但此刻要注意的是，在each方法內(nèi)部，this指帶的是普通的DOM元素了，如果需要調(diào)用jQuery的方法那就需要用$來(lái)重新包裝一下。
比如現(xiàn)在我們要在每個(gè)鏈接顯示鏈接的真實(shí)地址，首先通過(guò)each遍歷所有a標(biāo)簽，然后獲取href屬性的值再加到鏈接文本后面。
更改后我們的插件代碼為：
$.fn.myPlugin = function() {//在這里面,this指的是用jQuery選中的元素this.css('color', 'red');this.each(function() {//對(duì)每個(gè)元素進(jìn)行操作$(this).append(' ' + $(this).attr('href'));})) }?
調(diào)用代碼還是一樣的，我們通過(guò)選中頁(yè)面所有的a標(biāo)簽來(lái)調(diào)用這個(gè)插件
運(yùn)行結(jié)果：
到此，你已經(jīng)可以編寫功能簡(jiǎn)單的jQuery插件了。是不是也沒(méi)那么難。
下面開(kāi)始jQuery插件編寫中一個(gè)重要的部分，參數(shù)的接收。
回到頂部支持鏈?zhǔn)秸{(diào)用
我們都知道jQuery一個(gè)時(shí)常優(yōu)雅的特性是支持鏈?zhǔn)秸{(diào)用，選擇好DOM元素后可以不斷地調(diào)用其他方法。
要讓插件不打破這種鏈?zhǔn)秸{(diào)用，只需return一下即可。
$.fn.myPlugin = function() {//在這里面,this指的是用jQuery選中的元素this.css('color', 'red');return this.each(function() {//對(duì)每個(gè)元素進(jìn)行操作$(this).append(' ' + $(this).attr('href'));})) }?
?
回到頂部讓插件接收參數(shù)
一個(gè)強(qiáng)勁的插件是可以讓使用者隨意定制的，這要求我們提供在編寫插件時(shí)就要考慮得全面些，盡量提供合適的參數(shù)。
比如現(xiàn)在我們不想讓鏈接只變成紅色，我們讓插件的使用者自己定義顯示什么顏色，要做到這一點(diǎn)很方便，只需要使用者在調(diào)用的時(shí)候傳入一個(gè)參數(shù)即可。同時(shí)我們?cè)诓寮拇a里面接收。另一方面，為了靈活，使用者可以不傳遞參數(shù)，插件里面會(huì)給出參數(shù)的默認(rèn)值。
在處理插件參數(shù)的接收上，通常使用jQuery的extend方法，上面也提到過(guò)，但那是給extend方法傳遞單個(gè)對(duì)象的情況下，這個(gè)對(duì)象會(huì)合并到j(luò)Query身上，所以我們就可以在jQuery身上調(diào)用新合并對(duì)象里包含的方法了，像上面的例子。當(dāng)給extend方法傳遞一個(gè)以上的參數(shù)時(shí)，它會(huì)將所有參數(shù)對(duì)象合并到第一個(gè)里。同時(shí)，如果對(duì)象中有同名屬性時(shí)，合并的時(shí)候后面的會(huì)覆蓋前面的。
利用這一點(diǎn)，我們可以在插件里定義一個(gè)保存插件參數(shù)默認(rèn)值的對(duì)象，同時(shí)將接收來(lái)的參數(shù)對(duì)象合并到默認(rèn)對(duì)象上，最后就實(shí)現(xiàn)了用戶指定了值的參數(shù)使用指定的值，未指定的參數(shù)使用插件默認(rèn)值。
為了演示方便，再指定一個(gè)參數(shù)fontSize，允許調(diào)用插件的時(shí)候設(shè)置字體大小。
$.fn.myPlugin = function(options) {var defaults = {'color': 'red','fontSize': '12px'};var settings = $.extend(defaults, options);return this.css({'color': settings.color,'fontSize': settings.fontSize}); }?
現(xiàn)在，我們調(diào)用的時(shí)候指定顏色，字體大小未指定，會(huì)運(yùn)用插件里的默認(rèn)值12px。
$('a').myPlugin({'color': '#2C9929' });?
運(yùn)行結(jié)果：
同時(shí)指定顏色與字體大小：
$('a').myPlugin({'color': '#2C9929','fontSize': '20px' });?
保護(hù)好默認(rèn)參數(shù)
注意到上面代碼調(diào)用extend時(shí)會(huì)將defaults的值改變，這樣不好，因?yàn)樗鳛椴寮蛴械囊恍〇|西應(yīng)該維持原樣，另外就是如果你在后續(xù)代碼中還要使用這些默認(rèn)值的話，當(dāng)你再次訪問(wèn)它時(shí)它已經(jīng)被用戶傳進(jìn)來(lái)的參數(shù)更改了。
一個(gè)好的做法是將一個(gè)新的空對(duì)象做為$.extend的第一個(gè)參數(shù)，defaults和用戶傳遞的參數(shù)對(duì)象緊隨其后，這樣做的好處是所有值被合并到這個(gè)空對(duì)象上，保護(hù)了插件里面的默認(rèn)值。
$.fn.myPlugin = function(options) {var defaults = {'color': 'red','fontSize': '12px'};var settings = $.extend({},defaults, options);//將一個(gè)空對(duì)象做為第一個(gè)參數(shù)return this.css({'color': settings.color,'fontSize': settings.fontSize}); }?
到此，插件可以接收和處理參數(shù)后，就可以編寫出更健壯而靈活的插件了。若要編寫一個(gè)復(fù)雜的插件，代碼量會(huì)很大，如何組織代碼就成了一個(gè)需要面臨的問(wèn)題，沒(méi)有一個(gè)好的方式來(lái)組織這些代碼，整體感覺(jué)會(huì)雜亂無(wú)章，同時(shí)也不好維護(hù)，所以將插件的所有方法屬性包裝到一個(gè)對(duì)象上，用面向?qū)ο蟮乃季S來(lái)進(jìn)行開(kāi)發(fā)，無(wú)疑會(huì)使工作輕松很多。
回到頂部面向?qū)ο蟮牟寮_(kāi)發(fā)
為什么要有面向?qū)ο蟮乃季S，因?yàn)槿绻贿@樣，你可能需要一個(gè)方法的時(shí)候就去定義一個(gè)function，當(dāng)需要另外一個(gè)方法的時(shí)候，再去隨便定義一個(gè)function，同樣，需要一個(gè)變量的時(shí)候，毫無(wú)規(guī)則地定義一些散落在代碼各處的變量。
還是老問(wèn)題，不方便維護(hù)，也不夠清晰。當(dāng)然，這些問(wèn)題在代碼規(guī)模較小時(shí)是體現(xiàn)不出來(lái)的。
如果將需要的重要變量定義到對(duì)象的屬性上，函數(shù)變成對(duì)象的方法，當(dāng)我們需要的時(shí)候通過(guò)對(duì)象來(lái)獲取，一來(lái)方便管理，二來(lái)不會(huì)影響外部命名空間，因?yàn)樗羞@些變量名還有方法名都是在對(duì)象內(nèi)部。
接著上面的例子，我們可以把這個(gè)插件抽象成一個(gè)美化頁(yè)面的對(duì)象，因?yàn)樗墓δ苁窃O(shè)置顏色啊字體啊什么的，當(dāng)然我們還可以加入其他功能比如設(shè)置下劃線啊什么的。當(dāng)然對(duì)于這個(gè)例子抽象成對(duì)象有點(diǎn)小題大做，這里僅作演示用。以后我可能會(huì)介紹我編寫的一個(gè)jQuery插件SlipHover,其中代碼就比較多，這樣的模式就用得上了。
所以我們新建一個(gè)對(duì)象命名為Beautifier，然后我們?cè)诓寮锸褂眠@個(gè)對(duì)象來(lái)編碼。
//定義Beautifier的構(gòu)造函數(shù) 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對(duì)象 $.fn.myPlugin = function(options) {//創(chuàng)建Beautifier的實(shí)體var beautifier = new Beautifier(this, options);//調(diào)用其方法return beautifier.beautify(); }?
通過(guò)上面這樣一改造，我們的代碼變得更面向?qū)ο罅?#xff0c;也更好維護(hù)和理解，以后要加新功能新方法，只需向?qū)ο筇砑有伦兞考胺椒纯?#xff0c;然后在插件里實(shí)例化后即可調(diào)用新添加的東西。
插件的調(diào)用還是一樣的，我們對(duì)代碼的改動(dòng)并不影響插件其他地方，只是將代碼的組織結(jié)構(gòu)改動(dòng)了而以。
?
$(function() {$('a').myPlugin({'color': '#2C9929','fontSize': '20px'}); })?
?
指定文字帶下劃線（我們?cè)贐eautifier對(duì)象中新加的功能，默認(rèn)不帶下劃線，如上面的例子）的調(diào)用：
$(function() {$('a').myPlugin({'color': '#2C9929','fontSize': '20px','textDecoration': 'underline'}); })?
到這里，你可以更好地編寫復(fù)雜的插件同時(shí)很好地組織代碼了。當(dāng)我們回頭去看上面的代碼時(shí)，其實(shí)也還是有改進(jìn)空間的。也就是下面介紹的關(guān)于命名空間及變量各什么的，一些雜項(xiàng)。
回到頂部關(guān)于命名空間
不僅僅是jQuery插件的開(kāi)發(fā)，我們?cè)趯懭魏蜫S代碼時(shí)都應(yīng)該注意的一點(diǎn)是不要污染全局命名空間。因?yàn)殡S著你代碼的增多，如果有意無(wú)意在全局范圍內(nèi)定義一些變量的話，最后很難維護(hù)，也容易跟別人寫的代碼有沖突。
比如你在代碼中向全局window對(duì)象添加了一個(gè)變量status用于存放狀態(tài)，同時(shí)頁(yè)面中引用了另一個(gè)別人寫的庫(kù)，也向全局添加了這樣一個(gè)同名變量，最后的結(jié)果肯定不是你想要的。所以不到萬(wàn)不得已，一般我們不會(huì)將變量定義成全局的。
一個(gè)好的做法是始終用自調(diào)用匿名函數(shù)包裹你的代碼，這樣就可以完全放心，安全地將它用于任何地方了，絕對(duì)沒(méi)有沖突。
用自調(diào)用匿名函數(shù)包裹你的代碼
我們知道JavaScript中無(wú)法用花括號(hào)方便地創(chuàng)建作用域，但函數(shù)卻可以形成一個(gè)作用域，域內(nèi)的代碼是無(wú)法被外界訪問(wèn)的。如果我們將自己的代碼放入一個(gè)函數(shù)中，那么就不會(huì)污染全局命名空間，同時(shí)不會(huì)和別的代碼沖突。
如上面我們定義了一個(gè)Beautifier全局變量，它會(huì)被附到全局的window對(duì)象上，為了防止這種事情發(fā)生，你或許會(huì)說(shuō)，把所有代碼放到j(luò)Query的插件定義代碼里面去啊，也就是放到$.fn.myPlugin里面。這樣做倒也是種選擇。但會(huì)讓我們實(shí)際跟插件定義有關(guān)的代碼變得臃腫，而在$.fn.myPlugin里面我們其實(shí)應(yīng)該更專注于插件的調(diào)用，以及如何與jQuery互動(dòng)。
所以保持原來(lái)的代碼不變，我們將所有代碼用自調(diào)用匿名函數(shù)包裹。
(function() {//定義Beautifier的構(gòu)造函數(shù)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對(duì)象$.fn.myPlugin = function(options) {//創(chuàng)建Beautifier的實(shí)體var beautifier = new Beautifier(this, options);//調(diào)用其方法return beautifier.beautify();} })();?
這樣做的好處，也就是上面所闡述的那樣。另外還有一個(gè)好處就是，自調(diào)用匿名函數(shù)里面的代碼會(huì)在第一時(shí)間執(zhí)行，頁(yè)面準(zhǔn)備好過(guò)后，上面的代碼就將插件準(zhǔn)備好了，以方便在后面的代碼中使用插件。
目前為止似乎接近完美了。如果再考慮到其他一些因素，比如我們將這段代碼放到頁(yè)面后，前面別人寫的代碼沒(méi)有用分號(hào)結(jié)尾，或者前面的代碼將window, undefined等這些系統(tǒng)變量或者關(guān)鍵字修改掉了，正好我們又在自己的代碼里面進(jìn)行了使用，那結(jié)果也是不可預(yù)測(cè)的，這不是 我們想要的。我知道其實(shí)你還沒(méi)太明白，下面詳細(xì)介紹。
將系統(tǒng)變量以變量形式傳遞到插件內(nèi)部
來(lái)看下面的代碼，你猜他會(huì)出現(xiàn)什么結(jié)果？
var foo=function(){//別人的代碼 }//注意這里沒(méi)有用分號(hào)結(jié)尾//開(kāi)始我們的代碼。。。 (function(){//我們的代碼。。alert('Hello!'); })();?
本來(lái)別人的代碼也正常工作，只是最后定義的那個(gè)函數(shù)沒(méi)有用分號(hào)結(jié)尾而以，然后當(dāng)頁(yè)面中引入我們的插件時(shí)，報(bào)錯(cuò)了，我們的代碼無(wú)法正常執(zhí)行。
原因是我們用來(lái)充當(dāng)自調(diào)用匿名函數(shù)的第一對(duì)括號(hào)與上面別人定義的函數(shù)相連，因?yàn)橹虚g沒(méi)有分號(hào)嘛，總之我們的代碼無(wú)法正常解析了，所以報(bào)錯(cuò)。
所以好的做法是我們?cè)诖a開(kāi)頭加一個(gè)分號(hào)，這在任何時(shí)候都是一個(gè)好的習(xí)慣。
var foo=function(){//別人的代碼 }//注意這里沒(méi)有用分號(hào)結(jié)尾//開(kāi)始我們的代碼。。。 ;(function(){//我們的代碼。。alert('Hello!'); })();?
同時(shí)，將系統(tǒng)變量以參數(shù)形式傳遞到插件內(nèi)部也是個(gè)不錯(cuò)的實(shí)踐。
當(dāng)我們這樣做之后，window等系統(tǒng)變量在插件內(nèi)部就有了一個(gè)局部的引用，可以提高訪問(wèn)速度，會(huì)有些許性能的提升
最后我們得到一個(gè)非常安全結(jié)構(gòu)良好的代碼：
;(function($,window,document,undefined){//我們的代碼。。//blah blah blah... })(jQuery,window,document);?
而至于這個(gè)undefined，稍微有意思一點(diǎn)，為了得到?jīng)]有被修改的undefined，我們并沒(méi)有傳遞這個(gè)參數(shù)，但卻在接收時(shí)接收了它，因?yàn)閷?shí)際并沒(méi)有傳，所以‘undefined’那個(gè)位置接收到的就是真實(shí)的'undefined'了。是不是有點(diǎn)hack的味道，值得細(xì)細(xì)體會(huì)的技術(shù)，當(dāng)然不是我發(fā)明的，都是從前人的經(jīng)驗(yàn)中學(xué)習(xí)。
所以最后我們的插件成了這樣：
;(function($, window, document,undefined) {//定義Beautifier的構(gòu)造函數(shù)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對(duì)象$.fn.myPlugin = function(options) {//創(chuàng)建Beautifier的實(shí)體var beautifier = new Beautifier(this, options);//調(diào)用其方法return beautifier.beautify();} })(jQuery, window, document);?
一個(gè)安全，結(jié)構(gòu)良好，組織有序的插件編寫完成。
?
回到頂部關(guān)于變量定義及命名
現(xiàn)在談?wù)勱P(guān)于變量及方法等的命名，沒(méi)有硬性規(guī)定，但為了規(guī)范，遵循一些約定還是很有必要的。
變量定義：好的做法是把將要使用的變量名用一個(gè)var關(guān)鍵字一并定義在代碼開(kāi)頭，變量名間用逗號(hào)隔開(kāi)。原因有二：
- 一是便于理解，知道下面的代碼會(huì)用到哪些變量，同時(shí)代碼顯得整潔且有規(guī)律，也方便管理，變量定義與邏輯代碼分開(kāi)；
- 二是因?yàn)镴avaScript中所有變量及函數(shù)名會(huì)自動(dòng)提升，也稱之為JavaScript的Hoist特性，即使你將變量的定義穿插在邏輯代碼中，在代碼解析運(yùn)行期間，這些變量的聲明還是被提升到了當(dāng)前作用域最頂端的，所以我們將變量定義在一個(gè)作用域的開(kāi)頭是更符合邏輯的一種做法。當(dāng)然，再次說(shuō)明這只是一種約定，不是必需的。
變量及函數(shù)命名?一般使用駝峰命名法（CamelCase），即首個(gè)單詞的首字母小寫，后面單詞首字母大寫，比如resultArray，requestAnimationFrame。對(duì)于常量，所有字母采用大寫，多個(gè)單詞用下劃線隔開(kāi)，比如WIDTH=100，BRUSH_COLOR='#00ff00'。當(dāng)變量是jQuery類型時(shí)，建議以$開(kāi)頭，開(kāi)始會(huì)不習(xí)慣，但經(jīng)常用了之后會(huì)感覺(jué)很方便，因?yàn)榭梢院芊奖愕貙⑺c普通變量區(qū)別開(kāi)來(lái)，一看到以$開(kāi)頭我們就知道它是jQuery類型可以直接在其身上調(diào)用jQuery相關(guān)的方法，比如var $element=$('a'); 之后就可以在后面的代碼中很方便地使用它，并且與其他變量容易區(qū)分開(kāi)來(lái)。
引號(hào)的使用：既然都扯了這些與插件主題無(wú)關(guān)的了，這里再多說(shuō)一句，一般HTML代碼里面使用雙引號(hào)，而在JavaScript中多用單引號(hào)，比如下面代碼所示：
var name = 'Wayou'; document.getElementById(‘example’).innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持雙引號(hào)，JavaScript中保持單引號(hào)?
一方面，HTML代碼中本來(lái)就使用的是雙引號(hào)，另一方面，在JavaScript中引號(hào)中還需要引號(hào)的時(shí)候，要求我們單雙引號(hào)間隔著寫才是合法的語(yǔ)句，除非你使用轉(zhuǎn)意符那也是可以的。再者，堅(jiān)持這樣的統(tǒng)一可以保持代碼風(fēng)格的一致，不會(huì)出現(xiàn)這里字符串用雙引號(hào)包著，另外的地方就在用單引號(hào)。
?
代碼混淆與壓縮
進(jìn)行完上面的步驟，已經(jīng)小有所成了。或許你很早就注意到了，你下載的插件里面，一般都會(huì)提供一個(gè)壓縮的版本一般在文件名里帶個(gè)'min'字樣。也就是minified的意思，壓縮濃縮后的版本。并且平時(shí)我們使用的jQuery也是官網(wǎng)提供的壓縮版本，jquery.min.js。
這里的壓縮不是指代碼進(jìn)行功能上的壓縮，而是通過(guò)將代碼里面的變量名，方法函數(shù)名等等用更短的名稱來(lái)替換，并且刪除注釋（如果有的話）刪除代碼間的空白及換行所得到的濃縮版本。同時(shí)由于代碼里面的各種名稱都已經(jīng)被替代，別人無(wú)法閱讀和分清其邏輯，也起到了混淆代碼的作用。
回到頂部壓縮的好處
- 源碼經(jīng)過(guò)混淆壓縮后，體積大大減小，使代碼變得輕量級(jí)，同時(shí)加快了下載速度，兩面加載變快。比如正常jQuery v1.11.0的源碼是276kb，而壓縮后的版本僅94.1kb！體積減小一半還多。這個(gè)體積的減小對(duì)于文件下載速度的提升不可小覷。
- 經(jīng)過(guò)壓縮混淆后，代碼還能閱讀嘛？當(dāng)然不能，所以順帶還起到了代碼保護(hù)的作用。當(dāng)然只是針對(duì)你編寫了一些比較酷的代碼又不想別人抄襲的情況。對(duì)于jQuery社區(qū)，這里本身就是開(kāi)源的世界，同時(shí)JavaScript這東西其實(shí)也沒(méi)什么實(shí)質(zhì)性方法可以防止別人查看閱讀你的代碼，畢竟有混淆就有反混淆工具，這里代碼壓縮更多的還是上面提到的壓縮文件的作用，同時(shí)一定程度上防止別人抄襲。
工具
所使用的工具推崇的是Google開(kāi)發(fā)的Closure Compiler。該工具需要Java環(huán)境的支持，所以使用前你可能需要先在機(jī)子上裝JRE, 然后再獲取Closure進(jìn)行使用。
同時(shí)也有很朋在線的代碼混淆壓縮工具，用起來(lái)也很方便。這些工具都是一搜一大把的。
插件發(fā)布
這一步不是必需的，但本著把事情做完整的態(tài)度，同時(shí)你也許也希望有更多人看到或使用你的插件吧。
?
- 首先你需要將插件代碼放到GitHub上創(chuàng)建一個(gè)Service Hook，這樣做的目的是你以后更新的插件后，jQuery可以自動(dòng)去獲取新版本的信息然后展示在插件中心的頁(yè)面上。關(guān)于如何傳代碼到GitHub，你去下載GitHub 提供的客戶端工具，就會(huì)知道如何操作了，非常方便。關(guān)于在GitHub創(chuàng)建Service Hook，也只是點(diǎn)幾下而以的事情。下面會(huì)截圖介紹。
- 然后需要制作一個(gè)JSON格式的清單文件，其中包括關(guān)于插件的基本信息，具體格式及參數(shù)可以在jQuery官網(wǎng)插件發(fā)布指南頁(yè)面了解到，這里提供一個(gè)示例文件，是我之前寫的一個(gè)jQuery插件SlipHover：
- 然后就可以在插件的根目錄執(zhí)行現(xiàn)行g(shù)it代碼來(lái)發(fā)布插件了。其中0.1.0是版本號(hào)，以后每次你的插件有新版本發(fā)布只需更新上面命令中的版本，創(chuàng)建新的tag，這樣jQuery插件中心就會(huì)自動(dòng)獲取到新版本信息了
GitHub Service Hook
1 點(diǎn)擊項(xiàng)目右邊菜單的設(shè)置
2進(jìn)入設(shè)置頁(yè)面后點(diǎn)擊'Webhooks & Services '
3然后點(diǎn)擊右邊主頁(yè)面上的'Configure services' 按鈕
4這時(shí)出現(xiàn)一個(gè)很長(zhǎng)的列表，向下找到j(luò)Query Plugins 點(diǎn)擊
5點(diǎn)擊選中框后點(diǎn)擊'更新設(shè)置'按鈕
到此就設(shè)置完成了。
?
?
Reference:
轉(zhuǎn)載于:https://www.cnblogs.com/IT-study/p/8946842.html
總結(jié)
以上是生活随笔為你收集整理的教你开发jQuery插件（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： stixel world论文总结
- 下一篇： SD/MMC相关寄存器的介绍