How do I avoid adding JavaScript ES6 module exports to global scope for use in normal script blocks?
Question
I've so far managed to avoid hardcore JavaScript programming but it looks like that is coming to an end. In gearing up for a major new project, I'm trying to get my head around best practices in 2018. I've been reading a lot about different module approaches and have made use of some like Dojo's AMD-based modules. In thinking about how to design my own module architecture, it seems like ES6 is the right way to go for new development. So far I understand the import/export syntax and have gotten some simple modules to work. But my current technique for loading the modules back in HTML and using them just "feels wrong". Let me boil down what I have working so far.
Module foo.js
import (bar} from '/Scripts/bar.js'
export function foo() {
bar();
console.log("I'm in foo");
}
Module bar.js
export function bar() {
console.log("I'm in bar");
}
index.html
<head>
<script type="module">
import {foo} from "/Scripts/foo.js"
window.foo = foo; // save for later but "feels wrong"
</script>
</head>
<body>
<script>
// foo(); // doesn't work - foo by itself is only defined in the module scope
window.foo(); // unless "stashed" somewhere else
</script>
</body>
Maybe this is proper technique (and I found an older question that did basically the same as me ), but it still doesn't feel like I should be polluting the global namespace like this. Assuming that's bad, what else should I be doing?
3 answers
solution1
1 ACCPTED 2018-09-24 17:24:07
If you want the function available globally, the only way to achieve that is to put it on the global scope (AKA the window object).
A little bit nicer way to put things on the global scope, however, is to have some sort of globals object that contains all of your globals, rather than putting the function/property names directly on the window object which can potentially cause conflicts with other third-party libraries.
So you would say globals.foo() instead of window.foo()
solution2
0 2019-12-11 08:48:31
A function can be accessed everywhere by re-importing it to many modules.
You only need to add objects to global scope where state is maintained and required across modules.
solution3
0 2020-05-07 19:03:13
- create file ajax.js: make class, example Ajax, end that class with export Ajax.
- create a main.js file, type=module
- put in main.js: Ajax class with import { Ajax } from "ajax.js"
- create in main.js: a new class with var ajax = new Ajax();
- then put that variable in a window object: window.ajax = ajax.
- now you are ready and can use that ajax object everywhere in your application.
- if you bundle all your code in classes and put them in same named files you will have a very modularized application,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.