jQuery源码分析14--get与eq的区别

来源:互联网 发布:linux dhcp命令 编辑:程序博客网 时间:2024/05/18 15:27

插件接口的设计

        如果jQuery没有插件接口的设计,那么他就像个光杆司令没有兵,就是没有手下,只有自己一个封闭的城堡。因此jQuery城堡需要设计一个大门 - 插件接口,从而打开大门开始招兵买马。当然jQuery除了获得“开发者社区”的大力支持外,也有很多大公司纷纷对它投出了橄榄枝,这也是它成功的关键。

        基于插件接口设计的好处也是颇多的,其中一个最重要的好处是把扩展的功能从主体框架中剥离出去,降低了框架的复杂度。接口的设计好比电脑上的配件如:CPU、内存、硬盘都是作为独立的模块分离出去了,但是主板提供模块的接口,例如支持串口的硬盘,我只要这个硬盘的接口能插上,甭管是500G还是1000G的容量的硬盘,都能使用。所以在软件设计中插件接口的提供把独立的功能与框架以一种很宽松的方式松耦合。

从之前的分析中我们可以知道jQuery对象的原理,所以一般来说,jQuery插件的开发分为两种:

  ☑  一种是挂在jQuery命名空间下的全局函数,也可称为静态方法;  ☑  另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

提供的接口:

$.extend(target, [object1], [objectN])

接口的使用:

jQuery.extend({    data:function(){},    removeData:function(){}})jQuery.fn.extend({    data:function(){},    removeData:function(){}})

        jQuery的主体框架就是之前提到的那样,通过工厂模式返回一个内部的init构造器生成的对象。但是根据一般设计者的习惯,如果要为jQuery添加静态方法或者实例方法从封装的角度讲是应该提供一个统一的接口才符合设计的。

        jQuery支持自己扩展属性,这个对外提供了一个接口,jQuery.fn.extend()来对对象增加方法,从jQuery的源码中可以看到,jQuery.extend和jQuery.fn.extend其实是同指向同一方法的不同引用。

        这里有一个设计的重点,通过调用的上下文,我们来确定这个方法是作为静态还是实例处理,在javascript的世界中一共有四种上下文调用方式:方法调用模式函数调用模式构造器调用模式apply调用模式

    ☑  jQuery.extend调用的时候上下文指向的是jQuery构造器    ☑  jQuery.fn.extend调用的时候上下文指向的是jQuery构造器的实例对象了

        通过extend()函数可以方便快速的扩展功能,不会破坏jQuery的原型结构,jQuery.extend = jQuery.fn.extend = function(){...}; 这个是连等,也就是2个指向同一个函数,怎么会实现不同的功能呢?这就是this力量了!

        fn与jQuery其实是2个不同的对象,在之前有讲解:jQuery.extend 调用的时候,this是指向jQuery对象的(jQuery是函数,也是对象!),所以这里扩展在jQuery上。而jQuery.fn.extend 调用的时候,this指向fn对象,jQuery.fn 和jQuery.prototype指向同一对象,扩展fn就是扩展jQuery.prototype原型对象。这里增加的是原型方法,也就是对象方法了。所以jQuery的API中提供了以上2个扩展函数。

jQuery的extend代码实现比较长,我们简单说一下重点:

aAron.extend = aAron.fn.extend = function() {    var options, src, copy,        target = arguments[0] || {},        i = 1,        length = arguments.length;    //只有一个参数,就是对jQuery自身的扩展处理    //extend,fn.extend    if (i === length) {        target = this; //调用的上下文对象jQuery/或者实例        i--;    }    for (; i < length; i++) {        //从i开始取参数,不为空开始遍历        if ((options = arguments[i]) != null) {            for (name in options) {                copy = options[name];                //覆盖拷贝                target[name] = copy;            }        }    }    return target;}

我来讲解一下上面的代码:因为extend的核心功能就是通过扩展收集功能(类似于mix混入),所以就会存在收集对象(target)与被收集的数据,因为jQuery.extend并没有明确实参,而且是通过arguments来判断的,所以这样处理起来很灵活。arguments通过判断传递参数的数量可以实现函数重载。其中最重要的一段target = this,通过调用的方式我们就能确实当前的this的指向,所以这时候就能确定target了。最后就很简单了,通过for循环遍历把数据附加到这个target上了。当然在这个附加的过程中我们还可以做数据过滤、深拷贝等一系列的操作了。

0 0
原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 4岁宝贝拉肚子怎么办 2岁宝贝拉肚子怎么办 宝宝肠道蠕动慢怎么办 新生儿吃母乳吃不饱怎么办 小孩胃口不好怎么办呢 新生儿吃多了怎么办 宝宝奶量上不去怎么办 新生儿吃撑了怎么办 婴儿不够奶吃怎么办 产妇奶堵了怎么办 新生儿吃奶不吃奶粉怎么办 奶瓶吸奶费力怎么办 小孩上火感冒了怎么办 宝宝上火感冒了怎么办 3岁宝宝上火怎么办 上火又受凉感冒怎么办 上火引起的感冒怎么办 奶瓶排气孔漏水怎么办 奶嘴排气孔漏水怎么办 bbox吸管杯漏水怎么办 四个月宝宝拉肚子怎么办 租的房子坐月子怎么办 榨果汁不甜怎么办 宝宝不会喝奶粉怎么办 两个月宝宝不长肉怎么办 打疫苗后发烧怎么办 孕期不爱吃水果怎么办 孕期很少吃水果怎么办 三个月小孩不吃奶粉怎么办 三个月宝宝偏瘦怎么办 破壁机打果汁有沫怎么办 宝宝7个月坐不稳怎么办 婴儿头睡偏了怎么办天 宝宝不爱趴着怎么办 宝宝喜欢竖着抱怎么办 婴儿抱习惯了怎么办 新生儿总让抱着放下就哭可怎么办 三个月宝宝认人怎么办 三个月的宝宝认生怎么办 一岁半宝宝尿黄怎么办 一岁多宝宝尿少怎么办