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