Javascript - 在不同脚本中分隔变量

Question

我已经写了一些脚本。 但是，不同脚本内的变量在导入时肯定会相互冲突

我的脚本中的一些示例

以下是脚本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>

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

这是我的问题。是否可以将它们分开而不需要修改名称？我知道存在一些设计模式，但我怎样才能实现这一点？

我一直在这些脚本中对各种“对象”使用原型(prototype)模式，但当我必须将其应用于整个脚本时，我不知道该怎么做。是否可以嵌套原型(prototype)？

Answer 1

JavaScript 中变量的作用域(上下文)是通过函数来​​解析的。

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

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

实际上，您隐式地这样做:

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

为了防止变量被读取，您可以将变量包装在我们所说的立即调用函数表达式(IIFE)中，它充当闭包:

它基本上是用括号包裹一个函数，并将整个 block 视为函数名称，我们添加括号以直接执行代码(否则您将需要调用该函数)

<script>

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

</script>

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

这样你就可以做这样的事情；

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

如果想要两个闭包进行通信，可以将变量传递给window 并在另一个闭包中抓取它

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

以(一种微小的)更简洁的方式，您可以将变量传递给闭包:

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

最后，所有注入(inject)到 html 中的脚本都将作为主全局变量窗口 因此，这意味着上面的所有这些片段可以位于同一个 html 文件中，也可以位于单独的 js 文件中，但要注意文件的包含顺序，对于使用外部变量的闭包，要在包含的文件中实例化变量之前；

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

像这样:

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

可以这样在其他地方使用:

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

我希望这能起作用；