多个 <script> 标签，每个标签都有自己的范围

Question

我需要以编程方式生成多个 <script> 标签，每个标签都几乎相同，只是参数不同。例如：

<script>
    function foo() { console.log('1'); }
    /* lots of very complicated code which calls foo() */
</script>

<script>
    function foo() { console.log('2'); }
    /* lots of very complicated code which calls foo() */
</script>

在此示例中，第一个脚本的参数值为“1”，因此其生成的代码将“1”打印到控制台，而第二个脚本的参数值为“2”。

我知道到目前为止这个问题会冒犯很多优秀程序员的感情。这当然大大简化了，出于超出此问题范围的原因，我需要这样做。

据我了解，这些 <script> 标记将共享全局范围，因此它们的 foo 实现会发生冲突。一种解决方法是分别命名它们，例如foo1 和 foo2。实际上我有很多这样的功能，我想知道是否有更好的方法。

有没有什么好的方法可以将每个 <script> 标记包含在其自己的范围内，从而使 foo 的实现不会发生冲突？我更愿意在没有任何单独的库或预处理等的情况下执行此操作 - 仅使用原生 JavaScript.

Answer 1

我认为做你想做的事情的唯一方法是将你的代码包装在一个自执行函数中

<script>
(function () {
    function foo() { console.log('1'); }
    /* lots of very complicated code which calls foo() */
})();
</script>

<script>
(function () {
    function foo() { console.log('2'); }
    /* lots of very complicated code which calls foo() */
})();
</script>

如果你在这两种情况下都这样做，那么它应该会达到预期的效果。如果可以的话，它还可以选择将两个片段放在同一个脚本标签中。

Answer 2

如果您的问题更复杂并且出于某种原因您想要分离命名空间，您可以创建对象。

<script>
var scope1 = (function (){
  return{
    foo: function () {console.log('1');}
  }
})();
</script>

<script>
var scope2 = (function (){
  return{
    foo: function () {console.log('2');}
  }
})();
</script>

然后（在全局范围内使用）：

scope1.foo(); //prints 1
scope2.foo(); //prints 2

我不知道你问题的所有方面，希望你找到最好的解决方案:)

多个 <script> 标签，每个标签都有自己的范围

Multiple <script> tags each with its own scope

javascript