首页 > 代码库 > JS命名空间

JS命名空间

2024-08-29 13:08:39   221人阅读

命名冲突

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

结果：

xxxxxxxooooooo

注意：

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

JS命名空间


联系
我们