jquery-插件開發(fā)全解析

1、jQuery插件開發(fā)全解析jQuery插件的開發(fā)包括兩種。序號方法類型說明1jQuery.extend(object);或$.extend(object);類級別的插件相當于給jQuery類本身添加方法，jQuery的全局函數(shù)就是屬于jQuery命名空間的函數(shù)。2jQuery.fn.extend(object);或$.fn.extend(object);對象級別的插件即給jQuery對象添加方法。1、類級別的插件開發(fā)類級別的插件開發(fā)最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態(tài)方法。典型的例子就是$.AJAX()這個函數(shù)（不需要選擇dom對象），將函數(shù)定義于jQuery的命名空

2、間中。關(guān)于類級別的插件開發(fā)可以采用如下幾種形式進行擴展：1.1 使用等號添加一個全局函數(shù)，我們只需如下定義：jQuery.foo等價于：$.foo = function() alert('This is a test. This is only a test.'); = function() alert('This is a test. This is only a test.');調(diào)用的時候可以這樣寫： jQuery.foo(); 或 $.foo();添加多個全局函數(shù)，可采用如下定義：第一個全局函數(shù)：jQuery.foo = function() alert(

3、'This is a test. This is only a test.');第二個全局函數(shù)：jQuery.bar = function(param) alert('This function takes a parameter, which is "' + param + '".');調(diào)用時和一個函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');1.3 使用extendjQuery.extend(foo: function() / 成員函數(shù)1al

4、ert('This is a test. This is only a test.');,bar: function(param) / 成員函數(shù)2alert('This function takes a parameter, which is "' + param +'".');); / end extend1.4 使用命名空間雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數(shù)名和變量名。但是仍然不可避免某些函數(shù)或變量名將于其他jQuery插件沖突，因此我們習慣將一些方法封裝到另一個自定義的命名空間。外

5、面用大括號定義空間，里面用冒號定義函數(shù)：jQuery.myPlugin = foo:function() alert('This is a test. This is only a test.');,bar:function(param) alert('This function takes a parameter, which is "' + param + '".');采用命名空間的函數(shù)仍然是全局函數(shù)，調(diào)用時采用的方法：$.myPlugin.foo();$.myPlugin.bar('baz');通過這個技

6、巧（使用獨立的插件名），我們可以避免命名空間內(nèi)函數(shù)的沖突。2、對象級別的插件開發(fā)對象級別的插件開發(fā)需要如下的兩種形式：形式1：(function($)$.fn.在Jeury的命名空間下聲明函數(shù)fn。extend(pluginName:function(opt,callback)/ Our plugin implementation code goes here.)(jQueryJquery為實參，立馬調(diào)用。);形式2：(function($) $我們在寫jQuery插件時，也可以使用$這個別名（因為$通過形參傳入到了函數(shù)體內(nèi)）。.fn在Jeury的命名空間下聲明函數(shù)fn。.pluginName

7、 = function() / Our plugin implementation code goes here.;)(jQueryJquery為實參，立馬調(diào)用。);上面定義了一個jQuery函數(shù)，形參是$，函數(shù)定義完成之后，把jQuery這個實參傳遞進去，立即調(diào)用執(zhí)行。這樣的好處是，我們在寫jQuery插件時，也可以使用$這個別名（因為$通過形參傳入到了函數(shù)體內(nèi)），而不會與prototype引起沖突.2.1 在JQuery名稱空間下申明一個名字這是一個單一插件的腳本。如果你的腳本中包含多個插件，或者互逆的插件（例如： $.fn.doSomething()和 $.fn.undoSomethin

8、g()），那么你需要聲明多個函數(shù)名字。但是，通常當我們編寫一個插件時，力求僅使用一個名字來包含它的所有內(nèi)容。我們的示例插件命名為“highlight“：$.fn.hilight = function() / Our plugin implementation code goes here.;我們的插件通過這樣被調(diào)用：$('#myDiv').hilight();但是如果我們需要分解我們的實現(xiàn)代碼為多個函數(shù)該怎么辦？有很多原因：設計上的需要；這樣做更容易或更易讀的實現(xiàn)；而且這樣更符合面向?qū)ο?。這真是一個麻煩事，把功能實現(xiàn)分解成多個函數(shù)而不增加多余的命名空間。出于認識到和利用函數(shù)是j

