自己动手写一个jQuery插件(第二篇)

hold住,我们要开始动真格了!

是的,看到这个标题,你一定也和我一样迫不及待了,因为我们不像之前那篇教程一样小打小闹了,我们现在要动真格了, 这次我们要写的插件是上个插件的增强版本.而这个插件包含主流的插件的完整骨架.换句话说,就是我们的插件会变得更加的专业,更加的规范化,当然.也显得我们牛逼了.OK,我们现在就开始着手!

第一个版本

今天,你的客户告诉你,需要开发一个这样的插件,第一步是:选中整篇文章,并改变颜色,鼠标移过去的时候.表示读者已经读过这一段,需要把颜色变成初始的颜色,好的.这个就是全部了,你想着.嗯,应该是挺简单的.因为在上一篇教程我们已经讲解了一些关于最基本的概念,并完成了一个类似的插件.如果你忘记了,那你可以回去复习一下.->传送门,好了,让我们来先看看第一个版本的代码

 1 (function($){ 2     $.fn.highlight = function(color){ 3             return this.each(function() { 4             $(this) 5             .data('orginColor',$(this).css('backgroundColor')) 6             .css('backgroundColor',color) 7             .one('mouseover',function() { 8                 $(this).animate({backgroundColor:$(this).data('orginColor')},'slow'); 9             })10         })11     }12  })(jQuery)

上面的脚本也许你已经很熟悉了,因为我们上一篇就是差不多这样了,只是多一个data来放置我们初始的颜色而已,然后就是设置了一下样式,最后就是用one绑定了一次的鼠标移过事件而已,这里我要特别声明一下.因为我们为了效果更好.所以使用了颜色渐变.如果你对 jQuery的animate足够了解的话.你就应该知道jQuery原生版本的backgroundColor是不能设置颜色的逐渐变换的.所以我们需要引入 jQuery UI类库,这样就能够实现逐渐变换了(如果以后有人来问你为什么不能实现颜色渐变的时候,果断推荐这个方法),注意,这不是必须的.我们这里只是演示效果而已,我会提供jQuery UI,在文章最后的附件中,现在我们来试试插件的效果

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5     <title>插件测试</title> 6     <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script> 7     <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript" charset="utf-8"></script> 8     <script src="jQuery-superLight.js" type="text/javascript" charset="utf-8"></script> 9     <script type="text/javascript" charset="utf-8">10         jQuery(function(){11                 $('h1').hide().superLight('lightblue').slideDown();12         })13     </script>14     <style type="text/css" media="screen">15         h1{ background:pink;}16     </style>17 </head>18 <body>19     <h1>hello world</h1>20     <h1>hello weiqun</h1>21 </body>22 </html>

看到了吧,基本效果已经出来了,移过去的时候.颜色确实变了,而且也支持了链式的写法,这样你信心满满的拿给了你的客户,你开始想象着客户那绽开的笑脸了,刚开始的时候,客户也反馈这个superLight插件确实给他们带来了很大的方便.公司的那些不懂js的MM也学会了怎么使用这个简单的插件了,可是,过了几天之后,有些人就开始反映了,因为她们每次使用这个插件的时候,总是要提供一个颜色的参数给它,如果有个默认的值就好了,其实这还不是什么大问题,有些反馈回来说,这个插件啊,怎么不能设置颜色渐变的速度啊(animate的时间参数),有的读者希望能让那个好看的渐变久一些.有的读者甚至不想要那个渐变的过程了.还有啊...

第二个版本

