CommonJS

Commonjs is a service-oriented specification adopted by NodeJS.

A module is a script file (js) that executes the entire script when it is first loaded by the require command and then generates an object in memory

{ id: '... ', // module name exports: {... }, // Export interface loaded: true, // whether loading is complete... }Copy the code

This module is only run once and is not executed again. If it is used again, it goes to the exports property.

Since CommonJS loads modules synchronously, this is not an issue on the server side because all modules are stored on the local hard disk. The wait module time is the time the hard disk reads the file. It is very small. However, for the browser, it needs to load modules from the server, related to network speed, agents and other reasons, once the wait time is too long, the browser is in a state of “suspended animation”.

So on the browser side, it is not suitable for CommonJS specification

AMD

The AMD name is abbreviated from “Asynchronous Module Definition”.

It loads modules asynchronously

require([module], callback);
Copy the code

This approach does not block other browser tasks (e.g., DOM building, CSS rendering). Internally the loading is synchronous, executing the code in the callback as soon as the module is loaded.

AMD module definitions must be defined using a specific define() function

define(id? , dependencies? , factory);Copy the code

How to use

// math.js
define(function() {
  var add = function(x, y) {
    return x + y;
  }

  return  {
    add: add
  }
})
Copy the code

AMD module reference:

require(['math'].function(math){
    math.add(2.3)})Copy the code

If the Math module depends on other modules, define this:

// math.js
define(['dependenceModule'].function(dependenceModule) {
  // ...
})
Copy the code

CMD

CMD advocates proximity, deferred execution. You can write your dependencies on any line of code like this:

define(factory)
Copy the code

When factory is a function, it represents a module constructor. Execute this constructor to get the interface that the module provides externally. The factory method is passed three arguments by default: require, exports, and module

// CMD
define(function(require.exports.module) {
  var a = require('./a');
  a.doSomething();
  var b = require('./b');
  b.doSomething();
})
Copy the code

This specification was actually developed for the promotion of Seajs. If you look at Seajs, why is that

seajs.use(id, callback?)
Copy the code

UMD

Since CommonJS is a server-side specification, it does not conflict with AMD and CMD standards

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'.'underscore'], factory);
    } else if (typeof exports= = ='object') {
        // Node, CommonJS, etc
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // Browser global variables (root = window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this.function ($, _) {
    / / method
    function a(){}; // Private method because it is not returned (see below)
    function b(){}; // Public method because it is returned
    function c(){}; // Public method because it is returned
    // Expose public methods
    return {
        b: b,
        c: c
    }
}));
Copy the code

This code is now compatible with various loading specifications.

ES6

Es6 uses import and export to implement module input and output. The import command is used to input functions provided by other modules, and the export command is used to specify external interfaces of modules.

// profile.js
export var a = 1;
export var b = 2;
export var c = 3;
Copy the code

Use variables in profile.js

import { a, b, c } from './profile'
console.log(a, b, c)
Copy the code