9、avascript中最基本的類對象，我們可以這樣做。就像其他對象一樣，函數(shù)可以被指定為屬性（或參數(shù)）。因此我們已經(jīng)聲明“hilight”為jQuery的屬性對象，任何其他的屬性或者函數(shù)我們需要暴露出來的，都可以在"hilight" 函數(shù)中被聲明屬性。稍后繼續(xù)（一堆廢話）。2.2 接受options參數(shù)以控制插件的行為讓我們?yōu)槲覀兊牟寮砑庸δ苤付ㄇ熬吧捅尘吧墓δ堋Ｎ覀円苍S會讓選項像一個options對象傳遞給插件函數(shù)。例如：/ plugin definition$.fn.hilight = function(options) var defaults = / 定義默認的

10、前景色和背景色foreground: 'red',background: 'yellow'/ Extend our default options with those provided.var opts = $.extend(defaults, options);/ Our plugin implementation code goes here.;我們的插件可以這樣被調(diào)用：$('#myDiv').hilight(foreground: 'blue');2.3 暴露插件的默認設置我們應該對上面代碼的一種改進是暴露插件的默認設置。

11、這對于讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來我們開始利用函數(shù)對象。/ plugin definition$.fn.hilight = function(options) / Extend our default options with those provided./ Note that the first arg to extend is an empty object - his is to keep from overriding our "defaults" object.var opts = $.extend(, $.fn.hilight.def

12、aults調(diào)用插件默認的函數(shù), options);/ Our plugin implementation code goes here.;/ plugin defaults - added as a property on our plugin function$.fn.hilight.defaults = / 將默認插件默認的函數(shù)暴漏在插件外面foreground: 'red',background: 'yellow'現(xiàn)在使用者可以包含像這樣的一行在他們的腳本里：/這個只需要調(diào)用一次，且不一定要在ready塊中調(diào)用$.fn.hilight.defaults.f

