章节
问答
课签
笔记
评论
占位
占位

插件接口的设计

        如果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上了。当然在这个附加的过程中我们还可以做数据过滤、深拷贝等一系列的操作了。

任务

?不会了怎么办
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / qq_纵我不往子宁不来_0
多写一点demo,看一下别人的demo,看一下一些常用的jquery三方插件代码。

已采纳回答 / wusyd1063
情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。  情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。  情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象this永远指向的是最后调用它的对象,也就是看它...

最赞回答 / 善始者实凡
arguments[i][name]表示的是 函数参数的属性,对象属性调用使用超过1次就需要用变量替代。因为使用对象属性很耗性能。

最赞回答 / wghusw
我来回答一下吧,是我个人的理解,不知正确与否,希望 @Aaron 可以纠正,关于“如果没执行if中的语句,那for循环中就从arguments[1]开始了,那arguments[0]没有得到扩展啊?”这个问题,样例代码中,如果执行extend时,传入的参数个数大于1,也就是第一个if判断失败的时候,我们应该可以得知使用者是针对某个具体的target(也就是arguments[0]对象)的扩展处理,随后的for循环直接跳过arguments[0]是合理的。老师的想法很巧妙...

已采纳回答 / 艾伦Aaron
js是动态语言,所以上文是都可以被改变的,而不是传统语言那种那个调用就是指向谁,具体你可以看看javascript语言精粹
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言