八、jQuery 拷贝对象、多库共存

 
 
学习来源： https://www.bilibili.com/video/BV1a4411w7Gx
 

1、jQuery 拷贝对象

如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法

语法

  $.extend([deep], target, object, [objectN])

注释

• deep：如果设为true 深拷贝，默认为false 浅拷贝
• target：要拷贝的目标对象
• object：待拷贝到第一个对象的对象
• objectN：待拷贝到第N个对象的对象
• 浅拷贝目标对象引用的被拷贝对象的地址，修改目标对象会影响被拷贝对象
• 深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象

示例

    <script>
        $(function () {
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
        })
    </script>

    <script>
        $(function () {
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); // 会覆盖targetObj 里面原来的数据
        })
    </script>

• 浅拷贝

    <script>
        $(function () {
            var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); // 会覆盖targetObj 里面原来的数据
            // 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
            targetObj.msg.age = 20;
            console.log(targetObj);
            console.log(obj);
        })
    </script>

• 深拷贝

    <script>
        $(function () {
            var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            // 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 
            $.extend(true, targetObj, obj);
            console.log(targetObj); // 会覆盖targetObj 里面原来的数据
            targetObj.msg.age = 20;
            console.log(targetObj); // msg :{sex: "男", age: 20}
            console.log(obj);
        })
    </script>

2、jQuery 多库共存

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为 jQuery多库共存。

jQuery使用$作为标识符，随着jQuery的流行，其它js库也会使用$作为标识符，但一起使用会引起冲突。所以需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这种情况被称为 jQuery多库共存。

解决方案

• 把里面的$符号统一改为jQuery。例如jQuery('div')
• jQuery变量规定新的名称：jQuery.noConflict()。例如var xx=jQuery.noConflict();

示例

    <script>
        $(function () {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($('div'));
            // 如果$符号冲突，我们就使用jQuery
            jQuery.each();
            // 让jquery释放对$控制权，让用自己决定
            var n = jQuery.noConflict();
            console.log(n("span"));
            n.each();
        })
    </script>