资讯专栏INFORMATION COLUMN

jquery.extend

wfc_666 / 2016人阅读

摘要:实现所需要的功能性函数判断是不是函数在有些浏览器会返回所以判断是不是节点创建一个计划对象代理访问的时候可以节省代码方法注意是函数的方法,而不是方法函数转成字符串代理拷贝计划对象方法判断是否为计划对象在当前页面内追加换行标签和指定的内容在中返

jquery extend

实现extend 所需要的功能性函数

        // 判断是不是函数
        function isFunction(obj) {
            // Support: Chrome <=57, Firefox <=52
            /* 
                在有些浏览器 typeof document.createElement( "object" ) 会返回function 
                所以判断是不是dom 节点
            */
            return typeof obj === "function" && typeof obj.nodeType !== "number";
        };
        // 创建一个计划对象
        let class2type = {};
        // 代理 hasOwnProperty 访问Object.hasOwnProperty的时候可以节省代码
        let hasOwn = class2type.hasOwnProperty;
        // hasOwn toString方法 注意是函数的toString方法,而不是{}toString 方法
        let fnToString = hasOwn.toString;
        // Object() 函数转成字符串 "function Object() { [native code] }"
        let ObjectFunctionString = fnToString.call(Object);
        // 代理
        let getProto = Object.getPrototypeOf;
        // 拷贝计划对象方法
        toString = class2type.toString;

        // 判断是否为计划对象
        /* 
            //在当前页面内追加换行标签和指定的HTML内容
            function w( html ){
                document.body.innerHTML += "
" + html; } w( $.isPlainObject( { } ) ); // true w( $.isPlainObject( new Object() ) ); // true w( $.isPlainObject( { name: "CodePlayer"} ) ); // true w( $.isPlainObject( { sayHi: function(){} } ) ); // true w( $.isPlainObject( "CodePlayer" ) ); // false w( $.isPlainObject( true ) ); // false w( $.isPlainObject( 12 ) ); // false w( $.isPlainObject( [ ] ) ); // false w( $.isPlainObject( function(){ } ) ); // false w( $.isPlainObject( document.location ) ); // false(在IE中返回true) function Person(){ this.name = "张三"; } w( $.isPlainObject( new Person() ) ); // false window false new Date false */ function isPlainObject(obj) { var proto, Ctor; // obj false,或者obj不是对象,排除null和undefined 否则getProto(obj) 报错 if (!obj || toString.call(obj) !== "[object Object]") { return false; } proto = getProto(obj); // 如果是对象但是没有原型则是由 Object.create( null ) 创建 if (!proto) { return true; } // 原型的构造函数是 Object(),则为计划对象 Ctor = hasOwn.call(proto, "constructor") && proto.constructor; return typeof Ctor === "function" && fnToString.call(Ctor) === ObjectFunctionString; }

extend 代码分析

    // extend 代码分析
    var jQuery = {};
    /* 
        jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象。
        jQuery.extend( [ deep ], target , object1 [, objectN... ] )
    */
    jQuery.extend = jQuery.prototype.extend = function () {
        // 定义后边用到的变量
        var options, name, src, copy, copyIsArray, clone,
            // 第一个参数为目标对象
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            // 是否为深拷贝
            deep = false;

        // 深度拷贝
        /* 如果第一个参数为布尔值则代表深拷贝 */
        if (typeof target === "boolean") {
            deep = target;

            // Skip the boolean and the target 将第二个参数设置为目标对象
            target = arguments[i] || {};
            i++;
        }

        // 参数不是对象的情况
        if (typeof target !== "object" && !isFunction(target)) {
            target = {};
        }

        // 如果只有一个参数或者两个参数且第一个参数为 deep  扩展自身
        if (i === length) {
            target = this;
            i--;
        }

        for (; i < length; i++) {

            // 参数不是null 或者undefined
            /* 
                null == undefined // true
                null == null // true
            */
            if ((options = arguments[i]) != null) {

                // 扩展对象
                for (name in options) {
                    src = target[name];
                    copy = options[name];

                    /*
                        target = {a:1,b:2}
                        options = {
                            test: target
                        }
                        target.test = target; //会出现无法遍历
                    */
                    if (target === copy) {
                        continue;
                    }
                    // 判断是深拷贝,且copy为数组或者计划对象
                    /* 
                        计划对象
                        { } new Object()
                    */
                    if (deep && copy && (jQuery.isPlainObject(copy) ||
                        (copyIsArray = Array.isArray(copy)))) {
                        // 数组
                        if (copyIsArray) {
                            copyIsArray = false;
                            clone = src && Array.isArray(src) ? src : [];

                        } else {
                            // 对象
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }

                        // Never move original objects, clone them
                        target[name] = jQuery.extend(deep, clone, copy);

                        // Don"t bring in undefined values // 如果拷贝值为null/undefined 则不拷贝
                    } else if (copy !== undefined) {
                        target[name] = copy;
                    }
                }
            }
        }

        return target;
    };

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99774.html

相关文章

  • 浅谈jQuery.extend()和jQuery.fn.extend()

    摘要:在中并没有类的概念,不过为了好解释或者是思想上的统一。这样的话,不论是男人,女人,人等能继承这个技能方法了。这样就可以将进行合并,然后将合并结果返回给了。 最近在看一些jQuery的插件源码,发现了jQuery.extend()和jQuery.fn.extend()两个方法在插件中用到的频率非常高,在网上查询了下,说的要么是不清楚,要么就是不好理解。基于此,我写下自己的一些看些,希望大...

    EasonTyler 评论0 收藏0
  • jQuery源码分析3-jQuery对象的扩展--extend

    摘要:的指向的是对象,所以此时扩展的是对象,可以直接通过的方式调用。 写过jquery插件的人都知道可以通过jquery提供的extend可以对jquery对象进行扩展,而且该方法不仅可以对jquery对象扩展,还能给一个对象添加新的属性和方法,这个在后面会介绍。 通过不同的方式调用extend扩展的方法也不同: 通过 $.extend() 扩展的是静态方法; 而通过 $.fn.exten...

    MonoLog 评论0 收藏0
  • 详解 Jquery extend() 和Jquery.fn.extend()

    摘要:文档上的解释将一个或者多个对象扩展一个新对象,返回一个新的对象是否深度克隆对象,将要扩展到的新对象,待合并到新对象的第一个对象,待合并到新对象的第个对象例将合并到作为一个新对象,此时输出的所输出内容将是两个对象属性集合,我们之所以这么做,可 Jquery extend() API文档上的解释:将一个或者多个对象扩展一个新对象,返回一个新的对象 $.extend([deep],targ...

    hlcfan 评论0 收藏0
  • jQuery源码分析-整体架构(转)

    摘要:文章出处拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。利用下的简单工厂模式,来将所有对于同一个对象的操作指定同一个实例。所以的中提供了以上中扩展函数。 文章出处 http://www.cnblogs.com/aaronjs/p/3278578.html 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,...

    voidking 评论0 收藏0
  • 手把手教你JQuery插件的写法和规范

    摘要:示例合并和,修改并返回。例如我们插件里面需要有个方法来检测用户调用插件时传入的参数是否符合规范。私有方法,检测参数是否合法调用调用调用者覆盖插件暴露的共公方法调用自定义高亮插件 本文实例讲述了jQuery插件编写步骤。分享给大家供大家参考,具体如下: 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jq...

    Alex 评论0 收藏0
  • jQuery源码学习之extend

    摘要:源码学习之用于合并对象,可选择是否深复制。尽管官方文档明确指出第一个参数是的调用情况并不支持,但是这个版本的源码中,判断第一个参数的类型虽有限定是类型,但却未对其值真假加以限定。调用方式源码和指向同一个函数,在函数内部,对调用情况进行区分。 jQuery源码学习之extend $.extend用于合并对象,可选择是否深复制。使用时,第一个参数为合并后的对象。如果要进行深拷贝,则参数1为...

    quietin 评论0 收藏0

发表评论

0条评论

wfc_666

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<