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命名空间的主要内容,如果未能解决你的问题,请参考以下文章