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绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
Vue性能优化的方法
2020/07/30 Javascript
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python实现图像识别功能
2018/01/29 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python 读取数据库并绘图的实例
2019/12/03 Python
Python列表切片常用操作实例解析
2019/12/16 Python
基于python实现FTP文件上传与下载操作(ftp&sftp协议)
2020/04/01 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
暑假实习求职信范文
2013/09/22 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
护士感人事迹
2014/05/01 职场文书
简历中自我评价范文
2015/03/11 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL