A way to make file's data non-global is to use IIFE:
(function () {
statements
})();
This way, if we add some JS file to HTML, we'll not be able to access that JS's data from the HTML file (encapsulation).
Modules are better for that.
Modules characterics:
- they are singletons - every file that imports the module gets the same thing. If something gets modified in exported module by some client, all other clients will see that
- one module is one file
There are a few ways to export a module:
Contents of myModule.js
export function functionOne() {...}
function functionTwo() {...}
export someValue = 4
OR
function functionOne() {...}
function functionTwo() {...}
someValue = 4
export {functionOne, someValue}
Only functionOne
and someValue
get exported. The functionTwo
is not visible to the clients of this module.
To import it:
import { functionOne } from './myModule.js'
We can skip someValue
if we don't need it.
We can change the name of the exported entity:
export {functionOne as myFunction, someValue}
Then we'd import it like this:
import { myFunction } from './myModule.js'
Contents of myModule.js
export default function functionOne() {...}
function functionTwo() {...}
export someValue = 4
OR
function functionOne() {...}
function functionTwo() {...}
someValue = 4
export {functionOne as default, someValue}
Only one thing can be exported as default. The client:
import someFunc from 'myModule.js'
someFunc()
The client does not have to know the name of the thing he imports.
One module can export another module, so that the consumer uses just one "import".
export {functionOne as default, someValue}
export {functionThree} from './anotherModule.js'
functionThree
is not accessible to that aggreagate module, it just exports it for the consumers of it (however, it could improt it and make use of it also).
<script src="app.js" type="module"></script>
If module exports something as default, we can import it with any name:
import something from 'myModule.js'
import { myFunction } from './myModule.js'
We can change name in the client:
import { myFunction as func } from './myModule.js'
We cann import all that was exported:
import * as myModule from 'myModule.js'
myModule.functionOne();
import something, {someValue} from 'myModule.js'
OR
import something, * as stuff from 'myModule.js'