遇到这个问题,也许我们一般的做法就是为color提供一个默认值,然后无非多加一个duration参数就是了,然后也提供一个默认值可是这样却有一个问题.就是以后也许还有更多的参数希望被添加进来,所以你开始思考了,是不是也该有更好的方法去解决这个问题. 既可以提供默认值,又可以让用户自己设置.当然,参数的个数也是需要用户自己来选择的.对于这个问题,我们这就来解决掉.让我们有请extend()函数出场.关于这个函数的更多的用法,这里有更多的解释->传送门.我们只需要合并的那个功能,具体的代码是这样的:

 1 (function($){ 2     $.fn.superLight = function(options) { 3         $.fn.superLight.defaults = { 4             'color':'lightblue',  5             'duration':'fast', 6         }; 7         options = $.extend($.fn.superLight.defaults,options); 8         return this.each(function() { 9             $(this)10             .data('orginColor',$(this).css('backgroundColor'))11             .css('backgroundColor',options.color)12             .one('mouseover',function() {13                 $(this).animate({backgroundColor:$(this).data('orginColor')},options.duration);14             })15         })16     }17 })(jQuery)

首先我们看看$.fn.superLight.defaults,我们在superLight中增加了一个默认的属性,这个默认的属性提供了两个参数,color和 duration,这个是为我们提供默认值而设置的.然后我们看下一行的代码, options = $.extend($.fn.superLight.defaults,options); 这句话是什么意思呢.如果你看了上面那篇关于extend的文章,你就会知道,这个其实是起到了合并的作用,如果你提供了一个options 参数,那么它将会覆盖掉原来的默认值,如果没有提供的话,就使用我们默认提供的那个.这样做的好处就是能更好的管理我们的参数. 客户也可以自由的去选择需要,让我们试试看效果

1 $('h1').hide().superLight().slideDown();//省略掉参数,你会看到默认的是浅蓝色2 $('h1').hide().superLight({'color':'yellow'}).slideDown();//设置颜色.你会看到黄色的背景色3 $('h1').hide().superLight({'color':'yellow','duration':5000}).slideDown();//你会看到颜色逐渐的变成粉红色

很棒吧,这样我们我们把更多的选择让给了客户,他们可以自由的去选择,接着我们得来收尾了,我们要完善这个插件,我们需要给这个插件一个回调函数,就是说,在执行完这个效果之后,需要执行一个函数.就是这样,现在我们学会了怎么设置默认参数了所以现在要添加一个功能就简单多了

第三个版本

 1 (function($){ 2     $.fn.superLight = function(options) { 3         $.fn.superLight.defaults = { 4             'color':'#fff47f',  5             'duration':'fast', 6             'complete':null     7         }; 8         options = $.extend($.fn.superLight.defaults,options); 9         $.isFunction(options.complete)||(options.complete = null);10         return this.each(function() {11             $(this)12             .data('orginColor',$(this).css('backgroundColor'))13             .css('backgroundColor',options.color)14             .one('mouseover',function() {15                 $(this).animate({backgroundColor:$(this).data('orginColor')},options.duration,options.complete);16             })17         })18     }19 })(jQuery)

html:

1 $('h1').hide().superLight({'color':'yellow','duration':2000,'complete':function(){$(this).css('border','1px solid black')}}).slideDown();

上面的代码只是比之前的代码新添加了一个complete而已,然后需要注意的就是$.isFunction函数的使用了,这个看名字大概就知道了,判断是不是一个函数.这里如果不是函数的话,则设置为空,防止用户传入的不是函数,然后还有要提出的一点就是,如果你是在一个点击事件(或者会影响到this上下文的指针丢失的其他事件)中使用options.complete,例如这样:.bind('click',function(){options.complete.call(this)}) 你可能需要这样使用options.complete.call(this),把this上下文绑定在这上面.这是要需要注意的地方,这样,我们的这个插件大概就写好了.

总结

到这里,我们的这种类型的插件就完成了,和上面说的一样.代码不多,可是,那些该具备的都具备了,默认参数.回调,这些都实现了,希望这篇教程能够抛砖引玉,你能写出更多的优质的插件.那时候,请告诉我,我也知道我写这篇教程,是有价值的,下一篇教程,我们将要编写另一种工具函数类的插件,让我们期待下一篇吧

ps:本篇教程的源码参考自<<jQuery菜鸟到忍者>>一书

这里是教程源码下载地址->点击下载

如果你喜欢.请关注我->这里

转载于:https://www.cnblogs.com/qq583451067/archive/2011/09/24/2188335.html