Module loader API is not a part of Web Component spec sheet, but it is definitely something that is useful to know when it comes to creating and using multiple classes. As the name says, this specification lets a user load the modules. That is, if you have a bunch of classes, you can use module loaders to load these classes into the web page.
Let's start with the basics. Let's say we have our index.html like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
</head>
<body>
<p>Placeholder for Random Number</p>
</body>
</html>
We can see that there is a <p> tag in this HTML file. Now, let's say we have a class called AddNumber, whose purpose is to add a random number between 0 and 1 to this <p> tag. This would make the code look something like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
</head>
<body>
<p>Placeholder for Random Number</p>
<script type="text/javascript">
class AddNumber {
constructor() {
document.querySelector('p').innerText = Math.random();
}
}
new AddNumber();
</script>
</body>
</html>
Simple, right? If you open the page on a browser, you will simply see a random number, and if you inspect the page, you will see that the random number replaced the text which was inside the <p> tag.
If we choose to store it in a JavaScript file, we can try to import it using the following code, where addNumber.js is the name of the file:
<script type="text/javascript" src="./addNumber.js"></script>
Now, let's say you have a randomNumberGenerator function instead of the Math.random() method. The code would look something like this:
class AddNumber {
constructor() {
// let's set the inner text of
// this element to a smiley
document.querySelector('p').innerText = randomNumberGenerator();
}
}
function randomNumberGenerator() {
return Math.random();
}
new AddNumber();
We also want the ability to let the user create a new object of the AddNumber class, rather than us creating it in the file. We do not want the user to know how randomNumberGenerator works, so we want the user to be only able to create the object of AddNumber. This way, we reach how modules work. We, the creators of modules, decide which functionalities the user can use and which they cannot.
We can choose what the user can use with the help of the export keyword. This would make the code look something like this:
//addNumber.js
export default class AddNumber {
constructor() {
document.querySelector('p').innerText = randomNumberGenerator();
}
}
function randomNumberGenerator() {
return Math.random();
}
When this file is imported (note that we haven't talked about imports yet), the user will only be able to use the AddNumber class. The randomNumberGenerator function won't be available to the user.
Similarly, if you have another file with, say, two other functions, add() and subtract(), you can export both of them as shown in the following:
// calc.js
export function add(x, y) {
return x + y;
}
export function subtract(x, y) {
return x - y;
}
Importing a module can be easily done with the help of the import keyword. In this section, we will talk about the type="module" attribute.
Inside the HTML file, index.html, instead of type=text/javascript, we can use type=module to tell the browser that the file that we are importing is a module. This is what it will look like when we are trying to import the file addNumber.js:
<script type="module" >
import AddNumberWithNewName from './addNumber.js';
new AddNumberWithNewName();
</script>
This is how it will look if we import functions from the calc.js module:
<script type="module" >
import {add, subtract} from './calc.js';
console.log(add(1,5));
</script>
Notice how we can change the name of the module exported from AddNumber, which uses export default, and how we have to use the same name as the name of the function exported using export.