Javascript - 在不同的脚本中分离变量

时间:2014-11-11 16:09:31

标签: javascript design-patterns

我已经编写了很少的脚本。 但是,不同脚本中的变量在导入时肯定会相互冲突

我脚本中的一些例子

以下是脚本A

<script>
     var vx = 0;
     var vy = 0;
     var d = null;
     function init() { ...}
     function CommentBox() { ... }
     CommentBox.prototype.create = function() { ... }
</script>

以下是脚本B

<script>
     var vx = 0;
     var vy = 0;
     var x = 0;
     var y = 0;
     var p = null;
     function init() { ...}
     function Ball() { ... }
     Ball.prototype.create = function() { ... }
</script>

导入后,变量和方法肯定会相互冲突。

这是我的问题。是否可以将它们分开而无需修改名称?我知道存在一些设计模式,但我怎样才能做到这一点?

我一直在使用原型模式用于各种&#34;对象&#34;在这些脚本中,但是当我必须将它应用于整个脚本时,我不知道该怎么做。还有可能有嵌套的Prototype?

1 个答案:

答案 0 :(得分:1)

变量(上下文)的范围,在javascript中通过函数解析。

如果您以这种方式创建变量:

<script>
var a = 10;
</script>

实际上你隐含地做了:

<script>
   window.a = 10;
</script>

如何保护变量不被读取是将变量包装在我们称之为立即调用的函数表达式(IIFE)中,它充当闭包:

它基本上用括号包装一个函数,并将整个块视为函数名称,我们添加括号直接执行代码(否则你需要调用函数)

<script>

 (function(){
    var a = 10;
 })();

</script>

以这种方式创建变量,而不是通过窗口使变量可用。 它只会在闭包内部创建变量,并且只要闭包在对象堆栈中处于活动状态就会存在。

这样你可以做这样的事情;

<script>
 (function(){
    var b = 20;
    var a = 10;
    window.c = 40;
 })();
</script>

如果要两个闭包进行通信,可以将变量传递给窗口 并在另一个关闭中抓住它

<script>
 (function(){
    var d = window.c + 5; //prints 45
 })();
</script>

以(一点点)清洁方式,您可以将变量传递给闭包:

<script>
 (function(c){
   var d = c + 10; //prints 50
 })(window.c);
</script>

最后,在html中注入的所有脚本都将作为主要的全局变量窗口 所以这意味着上面的所有这些片段可以在同一个html文件中,或者在单独的js文件中,注意包含文件的顺序,但对于使用外部变量的闭包,要在包含的文件中实例化变量前;

(PS:当共享变量时,还有其他做法,例如创建一个附加到窗口的变量 并将此变量用作应用程序的主变量(而不是使用窗口))

类似的东西:

(function(){
  var window.App = {};
})();

可以通过这种方式在其他地方使用:

(function(App){
    App.test = "something";
})(window.App);//or App

我希望这有效;