jquery插件開發(fā)模式實(shí)例詳解

更新時(shí)間：2019年07月20日 16:44:27 作者：trkjoy

這篇文章主要介紹了jquery插件開發(fā)模式,結(jié)合實(shí)例形式詳細(xì)分析了jQuery插件三種開發(fā)方式實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery插件開發(fā)模式。分享給大家供大家參考，具體如下：

jquery插件一般有三種開發(fā)方式：

通過$.extend()來擴(kuò)展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建

第一種$.extend()相對(duì)簡(jiǎn)單，一般很少能夠獨(dú)立開發(fā)復(fù)雜插件，第三種是一種高級(jí)的開發(fā)模式，本文也不做介紹。第二種則是一般插件開發(fā)用到的方式，本文著重講講第二種。

插件開發(fā)

第二種插件開發(fā)方式一般是如下定義

$.fn.pluginName = function() {
  //your code here
}

插件開發(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'
  });
})

上述開發(fā)方法的問題

上面的開發(fā)方法存在一個(gè)嚴(yán)重的問題，就是定義了一個(gè)全局的Haorooms，這樣對(duì)于插件的兼容等等各個(gè)方面都不好。萬一別的地方用到了Haorooms，那么你的代碼就悲催了！現(xiàn)在我們把上面的代碼包裝起來，用一個(gè)自調(diào)用匿名函數(shù)包裹，就不會(huì)出現(xiàn)這個(gè)問題了！包括js插件的開發(fā)，也是一樣的，我們用一個(gè)自調(diào)用匿名函數(shù)把自己寫的代碼包裹起來，就可以了！包裹方法如下：

(function(){
})()

用上面的這個(gè)包裹起來，就可以了。

但是還有一個(gè)問題，當(dāng)我們研究大牛的代碼的時(shí)候，前面經(jīng)?？吹接小埃弧?，那是為了避免代碼合并等不必要的錯(cuò)誤。

例如，我們隨便定義一個(gè)函數(shù)：

var haoroomsblog=function(){

}
(function(){
  })()

由于haoroomsblog這個(gè)函數(shù)后面沒有加分號(hào)，導(dǎo)致代碼出錯(cuò)，為了避免這類情況的發(fā)生，通常這么寫！

;(function(){
  })()

把你的插件代碼包裹在上面里面，就是一個(gè)簡(jiǎn)單的插件了。（注js插件和jquery插件都是如此）

還有一個(gè)問題

把你的插件包裹在

;(function(){

  })()

基本上可以說是完美了。但是為了讓你開發(fā)的插件應(yīng)用更加廣泛，兼容性更加好，還要考慮到用插件的人的一些特殊的做法，例如，有些朋友為了避免jquery和zeptojs沖突，將jquery的前綴“$”,修改為“jQuery”，還有些朋友將默認(rèn)的document等方法修改。為了讓你的插件在這些東西修了了的情況下照常運(yùn)行，那么我們的做法是，把代碼包裹在如下里面：

;(function($,window,document,undefined){
  //我們的代碼。。
})(jQuery,window,document);

就可以避免上面的一些情況了！

一個(gè)通用的框架

在動(dòng)手寫自己的jQuery插件之前，自然是先研究一下別人寫的插件了。其實(shí)寫jQuery也基本有一個(gè)通用的框架。行，那咱也把這框架照搬過來吧。

(function($){
$.fn.yourName = function(options){
//各種屬性、參數(shù)
}
var options = $.extend(defaults, options);
this.each(function(){
//插件實(shí)現(xiàn)代碼
});
};
})(jQuery);

有了這個(gè)，咱就可以往里面套東西了。

名號(hào)、參數(shù)和屬性

好不容易開始闖蕩江湖了，一定要有一個(gè)響亮的名號(hào)才行，這樣走在江湖上，才能夠diao，夠威風(fēng)。不信，你聽聽人家“中國牙防組”！所以，咱這里一定要起個(gè)響亮的名號(hào)，一定要簡(jiǎn)單、明了、夠權(quán)威。所以，決定了，就叫做“tableUI”了！

參數(shù)和屬性也很簡(jiǎn)單，無非就是三個(gè)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(){
//實(shí)現(xiàn)代碼
});
};
})(jQuery);

這里重點(diǎn)說一下這一句：

var options = $.extend(defaults, options);

看上去很diao的一句，其實(shí)就是合并多個(gè)對(duì)象為一個(gè)。這里就是，如果你在調(diào)用的時(shí)候?qū)懥诵碌膮?shù)，就用你新的參數(shù)，如果沒有寫，就用默認(rèn)的參數(shù)。想進(jìn)一步了解的朋友，可以參考jquery的官方文檔： http://api.jquery.com/jQuery.extend/

開始下半身吧

ok，上半身填補(bǔ)完了，咱就可以填補(bǔ)下半身吧。無非就是找到基數(shù)行和偶數(shù)行（感謝jQuery提供了類似tr:even這種寫法，使其及其簡(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);

最重要的一步！

也許有些朋友覺得這樣就算是完成了。但是切切相反，我們還有最重要的一步?jī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);

至此，你開發(fā)的插件就算完美了！

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: