现在的位置: 主页 > 在线留言 > 文章列表

jquery插件编写学习小结

作者:厦工楚胜(湖北)专用汽车制造有限公司 来源:www.szzq168.com 发布时间:2017-09-06 10:25:55
 

jquery插件编写学习小结

编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率。

这里写图片描述


一、插件的种类
jQuery的插件主要分为3种类型。
1、封装对象方法的插件
2、封装全局函数的插件
3、选择器插件
这里我们主要讨论第一种插件的开发流程。
封装对象方法的插件:
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件,有95%以上的插件都是这种类型的插件。

二、插件的基本要点
1、所有对象方法都应当附加到jQuery.fn上,而所有全局函数都应当附加到jQuery对象本身上。
2、在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不是DOM元素。
3、所有方法或函数插件,都应当以分号结尾,为了更稳妥些,甚至可以再插件头部也加上一个分号,以免他们的不规范代码给插件带来影响。
4、插件应当返回一个jQuery对象,以保证链式操作。
5、闭包的使用。

三、插件中的闭包
闭包:简单来说,当一个内部函数在包含他们的外部函数之外被调用时,就会形成闭包。
利用闭包的特性,既可以避免内部临时变量影响到全局空间,又可以在插件内部继续使用$作为jQuery的别名。常见的jQuery插件都是这样的形式:

;(function ($) { //... })(jQuery);

再看看这段代码:

;(function ($) { //定义一个局部变量foo,仅函数内部可以访问,外部无法访问 var foo; var bar = function(){ //... } //下面这句话相当于增加了一个jQuery对象上的全局函数BAR。可以通过$.BAR()的方式来访问内部定义的函数bar(),并且内部函数bar()也能访问foo $.BAR = bar; })(jQuery);

其实这里与我之前写的一篇介绍模块化编程的博文很相似,都用到了闭包的盖概念,不过在模块化编程中通过闭包可以拓展模块方法,而这里是增加$对象上的方法,也就是jQuery全局函数插件。

四、jQuery.extend()方法
jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend方法和jQuery.extend()方法。前者用于可扩展之前提到的三种类型插件中的第一种,后者用于扩展后两种插件。这里要介绍的是jQuery.extend()方法除了可以用于扩展jQuery对象之外,还有一个很强大的功能,就是用于扩展已有的Object对象。

jQuery.extend(target,obj1,obj2,...objn);

用一个或多个对象来扩展一个对象,然后返回被扩展的对象。
举个栗子:

var settings = { validate: false,limit: 5,name: "foo" }; var options= { validate: true,name: "bar" }; var newOptions = jQuery.extend(settings,options);

结果为:

newOptions = { validate: true,limit: 5,name: "bar" };

显然,这个方法的特性可以很方便的用传入的参数来覆盖默认值,在插件的编写中会经常用到。

五、编写jQuery插件
鉴于之前在实习期间(采遗网电商平台)写个人中心栏目时经常会遇到各种各样的表格,为了避免重复的工作,遂学习写了一个具有表格隔行变色、点击选中变色简单功能的插件。
不然每次都需要重复下面类似代码:

$("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); $("tbody>tr:has(:checked)").addClass("selected"); $("tbody>tr").click(function () { var hasSelected = $(this).hasClass("selected"); $(this)[hasSelected?"removeClass":"addClass"] ("selected").find(':checkbox').prop('checked',!hasSelected); });

功能不大,但也算是了解了插件的具体开发流程。
首先,我们建立一个新的文件jquery.tableBgColor.js,把插件方法取名tableBgColor,然后搭好框架:

;(function ($) { $.fn.extend({ "tableBgColor":function(options){ //设置默认值 options= $.extend({ odd:"odd", even:"even", selected:"selected" },options); //...插件代码 return this;//返回jQuery对象,保证链式操作 }) } }); })(jQuery);

现在,我们的目的应该是使用选择器选择某个表格,执行tableBgColor()方法后,将对应表格内的tr元素都进行各行变色,并且点击某一行之后也会变色,并且选中对应行内的checkbox。
因此,只需将之前会重复的代码稍作修改放入框架中:

;(function ($) { $.fn.extend({ "tableBgColor":function(options){ //each()方法遍历匹配元素,因为可能匹配的元素不止一个 return this.each(function () { //设置默认值 options= $.extend({ odd:"odd", even:"even", selected:"selected" },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even",this).addClass(options.even); $("tbody>tr:has(:checked)",this).addClass("selected"); $("tbody>tr",this).click(function () { var hasSelected = $(this).hasClass(options.selected); $(this)[hasSelected?"removeClass":"addClass"](options.selected).find(':checkbox').prop('checked',!hasSelected);//注意这里用的是prop而不是attr }); return this; }) } }); })(jQuery);

此时,插件就完成了,现在来测试这个插件。构造表格,id为test_table:

//...此处省略

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:神农架SEO http://shennongjia.4567w.com

  • 上一篇:Python日志格式输出与时间格式
  • 下一篇:最后一页