多<script> tags each with its own scope

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

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