适应的读者:javascript
一、有必定的jquery编程基础可是想在技能上有所提高的人css
二、前端开发的程序员html
三、对编程感兴趣的学生前端
为何要学习jquery插件的编写?java
为何要学习jquery插件的编写?相信这是不少人都会有的问题,由于目前市面上的插件众多基本上知足平常的开发需求,可是我认为一下的这几点状况是必定要学会插件基础才能解决的:jquery
一、若是有这样的一种场景:假设若是你使用了一个控件,可是这个控件有缺乏了一点点的相关的功能,那么若是你不懂jquery插件编写的话,那么你就只能找其余的控件进行补充,这样就会形成冗余,若是你会修改jquery插件的话,那么这样的问题就解决了,由于你只须要修改一点点的功能就可以完成任务程序员
二、有些时候,若是你是要使用一个大型的控件(或者是框架)中的一小部分功能,那么你就须要引入整个控件(或者是框架)这样就会使系统过于庞大,解决的方法是若是像是制定一个对话框等这些简单的功能的话,那么就能够自行定义一个以达到不是太过庞大web
三、咱们能够 把经常使用的代码进行封装,方便之后进行重用编程
综上所述,通常咱们编写jquery控件是用来封装经常使用的代码,也能够对一些简单功能进行编写或者对某些功能进行改写数组
基础知识讲解:
首先要学习怎么编写jquery插件,咱们应该了解有几种调用插件的方式:
一、经过$.extend()来拓展jquery
二、经过向$.fn来想jquery添加方法
三、经过$.widget()应用jQuery UI部件工场方法建立
其中的方式1没办法调用选择器,仅仅被jQuery理解成为添加静态方法,因此咱们使用的时候不须要选中DOM对象
示例代码:
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="name.js"></script> </head> <body> <script type="text/javascript"> $.nameLength('leslie'); </script> </body> </html>
JavaScript代码:
$.extend({ nameLength:function(name){ alert(name.length); } });
运行结果以下:
其中第一种方式开发开发插件比较少见,通常的插件都是使用第二种方法进行开发的
第二种方法是:往$.fn中添加一个方法,后面所要填写的就是方法的名称
HTML代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DEMO</title> </head> <body> <div class="test" alt="No.1">这是第一段变红色的代码</div> <div class="test" alt="No.2">这是第二段变红色的代码</div> <div>这一段代码不变色</div> </body> <script type="text/javascript" src="jquery.js"></script> <script src="test1.js"></script> <script type="text/javascript"> $('.test').changeColor(); </script> </html>
JavaScript代码:
$.fn.changeColor=function(){ this.css('color','red'); $(this).append(" "+$(this).attr("alt")); }
运行的结果以下:
从上面的运行结果咱们能够得出结论:插件调用成功,可是问题来了,第二段的文字是要加上NO.2可是却加上了No.1,这个也就是直接使用方法带来的一个问题,就是会将全部的复合条件的内容都进行统一的设置,那么要怎样才能够编程No.2呢?那就须要引入一个方法来对每个复合要求的内容进行“个性化”,引入$.each()就能够解决问题了
将以上的JavaScript修改成:
$.fn.changeColor=function(){ this.css('color','red'); this.each(function(){ $(this).append(" "+$(this).attr("alt")); }) }
运行的效果以下:
第三种方式调用这里咱们先不进行讲解,待后续会由于须要jQuery UI的基础的朋友才能更好的理解,因此有机会将会在下一次写插件编程对其进行详细的解剖
链式调用
细心的你可能会发现,这样编写出来的插件不能进行链式调用的,也就是:不能出现:$('div').function1('param1').function2('param2'),那么这个问题怎么解决呢,其实很简单只须要在插件中支持能够链式调用的方法前面加上return就能够了
将上面的JavaScript修改以下就能够链式调用了
$.fn.changeColor=function(){ this.css('color','red'); return this.each(function(){ $(this).append(" "+$(this).attr("alt")); }) }
同时一个强大的插件也毫不仅仅是容许用户对其进行调用的,同时用户也能够自定义的对其进行传参,使得插件更具灵活性,这里的传参跟普通的函数传参是同样的,略过
保存用户自定义参数
先看一下下面的代码
HTML代码以下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DEMO</title> </head> <body> <div class="default">默认的样式</div> <div class="change">修改后的样式</div> </body> <script type="text/javascript" src="jquery.js"></script> <script src="test1.js"></script> <script type="text/javascript"> $('.default').fontSet(); $('.change').fontSet({ 'color':'green', 'fontSize':'20px' }); </script> </html>
JavaScript代码以下:
$.fn.fontSet=function(options){ var font={ 'color':'red', 'fontSize':'12px' }; var setting=$.extend({},font,options); return this.css({ 'color':setting.color, 'fontSize':setting.fontSize }) }
运行状况以下:
在JavaScript中的extend方法中添加{}是用来对防止用户传入的值,直接覆盖掉默认的数值
注意:在插件中的定量必须为键值对数组,不然一旦编写错误的话,那么就会出现没办法将插件加载进来的状况
面向对象插件开发
在开发大型的插件的时候,若是直接像上面的这种方法同样,那么会致使代码混乱,管理难度大等诸多的问题,因此就须要像常规编程同样使代码更便于管理,所以面向对象的插件开发也就变得格外的重要,面向对象开发的大体格式能够以下所示:
//定义对象的构造函数 var class_name=function(ele,opt){ this.element=ele; this.defaults={ //default setting }; this.options=$.exetend({},this.defaults,opt); } //定义对象的方法 class_name.prototype = { method_name:function() { return ………… } }; //在插件中使用对象 $.fn.plugin=function(){ //建立func实体 var func=new class_name(this,options); //调用其方法 return func.method_name(); }
实战开发经验分享
目前市面是的插件编程琳琅满目,可是惟独对开发经验这一块说的比较少,下面就结合我对插件开发的经验以及其余人开发的优秀特色惊醒分析,但愿读者能够收获一些东西,方便之后的使用
一、在插件开发的过程当中咱们要尽可能的保证插件内部环境的独立性,也就是说内部尽可能的不被外界干扰,这时候闭包就派上用场了,并且在闭包的前面要加上; 以防止外部的语法错误使得错误指向插件内部
基本格式以下:
;(function($){ //main contain })(jQuery);
二、开发中常见的方法
find(‘m’);//主要用法是获取每一个控件下面是否存在特定class属性或者id属性的对象
each() //主要是用来遍历每一个控件
each(options,function(key,value)) //获取在options范围内每次循环的key和value的值
each(function(i,item)) //i为遍历对象位于第几个,item为DOM
三、因为jquery 插件是基于jquery的,那么就要求咱们要调用jquery插件以前要先调用jquery
四、对于像KO(knockout.js)等这些脚本支持自定义的属性值,这又是怎样作到的呢?
例如HTML代码中有data-name这个属性,那么咱们能够在插件中定义一对默认的键值对为name:'xxx',而后通遍历全部的default中的key值,而且调用attr属性查找
是否存在data-key这个属性,若是这个属性为undefined那么就将其传入value,可是上面的这些插件都是要调用JS进行激活的
若是有哪位大神知道怎样编写像Boostrap这样的直接写class就能够的插件,请告诉我实现方法,小菜鸟不胜感激
五、在插件开发的过程当中我发现,怎样在一个事件触发的同时触发另外一个事件
例如:要实现拖动的效果,那么咱们就必须在触发点击事件的同时触发鼠标移动事件,
实现的代码简单的能够写为:
btn.mousedown(function(event) { /* Act on the event */ $(document).mousemove(function(event){ //input your content }) });
这样就能够实现两种事件同时触发了
六、兼容性问题也是要注意的,在CSS3中咱们要注意IE、FixFox、Chrome这些浏览器之间的兼容性问题,通常咱们忽略IE的那些低版本的浏览器,而要在FixFox前面加上-moz,例如:-moz-box-shadow 而要在Chrome前面加上-webkit,对于Safari也是同样的,这种差别主要是内核的不一样致使的
UI插件的编写流程
一、先要对所要制做的UI插件进行分析,而后对其进行分层,接着就编写对应层次的div
二、第二步,咱们要经过编写css达到将控件的初始化状态制做出来
三、结合要实现的效果,制做JS脚本,而且要保证无误的状况下才能进行第四步
四、将JS文件经过插件编程的形式重写,这样UI插件就完成了