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