有没有办法可以在同一个网页内获得2个完全隔离的javascript上下文？
[英]Is there a way I can get 2 completely isolated javascript contexts inside a same web page?
问题描述
Consider the following piece of html code: 
考虑以下一段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>
The lines component1 code and component2 code could be either just 2 includes to different js files, or really 2 pieces of javascript code, I don't care. 第component1 code和component2 code可能只是2个包含到不同的js文件中，或者实际上是2个JavaScript代码，我不在乎。
I am trying to understand how much 2 pieces of code can be isolated in the same page. 我试图了解在同一页面中可以隔离多少2条代码。 For instance, suppose component1 code includes jquery and component2 code includes react js and the 2 specific versions I included have specific libraries. 例如，假设component1 code包含jquery， component2 code包含react js，而我包含的2个特定版本具有特定的库。 This means one component could break the other and they wouldn't be completely isolated. 这意味着一个组件可能会破坏另一个组件，而不会被完全隔离。
Assuming both components would have to access dom elements in this html (so iframe wouldn't really be an option, I guess), is there a good way of creating a completely isolated java script "environment" for each piece of code? 假设这两个组件都必须访问此html中的dom元素（我想iframe并不是真正的选择），是否有一种很好的方法为每段代码创建完全隔离的Java脚本“环境”？ Like 2 different scopes, with their own imports and they couldn't conflict with each other, but still being able of being part of the same html page? 就像2个不同的作用域一样，它们具有自己的导入功能，彼此之间不会冲突，但仍然可以属于同一html页面？
3 个解决方案
解决方案1
2 已采纳 2019-02-06 17:13:27
The JavaScript standard from 2015 introduces its own, different module system. 2015年的JavaScript标准引入了自己的不同模块系统。 It is usually called ES modules, where ES stands for ECMAScript. 通常称为ES模块，其中ES代表ECMAScript。 Instead of calling a function to access a dependency, you use a special import keyword. 不用调用函数来访问依赖项，而是使用特殊的import关键字。
解决方案2
1 2019-02-06 17:14:24
I think you can go for single page application framework like angular for your solution. 我认为您可以为解决方案选择像angular这样的单页应用程序框架。 In angular, 在角度上
You just have to create two different components for comp1 and comp2 and they both would be isolated from each other unless you make them interact using a shared service or parent-child interactions. 您只需要为comp1和comp2创建两个不同的组件，并且它们将彼此隔离，除非您使它们使用共享服务或父子交互进行交互。
Edit: you can use the ECMA script module feature for the same. 编辑：您可以使用ECMA脚本模块功能。
This is the reference: https://medium.freecodecamp.org/how-to-use-ecmascript-modules-to-build-modular-components-in-javascript-9023205ea42a 这是参考： https : //medium.freecodecamp.org/how-to-use-ecmascript-modules-to-build-modular-components-in-javascript-9023205ea42a
Thanks to @behzad 感谢@behzad
解决方案3
0 2019-02-06 17:11:30
I don't know about JavaScript, but you can do this with Angular and Typescript. 我不了解JavaScript，但是您可以使用Angular和Typescript做到这一点。
With Angular 4 and above, you can have completely separate scripts running within different components. 使用Angular 4及更高版本，您可以在不同组件中运行完全独立的脚本。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.