jQuery:插件开发
jQuery实现了一定结构的面向对象,jQuery中有2类方法:
- 实例方法:
$(‘xxx’).function();
- 静态方法:
$.function();
2类方法可以通过jQuery提供的2个接口实现功能的扩展,也就是插件开发
- 实例方法:
jQuery.fn.extend(object)
- 静态方法:
jQuery.extend(object)
jQuery.extend([deep],target,object1,[objectN])
:用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。
- 该功能主要是利用js的内置特性实现对象的合并。
- Js中的所有对象都可以写成{}的格式,无论是函数还是属性,js本身并不区分,这点和js默认支持json数据格式的原因一致。
- deep:为boolean,true为深度嵌套后面的对象
- target:为待修改对象
- object1~objectN:为合并到带修改对象的其他对象
- jQuery.extend(object)是以上方法的简单调用,实现对jQuery自身对象的功能扩展
- jQuery.fn.extend(object)也是以上方法的简单调用,实现对文档元素对象的功能扩展
- 分析下就可以很容易的理解jQuery的插件开发原理
在JS中有个很重要的概念:闭包
var i = 1; for(true;i<=5;i++){ $('#id'+i).click(function(){ alert(i); }); } Alert(i);//这里输出i是6
以上代码给html中id1~id5分别绑定了单击操作,单击后弹出对话框输出变量i
Id1~id5的输出都会一致,都是6
在单击操作发生的时候i作为一个全局变量,它的值是6
我们实际是需要每次输出的都是id对应的i值,也就是1,2,3,4,5,这种情况下就需要用闭包来实现,把上述例子修改下:
var i = 1; for(true;i<=5;i++){ function_alert(i);//替换成函数作为内部循环体 } function function_alert(i){//每次循环将i当成参数 $('#id'+i).click(function(){ alert(i); }); }
函数参数只有函数内部能使用,绑定单击操作的时候,输出的变量是函数内部的参数,而不是一个全局变量,这个就是闭包的利用。
- 闭包的定义(官方):指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分
- 实现方式:在一个a函数内部建立b函数,b函数调用a函数内部的变量
- 在js中闭包的现象实现了:变量的持久存在
js中多数为后置操作,预先绑定,就需要在循环中的值能进行保留 把闭包理解为一个完整的环境,在开发中可以减少对全局环境的命名污染,避免程序冲突
闭包产生的原因和垃圾回收有关
- 通常函数在执行完毕后会回收全部的函数内变量,但因为函数内部还有其余函数对该函数内的变量有调用,导致垃圾回收不去进行该函数的垃圾回收操作
- 如果理解引用计数的垃圾回收机制,就很容易理解该特性。
在插件开发中最重要的就是避免冲突,js中没有命名空间,所以jQuery的开发中通常使用闭包的方式来进行插件开发 格式:
(function($){ //插件代码 })(jQuery);
基本的插件开发的格式
等同于:var jq = function($){};jq(jquery);
利用了闭包将jQuery对象传入函数内,并用$
替代jQuery
的调用,如此函数内对$
的修改也会更改外部的jQuery
对象,因为jQuery功能的实现全部都体现在jQuery这个对象上,所以这种方式用于实现插件开发(jQuery的插件开发就是基于对jQuery对象的功能扩展)