Trending September 2023 # Examples To Implement Javascript Modules # Suggested October 2023 # Top 15 Popular

You are reading the article Examples To Implement Javascript Modules updated in September 2023 on the website Happystarlongbien.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Examples To Implement Javascript Modules

Introduction to JavaScript Modules

A module is a script file that implements functionality that gets loaded into the main script using export and import directives. Module encapsulates the functionality and exposes it to other JavaScript files as libraries. The export keyword is used to label functions, variables, constants, etc. that need to be accessible outside that module and the import keyword allows functionality to be imported into other modules for use.

Start Your Free Software Development Course

Therefore, it will be right to say that each module consists of three sections:

Dependencies also known as Imports.

Code

Exports

When we implement a module, they have strict mode enabled by default and their execution is deferred i.e. the script file(module) is executed only after the HTML document is parsed. When writing a script element, we can tell the browser to treat the script element as a module by assigning the value “module” to the type attribute.

Code:

It is important to note that modules are evaluated once, even if they are imported into multiple other modules. While scripts are evaluated at any time as we add them to DOM (Document Object Model). The browser understands it is a module because of the type attribute on the script element. In the above example, the file extension is .mjs, to ensure that whoever views the file understands it is a module and not a script because modules are differently treated as opposed to “classic” script.

Examples to Implement JavaScript Modules

Below are the examples are mentioned:

Example #1: Basic

Code: # index.html

import {greetings} from ‘./say.js’; document.body.innerHTML = greetings(‘Adam’);

Code: # say.js

export function greetings(user) { return `Hola, ${user}!`; }

Output :

Example #2: A module is evaluated once.

Code: # index.html

import ‘./say.js’; import ‘./say.js’; document.body.innerHTML = greetings(‘Adam’);

console.log("Module is evaluated!");

Output:

A module can import multiple elements, all we need to do this prefix those elements with the export keyword. We will import the entire module instead of a function or variable from that module using the -+“*” symbol. Also, I will be using namespace imports(demo). The namespace import – demo is an object whose properties and behaviors are defined by the named exports. See Example 3.

Example #3

Code: # index.html

import * as demo from ‘./say.js’; console.log(“Area of Rectangle:” ,demo.rectArea(7,8)); console.log(“Square Root of 25 :” ,demo.sqroot(25));

Code: # say.js

export const sqrt = Math.sqrt; export function rectArea(l,b) { return l * b; } export function sqroot(sqr) { return sqrt(sqr); }

Output:

Modules are Fetched Using CORS (Cross-Origin Resource Sharing – A way for users and servers to communicate if they are not on the same domain). The module scripts that are used must have a CORS header implemented that allows cross-site loading like Access-Control-Allow-Origin: *, otherwise, error is thrown and also make sure that the browser allows CORS policy to run. A sample example is shown below:

The different ways of running JavaScript source code are listed below, which helps us in understanding how JavaScript modules are loaded on browsers and servers and how they have evolved over the years.

Runs on Loaded Filename ext.

Script browsers async .js

CommonJS module servers sync .js .cjs

AMD module browsers async .js

ECMAScript module browsers and servers async .js .mjs

We can see that in our examples we have used .mjs extension for indicating that those script files are modules, though not compulsory but help in indicating that these files are modules of the application.

Conclusion

In this article, we understood what modules in JavaScript are and how it is implemented and the benefits it brings to the table and how it is different from our normal scripts. Modules break the code into pieces with clear interfaces and dependencies. The interface is the visible part that other modules can have a look at, and the dependencies are the part that other modules use.

The important points to remember about modules are:

Modules by default have use strict

Modules are executed once.

The web browsers load and execute the script modules automatically.

Modules interchange functionalities through import/export.

Modules have their own, local top-level scope.

Module execution is deferred.