JavaScript之三:jQuery插件开发(一)
在早期的开发中,正如前面闭包中所提到的那样,人们一开始并没有意识到要开发出插件这么个玩意儿,都是遇到啥写啥。在长期的工作中,人们发现很多代码是重复的,写了一遍又一遍,以登录页面为例,每写一次都需要重新校验username、password、email、tel等等内容,这些工作毫无意义只是简单地重复,而且大多数都是大同小异,人们开始不耐烦了,并且着手去找到一种办法,希望能够从这些简单无意义的重复劳动中解放出来。既然写这些代码不可避免,那么能否减少写这些代码的次数呢?更进一步的思考,能不能有这么一种方式,当我需要这段代码的时候,我就可以直接拿来用,哪怕只是做一点点更改也行。这样插件就应运而生了。它封装了某个功能,实现了代码的可重用性,在实际工作中可以拿来反复的使用。
一个最最简单的jquery插件只有一个函数来实现一个功能就够了,它仅仅只需要用来被重复调用。比如我的工作中要实现这么一个功能:当我点击时,改变div框中的背景颜色。这个功能在页面中需要反复被使用到,那么我就迫切地需要开发一个插件来实现它。下面是不使用任何插件的情况下,每一次页面的使用都需要重新写。
<!DOCTYPE html> <html><head><meta charset="utf-8"/><script src="jquery-1.11.3.js"></script><style>div{width:200px;height:200px;border:1px solid #000;}</style></head><script>$(function(){$("input").click(function(){$("div").css("background","#ccc"); })});</script><body><input type="button" value="动我一下试试"><br><br><div></div></body> </html>
这里将给出全部代码,下文中为避免啰嗦将只给出关键代码。当开发插件时它的插件的代码如下:
1 jQuery.fn.extend({ 2 test : function(){ 3 $(this).css("background","#ccc"); 4 } 5 })//插件名为下文的plugins.js
它的调用代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <script src="jquery-1.11.3.js"></script>//引入jquery 6 <script src="plugins.js"></script>//引入jquery插件 7 <style> 8 div{ 9 width:200px; 10 height:200px; 11 border:1px solid #000; 12 } 13 </style> 14 </head> 15 <script> 16 $(function(){ 17 $("input").click(function(){ 18 $("div").test(); //调用插件中的test()方法 19 }) 20 }); 21 </script> 22 <body> 23 <input type="button" value="动我一下试试"><br><br> 24 <div></div> 25 </body> 26 </html>
在上面的插件代码中,我们发现test()方法是嵌套在jQuery.fn.extend()中,那么这个jQuery.fn.extend()到底是什么呢?事实上,绝多大数插件都是基于它开发的,它就是大名鼎鼎的jquery对象方法插件机制,与之齐名的还有jQuery.extend(),也就是jquery全局函数插件机制。他们都被用来创建插件,在继续下文之前,很有必要来了解下二者的区别。
一、jQuery.extend()
事实上,当jQuery.extend()用来做插件开发的时候,在其参考文档中表述的是用来在jQuery命名空间上增加新函数。此处的jQuery可以理解为一个function类,对它进行extend扩展实际上就相当于给他添加一个静态方法,这个方法是扩展在jQuery类上面的,它的调用是不需要new出一个实例,而是直接采用“jQuery+方法”的形式调用,与jQuery的实例没有任何关系。借用参考文档的例子:
jQuery代码:
1 jQuery.extend({ 2 min: function(a, b) { return a < b ? a : b; }, 3 max: function(a, b) { return a > b ? a : b; } 4 });
运行结果:
1 jQuery.min(2,3); // => 2 2 jQuery.max(4,5); // => 5
二、jQuery.fn.extend()
在jQuery.fn.extend()中,从底层代码知道fn代表的是prototype,它实际上是扩展jQuery对象也就是原型prototype上的方法,既然是扩展在jQuery对象上的方法,那么就是说要jQuery对象才能调用喽。而什么是jQuery对象呢?不就是jQuery的实例吗?换个方式来说,$(selector)不就是jQuery对象吗?这正如前面的例子所述,调用的时候是$("div").test(),而$("div")是jQuery对象。
jQuery代码:
1 jQuery.fn.extend({ 2 test : function(){ 3 $(this).css("background","#ccc"); 4 } 5 })
调用代码:
$(function(){$("input").click(function(){$("div").test(); //调用插件中的test()方法 ,用的是$("div")而非$ })});
通过区别比较上面2种开发插件的方式,可以看到基于对象方法机制插件使用会广泛得多,现实中大部分都是基于对象方法开发的插件。
然而在上述例子中,那个简单的插件很快就遇到了新的问题。随着页面的复杂性增加,在代码中会引入多个库或框架,$这么火热,大家都想套套近乎沾沾光,于是大家的命名都采取了$,一个不小心,$的指代就会被第三方库或框架给覆盖了,它指代的就不再是jquery而是第三方库了。这就是jquery多库共存问题。
对于jquery多库共存问题,参考文档给出了解决方案,有时候,你不得不为一些精妙绝伦的解决方案而拍案叫绝。
一、jQuery.noConflict()
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。代码如下:
1 jQuery.noConflict(); 2 // 使用 jQuery 3 jQuery("div p").hide();//此处不再使用$而是使用jQuery 4 // 使用其他库的 $() 5 $("content").style.display = 'none';
二、创建一个新的别名用以在接下来的库中使用jQuery对象:
1 var j = jQuery.noConflict(); 2 // 基于 jQuery 的代码 3 j("div p").hide(); 4 // 基于其他库的 $() 代码 5 $("content").style.display = 'none';
三、创建一个匿名函数(function($){})(jQuery):
1 jQuery.noConflict(); 2 (function($) { 3 $(function() { 4 // 使用 $ 作为 jQuery 别名的代码 5 }); 6 })(jQuery); 7 // 其他用 $ 作为别名的库的代码
这是一个匿名函数,这个函数可以理解为这样:
1 var f= function ($){ 2 $(function(){ 3 4 }); 5 } 6 f(jQuery);
对于函数f,$作为形参,是局部变量,可以在函数内部自由滴使用$,当他被调用时,jQuery作为实参被传递进去。这样做的好处就是,函数f里定义的函数和变量仅仅在函数f里有效,$并不会与外面的$相冲突。调用执行时,jQuery会取代形参$,这样既实现了让$指代了jQuery,又避免了$之间的互相冲突,这也是使用的最多的方案。
上面的插件就该是:
1 (function($){ 2 $.fn.extend({ 3 test : function(){ 4 $(this).css("background","#ccc"); 5 } 6 }) 7 })(jQuery)
这样就创建了一个方便使用的对象方法插件,同时解决了多库共存的问题。
然而现实问题并没有这么简单,虽然完成了插件的基本功能,但是还不够,用户在长期的使用过程中,觉得不够智能,他想自定义div框的颜色,而不仅仅是灰色;同时他还想能够改变框的大小。好吧,问题又来了,但是没关系,程序员天生就是来解决问题的。
怎么办?首先想到的就是传递参数进来,给test()增加参数,这个参数可以让用户自定义,用户想怎样就怎样,这个好解决。我们来看下面代码:
1 (function($){ 2 $.fn.extend({ 3 test : function(opts){ 4 $(this).css(opts); 5 } 6 }) 7 })(jQuery)
在调用时代码如下:
$("div").test({width:"500px",background:"red"})
这样来看问题得到解决,但,这还不够完美。假如说test有许多参数怎么办?用户只想定义其中一部分参数,其他的保持不变怎么办?用户怎么知道允许自定义哪些参数?最好的解决方式无疑是:指明哪些参数用户可以去自定义,当用户需要定义某些参数时,尽管自定义好了,其他的参数不变,使用插件的默认值。
这里就有如下的解决办法:
var opts=$.extend(defaluts,opts)
$.extend() 除了可以用来创建插件之外,还可以进行对象合并,这里只讲此处需要用到的用法,更多用法参照http://api.jquery.com/jQuery.extend/,或者可以看我稍后的中文翻译http://www.cnblogs.com/liudaxia/p/4910106.html。举例来说明:
1 var Amy={2 age:20, 3 sex:gril, 4 }5 var Dale={6 age:20, 7 sex:boy 8 weight:120 9 } 10 $.extend(Amy,Dale)//此时的Amy={age:20,sex:boy,weight:120}
可以看到,Amy的属性被修改,它继承了Dale的weight属性,同时sex属性被覆盖。这对于我们要实现的功能有什么用呢?假如说,我们把默认值放在Amy的位置,把传进来的参数opts放在Dale的位置,会有什么样的效果呢?显而易见,新传进来的自定义参数属性将会被保留,而默认值的相同的属性则会用户自定义的给覆盖,这样就巧妙的实现了我们想要的效果。用上面的实例来说明,看插件代码:
jQuery.fn.extend({test : function(opts){var defaults={// 默认值设置,此处与html代码中的div的style设置保持一致。width:"200px",background:"#fff",height:"200px"}var s=$.extend(defaults,opts);// s为合并之后的属性,它是{width:"500px",background:"red",height:"200px"}$(this).css(s); } })
调用代码:
$("div").test({width:"500px",background:"red"})
最终得到的效果就是宽500高200的红色矩形。原来默认的高200属性得到保留,用户想要的改变宽和颜色的目的也达到。用户在调用的时候,想自定义哪个参数,就把哪个参数传进去,同时没被定义的属性将会被保留。
还可以对其进行优化,比如假如获取的div框不止一个,那么这个时候就需要使用each()进行遍历。甚至可以把用户不自定义参数的情况考虑进去,这些都比较简单,就不具体介绍了。那么最终的插件如下:
1 (function($){2 $.fn.extend({//下面的opts就是用户自定义的参数3 test : function(opts){//定义test()方法,这就是我们的插件。可以改写成$.fn.test=function(opts){}4 var defaults={// 默认值设置,此处与html代码中的div的style设置保持一致。5 width:"200px",6 background:"#fff",7 height:"200px"8 } 9 opts=opts||{};//opts可能为空,也就是用户没有自定义,此时使用默认值 10 var s=$.extend(defaults,opts);// s为合并之后的属性,它是{width:"500px",background:"red",height:"200px"} 11 this.each(function(){//遍历 12 $(this).css(s); //功能实现代码,也就是改变div框的宽和背景颜色 13 }); 14 } 15 }) 16 })(jQuery)
以上就是一个简单的插件的开发过程。本人也是初学,欢迎指出错误共同探讨交流共同进步,谢谢。
转载于:https://www.cnblogs.com/liudaxia/p/4905993.html
JavaScript之三:jQuery插件开发(一)相关推荐
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jQuery插件开发 - 其实很简单
[前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...
- jQuery插件开发(一):jQuery类方法
一.jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1.基于jQuery对象的插件 2.基于jQuery类的插件 二.基于jQuery类的插件 1.什么是jQuery类的插件? j ...
- 【转载】jQuery插件开发精品教程,让你的jQuery提升一个台阶
jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
- JQuery学习使用笔记 -- JQuery插件开发
内容转载自 http://www.css88.com/archives/4821 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最 ...
- jQuery插件开发教程
jQuery插件开发精品教程,让你的jQuery提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
- jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
原文:http://www.codeceo.com/article/jquery-plugin-develop.html 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我 ...
- jQuery 插件开发指南
jQuery凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧. 那么首先我们来简单 ...
- jQuery插件开发(转)
jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命 ...
- 基于jquery插件开发入门教程
鉴于最近要使用大量的jquery,所以总有一种捣鼓文字来抒发一下情绪的冲动.思前想后就来篇jquery插件开发入门教程吧,毕竟如果不想开发插件,那自己无论用别人的插件多牛逼,最多只是js的使用者,作为 ...
最新文章
- 单点登录系统用 8 张漫画就解释了
- 利用Unity自带的合图切割功能将合图切割成子图
- 线程技术 ☞ Future模式
- 运用SQLAlchemy
- 天鹅给癞蛤蟆的回信[转贴]
- 云+X案例展 | 金融类:荣之联助力君康人寿构建新一代数据中心
- 服务器和linux知识,每天学知识:Windows和Linux服务器差异
- Servlet Cookie 处理
- apache+mysql+wordpress的安装建站
- shell 函数和数组
- 2012最新网上购物排行榜
- protues 选项卡说明
- 程序员经常浏览的网站
- 在Centos7上安装vpnc客户端
- java绘图- 绘图用法(基于Graphics2D)
- HTML让元素居中显示
- Emlog程序百度熊掌号一键集成+自动推送插件
- Install successfully finished in 1 s 128 ms.: App restart successful without requiring a re-install.
- (附源码)计算机毕业设计ssm菜鸟驿站快递分发系统
- 实验1动态规划——小明打王者