Module

Introduction

  • As our application grows bigger, we want to split it into multiple files, so called “modules”. A module may contain a class or a library of functions for a specific purpose.

  • But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand.

AMD (Asynchronous Module Definition)

  • It is invented by RequireJS

  • Here is an example

// Define moduleA using AMD
define(function() {
    // Module implementation
    return {
        sayHello: function() {
            console.log("Hello from moduleA!");
        }
    };
});
// Load moduleA and use it
require(['moduleA'], function(moduleA) {
    moduleA.sayHello();
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMD Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
</head>
<body>
    <h1>AMD Example</h1>

    <script>
        // Configure RequireJS
        require.config({
            baseUrl: '.',
            paths: {
                'moduleA': 'moduleA',
            }
        });

        // Load main.js to start the application
        require(['main']);
    </script>
</body>
</html>

CommonJS

  • It is mainly designed for NodeJS usage

  • By default, NodeJS treats JavaScript code as CommonJS modules. Because of this, CommonJS modules are characterized by the require statement for module imports and module.exports for module exports.

module.exports.a = "a";
module.exports = "b"
const {a} = require("./a");
const b = require("./n");
console.log(a ,b); // a , b

ECMAScript 6 (ES6)

  • After javascript comes to version 6, import & export is added

  • Most of browser support es6, however, NodeJS default is using commonJS

  • In order to apply es6 on nodejs, it is recommended to use typescript for development, and compile in commonjs 

import {a} from "./a";
console.log("123",a);
export const a = 'A';

  • After compiling into javascript

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var a_1 = require("./a");
console.log("123", a_1.a);
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.a = void 0;
exports.a = 'A';

Syntax

  • Given the view1 module

import view1 from './view1.js';

  • would basically be equivalent to

import * as temp from './view1.js';
const view1 = temp.default;

  • In fact the first import above a shorthand for

import { default as view1 } from './view1.js';

ESNext

  • Targeting ESNext enables module system using the next version of JavaScript is, meaning it includes the latest proposals and features that may not be finalized yet.

References

LogoModules, introductioniliakan
PreviousScript Async vs DeferNextConst VS Let VS Var

Last updated

Was this helpful?