Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

3,969

jQuery:插件开发

  • 2013-05-15
  • 暂无评论

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数据格式的原因一致。
  1. deep:为boolean,true为深度嵌套后面的对象
  2. target:为待修改对象
  3. object1~objectN:为合并到带修改对象的其他对象
  4. jQuery.extend(object)是以上方法的简单调用,实现对jQuery自身对象的功能扩展
  5. jQuery.fn.extend(object)也是以上方法的简单调用,实现对文档元素对象的功能扩展
  6. 分析下就可以很容易的理解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对象的功能扩展)



back up ↑

无觅相关文章插件,快速提升流量