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

Question

考虑以下 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 可能只是 2 个包含到不同的 js 文件，或者实际上是 2 段 java 脚本代码，我不在乎。

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

假设两个组件都必须访问此 html 中的 dom 元素（所以我猜 iframe 不是一个真正的选择），是否有创建完全隔离的好方法java脚本"environment"每段代码？就像 2 个不同的范围，有自己的导入，它们不会相互冲突，但仍然能够成为同一个 html 页面的一部分？

Answer 1

我不知道 JavaScript，但您可以使用 Angular 和 Typescript 来做到这一点。

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

Answer 2

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

Answer 3

我认为您可以选择像 angular 这样的单页应用程序框架作为您的解决方案。在angular,

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

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

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

感谢@behzad

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

Is there a way I can get 2 completely isolated javascript contexts inside a same web page?

javascript

html

web-component

isolation