First in nuggets original link reprint please specify nuggets link

Preface 🎤

JS, the greatest, can also be said to be the most admirable is the hands of the working people, they let JS originally do not have the function, with a variety of magical ways, these functions are realized. Module loading is also a commendable paean to JS evolution.

Doyen CommandJS

CommandJS is a standard specification for server-side JS, which is only available on the server, hence the AMD opportunity. CommandJS has cores for require and module.exports. The loading mode is synchronous loading.

The statement

//math.js
module.exports.add = function(){}
Copy the code

Module. exports/exports/exports/module.exports/exports

use

// index.js
const math = require('./math')
math.add()
Copy the code

It’s also surprisingly easy to use, because Node does a lot of other things underneath to make it almost painless for developers to use.

Circular dependencies

Node’s loop dependencies are handled as follows: if there is a loop, it will be executed wherever it is. Module. exports of module A, require(b), and require(A) of module B, can only obtain the previous dependency of A.

//a.js
module.exports.max = 10
require(b)
module.exports.max = 20
//b.js
const a = require(a)
console.log(a.max) / / 10
Copy the code

AMD

AMD is the RequireJS specification implemented for module loading in browsers. And AMD is loading asynchronously. And AMD design ideas, is also a reference to a part of CommandJS. AMD is very straightforward to declare and load.

The statement

define(['jquery'.'underscore'].function ($, _) {
    // methods
    function a(){};    // private because it's not returned (see below)
    function b(){};    // public because it's returned
    function c(){};    // public because it's returned

    // exposed public methods
    return {
        b: b,
        c: c
    }
});
Copy the code

Dependencies need to be defined only if there are dependencies, otherwise they can be passed in directly, such as:

// math.js
define(function(){
    return {
        add:function(){}}})Copy the code

use

Use is:

require(['math'].function(math) {
    console.log(math.add());
})
Copy the code

Circular dependencies

So how does AMD address circular dependencies? In fact, it is mandatory to ignore, for example, there are two modules A and B. When A depends on B, and then B depends on A, B gets an undefined state of A. And the dependent modules are always executed, which means that B must be executed first.

UMD

UMD is a solution to the cross-platform MD import problem. The solution is to combine CommandJS with AMD to solve the problem.

// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof exports= = ='object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.returnExports = factory();
  }
}(this.function () {

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));
Copy the code

It essentially customizes a wrapper and treats it differently for each environment. If there is a dependency, special case processing will also be carried out.

CMD

CMD has a low presence, it is very much like AMD in every aspect, except that CMD advocates proximity

define(function(require.exports.module){
    const a = require('a')
    a.x()
})
Copy the code

However, it is also delayed until the load is finished. The way to determine this is regular.

Function.prototype.toString.call(function(){
    console.log('i am Magic')})Copy the code

To put it bluntly, it just makes writing more comfortable.

Parallel Worlds ES6 Module

In the multi-dimensional universe, due to some special and minor changes, ES Module becomes the only general Module loading specification for the front and back ends on the earth in the parallel universe. In 2015, the cosmic wave fission caused by the fourth abnormal activity of the sun 🌞 caused the inspiration of ES Module to be transmitted to the earth 🌍 where we live. This feature is also known as ES2015 Module or ES6 Module because the delivery date is 2015. — I made it up. The birth of ES Module can be said to be a real sense of the solution to the front and back end Module import problem, but was not born at the right time, can not completely replace the status of Node CommandJS, but is also a kind of delectable epoch-making innovation.

The statement

Welcome to the ES6 Module announcement, here’s a brief description

// math.js
export function add(){}

export default {
    add
}

export var name = 'box'
Copy the code

use

import {add} from './math'
add()
Copy the code

Circular dependencies

The ES6 Module doesn’t really care about circular dependencies, it doesn’t need to produce a result, it just needs to give you a reference, and it’s up to the developer to ensure that it gets the value.

The singularity 🎆 Webpack

The impact of Webpack can be said to be huge, you basically don’t need to care about what module import way, great Webpack will use its omniscient treatment to help you solve these problems. You no longer have to worry about using ES Module on the server side, or CommandJS(Browserify) on the front end.

Conclusion 👨 🏫

If you can’t see it all, you can swipe 👉

* AMD CommandJS UMD CMD ES Module
Use in the browser ✅ ❌ ✅ ✅ ✅
Used on the server ❌ ✅ ✅ ❌ ✅
Asynchronous loading ✅ ❌ ✅ ✅ (allowed) ✅ (allowed)

At the same time, only ES Module is for passing symbol references, the rest are objects.