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

如果您在这两种情况下都这样做，那么它应该会产生预期的效果。如果需要，它还可以选择将两个片段放在同一个脚本标记中。