ES6 achieves modularity and encapsulation via exporting and importing classes, functions and variables etc.
Exporting can be done via export keyword and an exported entity can be imported via import keyword.
What is module and what is not module?
Any file containing one or more import or export statements is considered an module. Any file without any import or export statement is not a module and it treated as a script whose contents are available in the global scope and to the declared modules as well.
What is the name of module?
There is one module per JavaScript file. The file path of the module is treated as its name. The path can be relative or absolute.
Syntax used in this example
ES6 Modules specification provides various syntaxes, in this tutorial we will focus on the very basic one.
exporting:
export <xyz>
Where <xyz> can be a variable, function or class declaration.
Importing:
import * as <local-name> from "<module-name>";
Where:
<module-name> is the module path which we want to import.
<local-name> acts as a local namespace variable, used as a reference for the imported functions/variables/classes etc.
This syntax is also referred as namespace import.
Using Modules in HTML pages
There are two ways to do that.
Inline script:
<script type="module">
import * as <local-name> from "<module-name>"
....
</script>
External script:
<script type="module" src="the-script-path"></script>
Examples
js/lib.jsconst SPLIT_CHAR = ','; //not exported so cannot be used outside
export function split(str) {
return str.split(SPLIT_CHAR);
}
export function toHtmlLines(strArray) {
return strArray.reduce((s1, s2) => join(s1, s2, '<br>'));
}
function join(s1, s2, separator){//not exported so cannot be used outside
return s1 + separator + s2;
}
js/app.jsimport * as parser from "./lib.js";
export function displayString(id, str) {
var s = parser.split(str);
s = parser.toHtmlLines(s);
document.getElementById(id).innerHTML = s;
}
index.html<html>
<body>
<div id="display-div"></div>
<script type="module">
import {displayString} from './js/app.js'
displayString("display-div", "one,two,three");
</script>
</body>
</html>
To try examples, run http-server from project root:
$ http-server output
Using external script tag
In above example we used modules via inline script in the HTML page. Let's now use external script tag.
js/app.jsdocument.addEventListener("DOMContentLoaded", function (event) {
displayString("display-div", "one,two,three");
});
import * as parser from "./lib.js";
export function displayString(id, str) {
var s = parser.split(str);
s = parser.toHtmlLines(s);
document.getElementById(id).innerHTML = s;
}
index.html<html>
<head><script type="module" src="./js/app.js"></script></head>
<body>
<div id="display-div"></div>
</body>
</html>
The output, in this case is same as above one.
Various Import/Export Syntaxes
ES6 specification provides various import/export syntaxes as stated here and here. Our next tutorials will be covering related important features.
Example ProjectDependencies and Technologies Used: - Node.js v8.11.3
- Google Chrome Browser Version 68.0.3440.106 (Official Build) (64-bit)
|
