你能限制对加载了`<script>`标签的JS的`window`的访问吗？答案

【问题标题】：Can you restrict access to `window` for JS loaded with a `<script>` tag?你能限制对加载了`<script>`标签的JS的`window`的访问吗？
【发布时间】：2022-01-04 18:35:33
【问题描述】：

背景信息

我的团队有一个随着时间的推移变得非常庞大的 React JS 应用程序 - 因此，我们正在考虑将其分解成更小的部分。目前，我们正在考虑使用<script> 标签加载这些片段。这些部分可能由其他团队创建/管理。

我们的主（外壳、容器）应用程序使用各种第 3 方库。其中许多库在window 上创建对象（例如window.errorlibrary、window.logginglibrary 等）。此外，我们使用window.onerror 捕获未处理的异常。

其他团队可能希望使用我们正在使用的许多相同的第 3 方库。此外，他们可能还希望对代码中未处理的异常执行自己的错误处理。

问题

当您使用 <script> 标记加载 JS 时，加载的 JS 现在与主（shell、容器）应用程序具有相同的 window 对象。这意味着如果主应用程序使用window.errorlibrary，并且加载的JS有window.errorlibrary，加载的JS将覆盖原来的window.errorlibrary。使用window.onerror 定义的错误处理也会发生同样的情况。

我还测试了 webpack 5 模块联合，也出现了同样的问题（JS 共享 window 对象）。

其他信息

我知道使用<iframe>s 代替<script>s 可以解决这个问题（因为加载的JS 将在它自己的window 中执行）。我也知道我们可以协调以唯一地命名我们附加到 window 的任何对象，但这不一定适用于第 3 方库或 window.onerror 的错误处理。

我们最终可能只需要使用<iframe>s，但我想看看是否还有其他选择。

【问题讨论】：

JavaScript 模块怎么样？
我认为 JS 模块不会帮助使用全局变量，比如 window。
import 有同样的问题 - 导入的 JS 正在同一个 window 中执行，它具有相同的 window 对象。
对于window.onerror，您可以提供自己的实用程序包装器，您可以使用它来存储来自其他模块的回调，而不是让它们覆盖您创建的版本

标签： javascript webpack-module-federation

【解决方案1】：

我认为实现这一点的唯一方法是对模块进行命名空间。如果此描述适合您：

在许多编程语言中，命名空间是一种用于避免与全局命名空间中的其他对象或变量发生冲突的技术。它们对于帮助将应用程序中的功能块组织成易于管理且可以唯一标识的组也非常有用。

这很容易实现，然后我会去做。附：这是一篇关于命名空间模式的详细文章的链接： https://addyosmani.com/blog/essential-js-namespacing/

【讨论】：

这适用于我们团队/其他团队控制的任何东西，但它对将属性附加到window 的第三方库或使用window.onerror 进行错误处理没有帮助。