JavaScript Import and module made simple

How to import JS modules in the easiest way possible.

Modules are libraries of objects, variables and functions to be shared between JavaScript applications, according to strict encapsulation rules. In this tutorial we will limit ourselves to short JavaScript examples.

A module also is only loaded in the <head> section of the page, so processing is done before display. The script that loads and uses the module has the following format

<script type="module">
... importation and use
</script>

Without the "module" attribute, the import will not be performed.

Variables that are assigned in the script are visible only inside it. They cannot be used in another script even if it has the "module" attribute.
We will use the results of processing in the page via the DOM.

Import and Export

The objects defined in the modules must be marked as exportable with the export command.

Example:

export var hello = function(who) {
  return "Hello " + who + "!";
}

We will place this code in the modulehello.js file

The import command loads the file into a web page by creating a reference to the module's objects, for example:

import { hello } from './modulehello.js';

The hello function defined in the module thus becomes visible in the script of the page.

We could also create a reference with a different name to avoid name collision:

import { hello as hellowho } from './modulehello.js';

hello is the name of the function in the module and hellowho is its name in the page that uses it.

Use of module content

The content of the module becomes available in the page after importing and you can use the function defined there. The result will be presented in the page with the means of access of the DOM.

For example, we can add a container to the page with the identifier hello:

<div id="hello"></div>

We put inside the result of the processing which consists of adding a name to the "hello" string:

var h = document.getElementById('hello');
h.innerHTML = hello("You")

This brings up in the page:

Hello You!

Communicating with the page

How to keep the results on the page without displaying them immediately?

We will use a slightly more elaborate example with two functions and a variable in the module and which we will put in the modulemath.js file.

export var fnadd = function(a, b) {
  return a + b;
}

export var fnsub = function(a, b) {
  return a - b;
}

export var value = 1000;

We reference all these elements in the page with a single command:

import { fnadd, fnsub, value as val } from './modulemath.js';

The returns of these functions and the value of the variable are visible only in the script which imports the module and which has the "module" attribute. To be able to use them in another script on the page, you can use localStorage or sessionStorage.

localStorage.radd = fnadd(5,5);
localStorage.rsub = fnsub(100,5);
localStorage.val = val;

LocalStorage is in the global scope. Any script on the page can read the data from it and present it on the page.

<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>

Then:

var r1 = document.getElementById('result1');
r1.innerHTML = localStorage.radd 
var r2 = document.getElementById('result2');
r2.innerHTML = localStorage.rsub
var r3 = document.getElementById('result3');
r3.innerHTML = localStorage.val

Simplifications

You can simplify the export with a single command.

var fnadd = function(a, b) {
  return a + b;
}

var fnsub = function(a, b) {
  return a - b;
}

var value = 1000;

export { fnadd, fnsub, value }

You can also simplify the import with the creation of a namespace.

import * as mmath from './modulemath.js';

After which we will use the functions with the name appended to the space:

mmath.fnadd(10, 20)	
mmath.fnsub(100, 1)

Complete example

<!DOCTYPE html>
  <head>
  <script type="module">
    import { fnadd, fnsub, value as val } from './modulemath.js';
    import { hello } from './modulehello.js';

    var r1 = document.getElementById('result1');
    r1.innerHTML = "fnadd: " + fnadd(5,5);

    var r2 = document.getElementById('result2');
    r2.innerHTML = "fnsub: " + fnsub(100,5);

    var v = document.getElementById('value');
    v.innerHTML = val
    var h = document.getElementById('hello');
    h.innerHTML = hello("You")

    import * as mmath from  './modulemath.js';
    localStorage.radd = mmath.fnadd(5,5);
    localStorage.rsub = mmath.fnsub(100,5);
    localStorage.val = mmath.value;

    document.getElementById('result4').innerHTML = localStorage.radd;
    document.getElementById('result5').innerHTML = localStorage.rsub;
    document.getElementById('result6').innerHTML = localStorage.val;
  </script>

  <title>Import Demo</title>

</head>

<body>
  <h1>Import Demo</h1>
    <div id="result1"></div>
    <div id="result2"></div>
    <div id="value"></div>
    <div id="hello"></div>
    <div id="result3"></div>
    <div id="result4"></div>
    <div id="result5"></div>
    <div id="result6"></div>
</body>
</html>

See also

External link

© August 9, 2021 Xul.fr