Search code examples
javascripthtmlweb-componentisolation

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>
<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.

I am trying to understand how much 2 pieces of code can be isolated in the same page. For instance, suppose component1 code includes jquery and component2 code includes react js and the 2 specific versions I included have specific libraries. 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? 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?

Solution

  • The JavaScript standard from 2015 introduces its own, different module system. It is usually called ES modules, where ES stands for ECMAScript. Instead of calling a function to access a dependency, you use a special import keyword.