13、oreground = 'blue'接下來我們可以像這樣使用插件的方法，結(jié)果它設置藍色的前景色：$('#myDiv').hilight();如你所見，我們允許使用者寫一行代碼在插件的默認前景色。而且使用者仍然在需要的時候可以有選擇的覆蓋這些新的默認值：/ 覆蓋插件缺省的背景顏色$.fn.hilight.defaults.foreground = 'blue'/ ./ 使用一個新的缺省設置調(diào)用插件$('.hilightDiv').hilight();/ ./ 通過傳遞配置參數(shù)（option）給插件方法來覆蓋缺省設置$('#g

14、reen').hilight(foreground: 'green'傳遞給option參數(shù)。);2.4 適當?shù)谋┞兑恍┖瘮?shù)這段將會一步一步對前面那段代碼通過有意思的方法擴展你的插件（同時讓其他人擴展你的插件）。例如，我們插件的實現(xiàn)里面可以定義一個名叫"format"的函數(shù)來格式化高亮文本。我們的插件現(xiàn)在看起來像這樣，默認的format方法的實現(xiàn)部分在hiligth函數(shù)下面。/ plugin definition$.fn.hilight = function(options) / iterate and reformat each matched el

15、ementreturn this.each(function() var $this = $(this);/ .var markup = $this.html();/ call our format functionmarkup = $.fn.hilight.format(markup); / 定義一個名叫"format"的函數(shù)/ 加粗后的文字顯示在html$this.html(markup);); / end return;/ define our format function$.fn.hilight.format = function(txt) / 定義一個名叫&qu

16、ot;format"的函數(shù)，加粗顯示文字。return '<strong>' + txt + '</strong>'我們很容易的支持options對象中的其他的屬性通過回調(diào)函數(shù)來覆蓋默認的設置。這里展示的技巧是進一步有效的暴露format函數(shù)進而讓他能被重新定義。通過這技巧，是其他人能夠傳遞他們自己設置來覆蓋你的插件，換句話說，這樣其他人也能夠為你的插件寫插件?？紤]到這個篇文章中我們建立的無用的插件，你也許想知道究竟什么時候這些會有用。一個真實的例子是Cycle插件。這個Cycle插件是一個滑動顯示插件，他能支持許多內(nèi)部變換作用

17、到滾動，滑動，漸變消失等。但是實際上，沒有辦法定義也許會應用到滑動變化上每種類型的效果。那是這種擴展性有用的地方。 Cycle插件對使用者暴露"transitions"對象，使他們添加自己變換定義。插件中定義就像這樣：$.fn.cycle.transitions = / .;這個技巧使其他人能定義和傳遞變換設置到Cycle插件。2.5 保持私有函數(shù)的私有性這種技巧暴露你插件一部分來被覆蓋是非常強大的。但是你需要仔細思考你實現(xiàn)中暴露的部分。一但被暴露，你需要在頭腦中保持任何對于參數(shù)或者語義的改動也許會破壞向后的兼容性。一個通理是，如果你不能肯定是否暴露特定的函數(shù)，那么你也許不

18、需要那樣做。那么我們怎么定義更多的函數(shù)而不攪亂命名空間也不暴露實現(xiàn)呢？這就是閉包的功能。為了演示，我們將會添加另外一個“debug”函數(shù)到我們的插件中。這個 debug函數(shù)將為輸出被選中的元素格式到firebug控制臺。為了創(chuàng)建一個閉包，我們將包裝整個插件定義在一個函數(shù)中。(function($) / plugin definition$.fn.hilight = function(options) debug(this); / 調(diào)用私有函數(shù)/ .;/ private function for debuggingfunction debug($obj) / 定義私有函數(shù)（閉包函數(shù)）if (wi

19、ndow.console && window.console.log)window.console.log('hilight selection count: ' + $obj.size();/ .)(jQuery);我們的“debug”方法不能從外部閉包進入，因此對于我們的實現(xiàn)是私有的。2.6 支持Metadata插件在你正在寫的插件的基礎上，添加對Metadata插件的支持能使他更強大。個人來說，我喜歡這個Metadata插件，因為它讓你使用不多的"markup”覆蓋插件的選項（這非常有用當創(chuàng)建例子時）。而且支持它非常簡單。更新：注釋中有一點優(yōu)化建

20、議。$.fn.hilight = function(options) / ./ build main options before element iterationvar opts = $.extend(, $.fn.hilight.defaults, options);return this.each(function() var $this = $(this);/ build element specific optionsvar o = $.meta ? $.extend(, opts, $this.data() : opts;/.這些變動行做了一些事情：它是測試Metadata插件是

21、否被安裝，如果它被安裝了，它能擴展我們的options對象，通過抽取元數(shù)據(jù)，這行作為最后一個參數(shù)添加到JQuery.extend，那么它將會覆蓋任何其它選項設置?，F(xiàn)在我們能從"markup”處驅(qū)動行為，如果我們選擇了“markup”段落：<!- markup -><div class="hilight background: 'red', foreground: 'white' ">Have a nice day!</div><div class="hilight foregrou

22、nd: 'orange' ">Have a nice day!</div><div class="hilight background: 'green' ">Have a nice day!</div>現(xiàn)在我們能高亮哪些div僅使用一行腳本：$('.hilight').hilight();2.7 插件整合例子下面使我們的例子完成后的代碼，很多框架也是這么寫的：/ 創(chuàng)建閉包(function($) / 1、插件的定義$.fn.hilight = function(options

23、) debug(this); /調(diào)用私有函數(shù)/ build main options before element iterationvar opts = $.extend(, $.fn.hilight.defaults, options); /調(diào)用默認函數(shù)/ iterate and reformat each matched elementreturn this.each(function() $this = $(this);/ build element specific optionsvar o = $.meta ? $.extend(, opts, $this.data() : opt

24、s;/ update element styles$this.css(backgroundColor : o.background,color : o.foreground);var markup = $this.html();/ call our format functionmarkup = $.fn.hilight.format(markup); /調(diào)用暴露函數(shù)$this.html(markup););/ 2、私有函數(shù)：debuggingfunction debug($obj) if (window.console && window.console.log)window

25、.console.log('hilight selection count: ' + $obj.size();/ 3、定義暴露函數(shù)$.fn.hilight.format = function(txt) return '<strong>' + txt + '</strong>'/ 4、定義默認設置（暴露）$.fn.hilight.defaults = foreground : 'red',background : 'yellow')(jQuery); / 閉包結(jié)束這段設計已經(jīng)讓我創(chuàng)建了強大符合規(guī)范的插件。3、總結(jié)jQuery為開發(fā)插件提拱了兩個方法，分別是：jQuery.fn.extend(object); 給jQuery對象添加方法。jQuery.extend(object); 為擴展jQuery類本身.為類添加新的方法。3.1 $.fn.extend(object);fn 是什么東西呢。查看jQuery源代碼，