JS命名空间

Posted 2020-08-25 手里有糖

命名冲突

全局变量会绑定到 window 上，不同的javascript文件如果使用了相同的全局变量，或者定义了相同名字就的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个办法，把自己的所有变量和函数全部绑定到一个全局变量中：

<script type="text/javascript">
    var MYAPP = {};  // 定义全局唯一的变量MYAPP

    MYAPP.name = \'haha\';  // 定义自己的变量

    // 定义自己的方法
    MYAPP.foo = function() {
        return \'Foo\';
    };

    // 调用方法
    ret = MYAPP.foo();
    alert(ret);
    alert(MYAPP.name);
    
</script>

说明：

这里我们将变量和方法封存在 全局唯一变量 MYAPP中，在调用其中的属性和方法的时候，必须加上唯一变量名。

这样即使内部属性和方法同名，只要前面的唯一变量名不同名，都能正常执行，不回存在命名冲突。

解决方法验证

当我们将属性和方法封存在全局 唯一变量 中，然后外面直接调用：

<script type="text/javascript">
    var MYAPP = {};  // 定义全局唯一的变量MYAPP

    MYAPP.name = \'haha\';  // 定义自己的变量

    // 定义自己的方法
    MYAPP.foo = function() {
        return \'Foo\';
    };

    // 调用方法
    ret = foo();
    console.log(ret); // 报错

    r = name;
    console.log(r); // 报错

</script>

方法

说明：

结果报错！

定义两个全局唯一变量，然后里面属性和方法同名，通过全局唯一变量名进行调用：

<script type="text/javascript">
    // 定义全局唯一的变量MYVAR01，并定义自己的属性和方法
    var MYVAR01 = {
        name: \'xxx\',

        foo: function() {
            return \'xxxx\';
        },
    };

    // 定义全局唯一的变量MYVAR02，并定义自己的属性和方法
    var MYVAR02 = {
        name: \'ooo\',

        foo: function() {
            return \'oooo\';
        }
    };

    // 调用MYVAR01的方法
    r1 = MYVAR01.name;
    console.log(r1);
    r2 = MYVAR01.foo();
    console.log(r2);

    // 调用MYAVAR02的方法
    r3 = MYVAR02.name;
    console.log(r3);
    r4 = MYVAR02.foo();
    console.log(r4);

</script>

方法

结果：

xxx
xxxx
ooo
oooo

注意：

在变量中写方法和在变量外面写方法，方式是不一样的。注意区分写法。