首页 > Web开发 > 详细

jQuery插件接口的实现

时间:2016-01-13 19:36:21      阅读:113      评论:0      收藏:0      [点我收藏+]

http://www.imooc.com/code/3403

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

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

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

  ?  一种是挂在jQuery命名空间下的全局函数,也可称为静态方法;

  ?  另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

分别是$.fn.extend()和$.extend()
//一个参数
$.extend({
        fn1: function(){
            console.log("fn1");
        }
    });
    $.fn1();//fn1,加的实例方法
    $.fn.extend({
        fn2: function(){
            console.log("fn2");
        }
    });
    var div = $("#Odiv");
    div.fn2();//fn2,加的静态方法
//多个参数
$.extend({name:"ss"},{age:11})
Object {name: "ss", age: 11}
$.fn.extend({name:"ss"},{age:11})
Object {name: "ss", age: 11}

简单来讲这样实现:

ajQuery.extend = ajQuery.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;
    }

 

jQuery插件接口的实现

原文:http://www.cnblogs.com/darr/p/5128062.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!