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

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

javascript html

有没有办法在同一个网页中获得两个完全隔离的javascript上下文？,javascript,html,web-component,isolation,Javascript,Html,Web Component,Isolation,考虑以下一段html代码： <html> <head> <script language="JavaScript1.5"> // sdk code // root_scripts // component1 code // component2 code </script> </head> <body> <h2>simple page</h2> Hi world

考虑以下一段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>


//sdk代码
//根脚本
//组件1代码
//组件2代码
简单页面
嗨，世界

行

component1代码

和

component2代码

可能只是不同js文件的两个包含，或者实际上是两段javascript代码，我不在乎

我试图理解在同一个页面中有多少两段代码可以被隔离。例如，假设

component1code

包含jquery和

component2code

包含react js，我包含的两个特定版本都有特定的库。这意味着一个组件可能会破坏另一个组件，它们不会被完全隔离

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

我不知道JavaScript，但您可以使用Angular和Typescript来实现这一点

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

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

我认为您可以使用单页应用程序框架（如angular）来实现解决方案。在角度上

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

编辑：您可以使用ECMA脚本模块功能进行相同的编辑

这是参考：

感谢@behzad

是的，但我希望组件1使用angular，组件2使用jquery。最难的部分是依赖关系，组件1可以使用angular version 123，组件2可以使用angular 234，这是一个有趣的问题！请你详细说明或提供一些链接，我可以研究更多？谢谢！这看起来像我想要的，我还不确定！我将研究它，非常感谢，尽管我仍然需要搜索更多关于如何隔离dom部分和隐藏一些全局变量的信息，但这将是另一个问题。你回答了我的问题，谢谢。还有影子dom用于隔离HTML和CSS。你说的“完全隔离”是什么意思？只有一个全局上下文，因此如果需要隔离，则需要正确地确定代码的范围，而不是接触全局上下文。另外，在HTML5中，

表示它是javascript。您没有添加

类型=

，也绝对没有使用

Javascript 1.5

。仅支持的两个值是

module

和

javascript

，其他任何值都是无意义的（在HTML规范的意义上），不会做任何事情。您也不使用

语言

：这是一个弃用的属性，保留了1998年的HTML风格。这是公平的，我只是举了一个HTML示例来说明，整个HTML都可以更改，我甚至不需要使用

脚本

标记。我所说的隔离，是指使用不同的java脚本依赖项拥有两段独立的代码。假设jQuery1.2和jQuery1.3不兼容，那么假设我使用jQuery1.2创建组件1，使用jQuery1.3创建组件2。我的代码很容易分离，它在我的控制之下。依赖项不是。这听起来像是在描述bundle，它将所有代码包装在自己的执行上下文中，这样它们就不会访问可能加载到页面上的任何内容。目前在JS领域有几种流行的捆绑包，不可避免的事实上是webpack（通常使用babel），而专用的es6+捆绑包是rollup。我建议你访问他们的网站，了解他们让你做什么。说清楚，这些捆绑包是为客户提供的吗？在浏览器中运行的js，不是节点js之类的，对吧？正确。您可以为客户端（=浏览器）部署构建捆绑包。