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

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

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

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

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

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

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

插件開發(fā)

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

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

插件開發(fā)，我們一般運用面向對象的思維方式

例如定義一個對象

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)建一個新對象，保留對象的默認值。

$.fn.myPlugin = function(options) {
  //創(chuàng)建haorooms的實體
  var haorooms= new Haorooms(this, options);
  //調用其方法
  return Haorooms.changecss();
}

調用這個插件直接如下就可以

$(function() {
  $('a').myPlugin({
    'color': '#2C9929',
    'fontSize': '20px'
  });
})

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

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

(function(){
})()

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

但是還有一個問題，當我們研究大牛的代碼的時候，前面經(jīng)常看到有“；”，那是為了避免代碼合并等不必要的錯誤。

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

var haoroomsblog=function(){

}
(function(){
  })()

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

;(function(){
  })()

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

還有一個問題

把你的插件包裹在

;(function(){

  })()

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

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

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

一個通用的框架

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

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

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

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

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

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

這里重點說一下這一句：

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

看上去很diao的一句，其實就是合并多個對象為一個。這里就是，如果你在調用的時候寫了新的參數(shù)，就用你新的參數(shù)，如果沒有寫，就用默認的參數(shù)。想進一步了解的朋友，可以參考jquery的官方文檔： http://api.jquery.com/jQuery.extend/

開始下半身吧

ok，上半身填補完了，咱就可以填補下半身吧。無非就是找到基數(shù)行和偶數(shù)行（感謝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);

最重要的一步！

也許有些朋友覺得這樣就算是完成了。但是切切相反，我們還有最重要的一步?jīng)]有完成，那就是一定要在插件上方，寫上插件的名稱、版本號、完成日期、作者，作者的聯(lián)系方式、出生日期、三圍……等等。因為只有這樣才能顯的這個插件夠專業(yè)。

/*
* 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);

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

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

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jquery validate poshytip 自定義樣式
項目中做了一個jquery.validate氣泡提示在新版的jquery.validate中，有這個功能，但在我這里不怎么好用，所以自己加了一個，找了一些插件qtip2的樣式不錯，需要的朋友可以參考下
2012-11-11
jQuery zTree樹插件簡單使用教程
這篇文章主要為大家詳細介紹了jQuery zTree樹插件簡單使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
JQuery ZTree使用方法詳解
這篇文章主要為大家詳細介紹了JQuery ZTree使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
使用jQuery簡單實現(xiàn)模擬瀏覽器搜索功能
這篇文章主要介紹了使用jQuery簡單實現(xiàn)模擬瀏覽器搜索功能,需要的朋友可以參考下
2014-12-12
JQuery實現(xiàn)表格中相同單元格合并示例代碼
一定要注意如果從list的開始元素循環(huán)下去，remove掉一個元素后，有些元素就找不到了或者說不是要找的那個元素，感興趣的各位可以研究下哈
2013-06-06
jQuery 1.7.2中getAll方法的疑惑分析
2012-05-05
jquery實現(xiàn)表格行拖動排序
這篇文章主要為大家詳細介紹了jquery實現(xiàn)表格行拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
如何解決jQuery EasyUI 已打開Tab重新加載問題
最近在項目中遇到這樣的需求，要求實現(xiàn)點擊左側已經(jīng)打開的tab可以刷新重新加載datagrid。下面給大家分享實現(xiàn)代碼，一起看看吧
2016-12-12
jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結合實例形式分析了基于jQuery的鼠標事件響應與頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下
2016-12-12
JQuery中getJSON的使用方法
最近有一個活動，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進行交互。但是由于兩個網(wǎng)站處于不同的域名下，而Ajax的應用中，由于安全的問題，瀏覽器默認是不支持跨域調用的，最后選用了JQuery中的getJSON方法
2010-12-12