多个 <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>

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