Pak Jiddat

Read: In the name of thy Lord Who createth, Createth man from a clot. Read: And thy Lord is the Most Bounteous, Who teacheth by the pen, Teacheth man that which he knew not. Nay, but verily man is rebellious That he thinketh himself independent!. Lo! unto thy Lord is the return. (Sura Alalaq 96:8)

Using JavaScript modules

Created On: 08 Nov, 2018: 11:48:43 - Tags : javacript

Url: https://developers.google.com/web/fundamentals/primers/modules

JavaScript Modules are an implementation of ES6 Modules. They allow a useful way to organize and reuse JavaScript code. JavaScript Modules consist of a set of features that provide module functionality.

The export keyword allows exporting functions, constants, variables, class etc. For example:


// lib.mjs
export function Test(param1) {
    return "Hello World !";
}
export const testdata = "Test";

The import keyword can be used to import exported functions and variables. For example:


// main.mjs
import Test from ./lib.mjs;
Test("test argument");

In the above example, the lib.mjs must have a relative path or it should be specified with http(s).

Module files are loaded like normal JavaScript files but with the type attribute set to "module". The following example shows how to load a module:


<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

In the above example, the fallback.js file is loaded only by browsers that do not understand the JavaScript module standard. Browsers that understand module standard ignore the fallback.js script

Modules are different from normal scripts in that they are always executed in strict mode. HTML style comments are not supported in modules. Instead single line comments should be used. Module scripts are loaded with Cross Origin Resource Sharing (CORS). This means the HTTP response that delivers the module code should include the HTTP Header: Access-Control-Allow-Origin: * or similar.

Another feature of JavaScript modules is that they are loaded by the browser in deferred mode by default, which means they are downloaded while the page is being parsed. JavaScript module files should have the .mjs file extension, but it is not required. The important thing is that the file is served with content-type of text/javascript;.

Dynamic import allows loading JavaScript modules from within scripts. The following example shows how to load JavaScript modules dynamically:


<script type="module">
  (async () => {
    const moduleSpecifier = './lib.mjs';
    const {repeat, shout} = await import(moduleSpecifier);
    repeat('hello');
    // → 'hello hello'
    shout('Dynamic import in action');
    // → 'DYNAMIC IMPORT IN ACTION!'
  })();
</script>