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

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

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

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

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

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

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

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

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

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

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

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

感谢@behzad