JS命名空间

Posted 手里有糖

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS命名空间相关的知识,希望对你有一定的参考价值。

命名冲突

全局变量会绑定到 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

注意:

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

以上是关于JS命名空间的主要内容,如果未能解决你的问题,请参考以下文章

js命名空间

模棱两可的类命名空间问题

如何在C ++中将枚举导入不同的命名空间?

JS命名空间Netbeans变量未声明

js单例——如何避免通过命名空间访问类成员

GWT和JSInterop命名空间