溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
