本文實(shí)例講述了jquery插件開(kāi)發(fā)模式。分享給大家供大家參考，具體如下：
jquery插件一般有三種開(kāi)發(fā)方式：
$.extend()來(lái)擴(kuò)展jQuery$.fn 向jQuery添加新的方法$.widget()應(yīng)用jQuery UI的部件工廠(chǎng)方式創(chuàng)建第一種$.extend()相對(duì)簡(jiǎn)單，一般很少能夠獨(dú)立開(kāi)發(fā)復(fù)雜插件，第三種是一種高級(jí)的開(kāi)發(fā)模式，本文也不做介紹。第二種則是一般插件開(kāi)發(fā)用到的方式，本文著重講講第二種。
插件開(kāi)發(fā)
第二種插件開(kāi)發(fā)方式一般是如下定義
$.fn.pluginName = function() { //your code here}插件開(kāi)發(fā)，我們一般運(yùn)用面向?qū)ο蟮乃季S方式
例如定義一個(gè)對(duì)象
var Haorooms= function(el, opt) { this.$element = el, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'none' }, this.options = $.extend({}, this.defaults, opt)}//定義haorooms的方法haorooms.prototype = { changecss: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); }}$.extend({}, this.defaults, opt)有{}主要是為了創(chuàng)建一個(gè)新對(duì)象，保留對(duì)象的默認(rèn)值。
$.fn.myPlugin = function(options) { //創(chuàng)建haorooms的實(shí)體 var haorooms= new Haorooms(this, options); //調(diào)用其方法 return Haorooms.changecss();}調(diào)用這個(gè)插件直接如下就可以
$(function() { $('a').myPlugin({ 'color': '#2C9929', 'fontSize': '20px' });})上述開(kāi)發(fā)方法的問(wèn)題
上面的開(kāi)發(fā)方法存在一個(gè)嚴(yán)重的問(wèn)題，就是定義了一個(gè)全局的Haorooms，這樣對(duì)于插件的兼容等等各個(gè)方面都不好。萬(wàn)一別的地方用到了Haorooms，那么你的代碼就悲催了！現(xiàn)在我們把上面的代碼包裝起來(lái)，用一個(gè)自調(diào)用匿名函數(shù)包裹，就不會(huì)出現(xiàn)這個(gè)問(wèn)題了！包括js插件的開(kāi)發(fā)，也是一樣的，我們用一個(gè)自調(diào)用匿名函數(shù)把自己寫(xiě)的代碼包裹起來(lái)，就可以了！包裹方法如下：
(function(){})()用上面的這個(gè)包裹起來(lái)，就可以了。
但是還有一個(gè)問(wèn)題，當(dāng)我們研究大牛的代碼的時(shí)候，前面經(jīng)常看到有“；”，那是為了避免代碼合并等不必要的錯(cuò)誤。
例如，我們隨便定義一個(gè)函數(shù)：
var haoroomsblog=function(){}(function(){ })()由于haoroomsblog這個(gè)函數(shù)后面沒(méi)有加分號(hào)，導(dǎo)致代碼出錯(cuò)，為了避免這類(lèi)情況的發(fā)生，通常這么寫(xiě)！
;(function(){ })()把你的插件代碼包裹在上面里面，就是一個(gè)簡(jiǎn)單的插件了。（注js插件和jquery插件都是如此）
還有一個(gè)問(wèn)題
把你的插件包裹在
;(function(){ })()基本上可以說(shuō)是完美了。但是為了讓你開(kāi)發(fā)的插件應(yīng)用更加廣泛，兼容性更加好，還要考慮到用插件的人的一些特殊的做法，例如，有些朋友為了避免jquery和zeptojs沖突，將jquery的前綴“$”,修改為“jQuery”，還有些朋友將默認(rèn)的document等方法修改。為了讓你的插件在這些東西修了了的情況下照常運(yùn)行，那么我們的做法是，把代碼包裹在如下里面：
;(function($,window,document,undefined){ //我們的代碼。。})(jQuery,window,document);就可以避免上面的一些情況了！
一個(gè)通用的框架
在動(dòng)手寫(xiě)自己的jQuery插件之前，自然是先研究一下別人寫(xiě)的插件了。其實(shí)寫(xiě)jQuery也基本有一個(gè)通用的框架。行，那咱也把這框架照搬過(guò)來(lái)吧。
(function($){$.fn.yourName = function(options){//各種屬性、參數(shù)}var options = $.extend(defaults, options);this.each(function(){//插件實(shí)現(xiàn)代碼});};})(jQuery);有了這個(gè)，咱就可以往里面套東西了。
名號(hào)、參數(shù)和屬性
好不容易開(kāi)始闖蕩江湖了，一定要有一個(gè)響亮的名號(hào)才行，這樣走在江湖上，才能夠diao，夠威風(fēng)。不信，你聽(tīng)聽(tīng)人家“中國(guó)牙防組”！所以，咱這里一定要起個(gè)響亮的名號(hào)，一定要簡(jiǎn)單、明了、夠權(quán)威。所以，決定了，就叫做“tableUI”了！
參數(shù)和屬性也很簡(jiǎn)單，無(wú)非就是三個(gè)class的名稱(chēng)。就叫做：evenRowClass、oddRowClass和activeRowClass吧。
所以，上面的框架，咱就把上半身給填上了。
(function($){$.fn.tableUI = function(options){var defaults = {evenRowClass:"evenRow",oddRowClass:"oddRow",activeRowClass:"activeRow"}var options = $.extend(defaults, options);this.each(function(){//實(shí)現(xiàn)代碼});};})(jQuery);這里重點(diǎn)說(shuō)一下這一句：
var options = $.extend(defaults, options);
看上去很diao的一句，其實(shí)就是合并多個(gè)對(duì)象為一個(gè)。這里就是，如果你在調(diào)用的時(shí)候?qū)懥诵碌膮?shù)，就用你新的參數(shù)，如果沒(méi)有寫(xiě)，就用默認(rèn)的參數(shù)。想進(jìn)一步了解的朋友，可以參考jquery的官方文檔： http://api.jquery.com/jQuery.extend/
開(kāi)始下半身吧
ok，上半身填補(bǔ)完了，咱就可以填補(bǔ)下半身吧。無(wú)非就是找到基數(shù)行和偶數(shù)行（感謝jQuery提供了類(lèi)似tr:even這種寫(xiě)法，使其及其簡(jiǎn)單），然后添加上相應(yīng)的class。然后再給所有的tr，綁定mouseover和mouseout事件即可。下半身代碼如下：
(function($){$.fn.tableUI = function(options){var defaults = {evenRowClass:"evenRow",oddRowClass:"oddRow",activeRowClass:"activeRow"}var options = $.extend(defaults, options);this.each(function(){var thisTable=$(this);//添加奇偶行顏色$(thisTable).find("tr:even").addClass(options.evenRowClass);$(thisTable).find("tr:odd").addClass(options.oddRowClass);//添加活動(dòng)行顏色$(thisTable).find("tr").bind("mouseover",function(){$(this).addClass(options.activeRowClass);});$(thisTable).find("tr").bind("mouseout",function(){$(this).removeClass(options.activeRowClass);});});};})(jQuery);最重要的一步！
也許有些朋友覺(jué)得這樣就算是完成了。但是切切相反，我們還有最重要的一步?jīng)]有完成，那就是一定要在插件上方，寫(xiě)上插件的名稱(chēng)、版本號(hào)、完成日期、作者，作者的聯(lián)系方式、出生日期、三圍……等等。因?yàn)橹挥羞@樣才能顯的這個(gè)插件夠?qū)I(yè)。
/** tableUI 0.1* Date: 2010-03-30* 使用tableUI可以方便地將表格提示使用體驗(yàn)。先提供的功能有奇偶行顏色交替，鼠標(biāo)移上高亮顯示*/(function($){$.fn.tableUI = function(options){var defaults = {evenRowClass:"evenRow",oddRowClass:"oddRow",activeRowClass:"activeRow"}var options = $.extend(defaults, options);this.each(function(){var thisTable=$(this);//添加奇偶行顏色$(thisTable).find("tr:even").addClass(options.evenRowClass);$(thisTable).find("tr:odd").addClass(options.oddRowClass);//添加活動(dòng)行顏色$(thisTable).find("tr").bind("mouseover",function(){$(this).addClass(options.activeRowClass);});$(thisTable).find("tr").bind("mouseout",function(){$(this).removeClass(options.activeRowClass);});});};})(jQuery);至此，你開(kāi)發(fā)的插件就算完美了！
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
