将 JS 与同一 HTML 文档中的其他 JS 隔离答案

【问题标题】：Isolating JS from other JS in the same HTML document将 JS 与同一 HTML 文档中的其他 JS 隔离
【发布时间】：2015-08-12 14:27:54
【问题描述】：

考虑这段代码：

<script>var foo = 'bar';</script>
<div id='isolated'>
    <script>console.log(foo)</script>
</div>

这会将'bar' 返回到控制台。但是，我希望 foo 和在 #isolated 之外声明的任何其他变量在其中声明为 undefined。

如何做到这一点？一个跨浏览器、轻量级和原生的解决方案将是更可取的。

【问题讨论】：

【解决方案1】：

这不是 JavaScript 的工作方式。由于 HTML 元素块，它本身没有作用域。

您在全局范围内声明foo，只需在仅在需要时使用的范围内声明它。使用 ES6 (Harmony)，使用 let 而不是 var（建议，不完全支持）来声明变量建议使用块级变量而不是全局范围变量。

然而，就目前而言，JavaScript 不知道 foo 被记录在隔离的 div 中，除非您使用一些逻辑。

【讨论】：

【解决方案2】：

尝试将代码封装在函数的第一个 <script></script> 标记之间。

<script>(function fn(){var foo = 'bar';})();</script>
<div id='isolated'>
    <script>console.log(foo);</script>
</div>

这将导致您声明的任何变量都存在于该函数的上下文中。在此函数之外将无法访问它们。

【讨论】：

【解决方案3】：

如果您在 iframe 中加载隔离代码并将代码托管在不同的域中，则范围将被分开。然后，您可以通过跨文档消息服务 (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 在父级和 iframe 之间来回传递消息

【讨论】：