jquery插件开发模式实例详解


Posted in jQuery onJuly 20, 2019

本文实例讲述了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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
You might like
php下使用以下代码连接并测试
2008/04/09 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php构造函数实例讲解
2013/11/13 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php数组去除空值函数分享
2015/02/02 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
运动会领导邀请函
2014/01/10 职场文书
房产继承公证书
2014/04/09 职场文书
法学自荐信
2014/06/20 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
自我工作评价范文
2015/03/06 职场文书
企业安全生产规章制度
2015/08/06 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis