A great example is
jQuery that is placed directly to global
window object. This still works with modules - only
defined in modules will not spoil the global namespace.
You have to specify your dependencies. If the dependencies write to the global namespace then, for sake of clarity, you should call your module inline from HTML
because only there you are sure the global object exists. The usage of global object should be close to the "include" is done using another
If you decide to use modules, then your HTML code will look as follows
// file s1.js const output = console.log; export default output;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> </head> <body> <script type="module"> import output from "./s1.js"; // no prior <script src="s1.js"> necessary output("hello"); </script> </body> </html>
type="module" in both
<script> declaration. That allows some magic to be performed
fetchof relative imported (java)scripts
- support for import/export statements
If you have two entities on the page that need to be notified about each other events then you need a web app.
Every framework has their own way of solving horizontal communication. I am no framework guru so I cannot elaborate. I have my preferred way though is using native web components and communicate via CustomEvents dispatched on document root. The advantage of that is that you don't need any framework (even though I use lit-element to ease the development a bit). An example might be my first and definitely not last project that uses this CustomEvents technique. I am so content with this way of building framework independent web apps that I call this technique modestly "the Web API".