jQuery拷贝对象与多库共存

jQuery

jQuery拷贝对象与多库共存

1. 拷贝对象

1.1 介绍

image-20230327235147800

1.2 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
    <script>
        $(function () {
            // 如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法
            // 语法：
            // $.extend([deep], target, object, [objectN])
            // 1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
            // 2. target: 要拷贝的目标对象
            // 3. object1:待拷贝到第一个对象的对象。
            // 4. objectN:待拷贝到第N个对象的对象。
            // 5. 浅拷贝目标对象引用的"被拷贝的对象地址"，修改目标对象会影响被拷贝对象。
            // 6. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。

            // var targetObj = {}
            // var obj = {
            //     id: 1,
            //     name: 'andy'
            // }
            // $.extend(targetObj, obj)
            // console.log(targetObj);

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

            var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            }
            var obj = {
                id: 1,
                name: 'andy',
                msg: {
                    age: 18
                }
            }
            // $.extend(targetObj, obj)//会覆盖targetObj里面原来的数据
            // console.log(targetObj);
            // 5. 浅拷贝目标对象引用的"被拷贝的对象地址"，修改目标对象会影响被拷贝对象。
            // 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
            // // targetObj.msg.age = 20
            // console.log(targetObj);
            // console.log(obj);

            // 6. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。
            $.extend(true,targetObj, obj)
            targetObj.msg.age = 20
            console.log(targetObj);//msg:{sex: '男',age: 20}
            console.log(obj);

        })
    </script>
</body>

</html>

2. 多库共存

2.1 介绍

image-20230327235237585

2.2 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
    <div></div>
    <script>
        // 问题概述：
        // jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。
        // 客观需求：
        // 需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

        // jQuery 解决方案：
        // 1. 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
        // 2. jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();

        $(function () {
            function $(element) {
                return document.querySelector(element)
            }
            // $('div').each()//报错，因为自定义的函数里没有此方法
            console.log($('div'));

            // jQuery 解决方案：
            // 1. 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
            jQuery.each()
            // 2. jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();
            var ziDingYi=jQuery.noConflict();
            ziDingYi('div').html('321321');
        })
    </script>
</body>

</html>

3. jQuery插件

image-20230327235310933

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~