有没有办法可以在同一个网页中获得 2 个完全隔离的 javascript 上下文？答案

【问题标题】：Is there a way I can get 2 completely isolated javascript contexts inside a same web page?有没有办法可以在同一个网页中获得 2 个完全隔离的 javascript 上下文？
【发布时间】：2019-06-30 17:05:54
【问题描述】：

考虑下面这段 html 代码：

<html>
<head>
<script language="JavaScript1.5">
    // sdk code

    // root_scripts

    // component1 code

    // component2 code
</script>
</head>
<body>
<h2>simple page</h2>
Hi world

<div id="root"></div>

</body>
</html>

component1 code 和 component2 code 行可能只是不同 js 文件的 2 个包含，或者实际上是 2 段 javascript 代码，我不在乎。

我试图了解在同一页面中可以隔离多少 2 段代码。例如，假设component1 code 包含 jquery，component2 code 包含 react js，并且我包含的 2 个特定版本具有特定库。这意味着一个组件可能会破坏另一个组件，并且它们不会被完全隔离。

假设两个组件都必须访问这个 html 中的 dom 元素（所以 iframe 并不是一个真正的选择，我猜），有没有一种好方法可以为每段代码创建一个完全隔离的 java 脚本“环境” ?就像 2 个不同的作用域，它们有自己的导入并且它们不能相互冲突，但仍然能够成为同一个 html 页面的一部分？

【问题讨论】：

“完全孤立”是什么意思？只有一个全局上下文，所以如果你需要隔离，你需要正确地确定你的代码范围，而不是接触到全局上下文。此外，在 HTML5 注释中，<script> 表示它是 javascript。您不添加type=，并且您绝对不使用Javascript 1.5。唯一支持的两个值是module 和javascript，其他任何值都是没有意义的（在 HTML 规范意义上）并且不会做任何事情。您也不要使用 language：这是一个已弃用的属性，并且是 1998 年 HTML 风格的延续。
那是公平的，我只是举了一个例子html来说明，整个html可以改变，我什至不需要script标签。通过隔离，我的意思是使用不同的 java 脚本依赖项拥有 2 段独立的代码。所以想象一下，假设 jquery 1.2 和 jquery 1.3 不兼容，我将使用 jquery 1.2 创建组件 1 和使用 jquery 1.3 创建组件 2。我的代码很容易隔离，它在我的控制之下。依赖项不是。
这听起来像你在描述包，它们将所有代码包装在它们自己的执行上下文中，这样它们就不会进入任何可能加载到你页面上的东西（其他）。目前在 JS 领域有几个流行的打包器，事实上不可避免的一个是 webpack（通常带有 babel），专用的 es6+ 打包器是 rollup。我建议您访问他们的网站并阅读他们让您做什么。
要明确 - 这些捆绑包是用于客户端部分的吗？运行在浏览器中的js，不是nodejs什么的，对吧？
正确。您为客户端（=浏览器）部署构建捆绑包。

标签： javascript html web-component isolation

【解决方案1】：

我不了解 JavaScript，但您可以使用 Angular 和 Typescript 做到这一点。

使用 Angular 4 及更高版本，您可以在不同的组件中运行完全独立的脚本。

【讨论】：

是的，但我希望组件 1 使用 angular，组件 2 使用 jquery。困难的部分是依赖关系，组件 1 可以使用 Angular 版本 123，组件 2 可以使用 Angular 234
有趣的问题！

【解决方案2】：

2015 年的 JavaScript 标准引入了自己的不同模块系统。它通常被称为 ES 模块，其中 ES 代表 ECMAScript。您无需调用函数来访问依赖项，而是使用特殊的 import 关键字。

【讨论】：

能否请您详细说明或提供一些我可以进一步研究的链接？
谢谢！这看起来像我想要的，我还不确定！我会研究它，不过非常感谢
我仍然需要搜索更多关于如何隔离 dom 部分和遮蔽一些全局变量的信息，但这将是另一个问题。你回答了我要找的东西，谢谢。
是的。也有用于隔离 HTML 和 CSS 的 shadow-dom。

【解决方案3】：

我认为您可以为您的解决方案选择像 Angular 这样的单页应用程序框架。在角度，

您只需为 comp1 和 comp2 创建两个不同的组件，除非您让它们使用共享服务或父子交互进行交互，否则它们将相互隔离。

编辑：您可以使用 ECMA 脚本模块功能。

这是参考：https://medium.freecodecamp.org/how-to-use-ecmascript-modules-to-build-modular-components-in-javascript-9023205ea42a

感谢@behzad

【讨论】：