Through this article, we can understand some implementation specifications in the development process of front-end module system. Pay attention to read some reference links in this article.

AMD

AMD is the canonical output of the RequireJS module definition in the promotion process. It is a concept, and RequireJS is an implementation of this concept, just as JavaScript language is an implementation of the ECMAScript specification.

Define (['./a', './b'], function(a, b) {define(['./a', './b'], function(a, b) { })Copy the code

AMD Official documentation

CMD

CMD is the standardized output of the module definition in the promotion process of SeaJS. It is a synchronous module definition and a standard of SeaJS. SeaJS is an implementation of CMD concept and SeaJS is aJS framework for module development provided by Taobao team.

define(function(require, exports, Module) {var a = require('./a') a. dosomething () var b = require('./b')Copy the code

Differences between AMD and CMD:

  1. For dependent modules, AMD executes early, CMD executes late, and RequireJS 2.0 also supports deferred execution.
  2. AMD advocates the dependency front, CMD advocates the dependency nearby.
  3. AMD API default is a when multiple use, CMD API strictly differentiated, advocating a single responsibility.

CMD official documentation, AMD and CMD differences

CommonJS

CommonJS specification

Node applications are composed of modules that follow the CommonJS module specification. Each file is a module, represented by the module variable, exports an object through module.exports, and loads the module through require.

// a.js exports.hello = function() { return 'hello'; }; module.exports.text = 'Hello world'; // b.js var a = require('./a.js'); // {hello: function.. , text: 'Hello world'}Copy the code
  1. Module. exports exports an object that can be destructed
  2. The require import module will execute and cache, and the next import will read from the cache

ESModule

Nguyen other ESModule

On the level of language standard, ES6 has realized the module function ESModule, which can completely replace AMD and CommonJS specifications and become a common module solution for browsers and servers.

/ / export a. s
export const year = 1958;
export function getYear(){}

const name = 'swordman'
function getNmae (){}
export { name, getNmae }

const obj = {name: 'swordman'}
export default obj
export default funcion foo(){}  // treat it as an exported anonymous function

/ / import b.j s
import { name, getName } from './a' 
import { name: newName, getName } from './a' Import cannot be renamed like this, only as can be used
import { name as newName, getName } from './a' / / right

import * as obj from './a'
const { a, getName } = obj

import a, {name, getName} from './a' // Default and normal export combined import
Copy the code
  1. Export The exported interface is dynamically bound to its corresponding value, and the real-time value can be obtained
  2. Import is implemented at compile time, with variable promotion effect, and imports module interface
  3. Import () is a dynamic import that returns a promise to export the exported module interface

CommonJS vs. ESModule

  1. The CommonJS module prints a copy of the value, the ES6 module prints a reference to the value.
  2. CommonJS modules are loaded at run time, ES6 modules are compile-time output interfaces (statically loaded).
  3. The CommonJS module require() is a synchronously loaded module, while the ES6 module import command is asynchronously loaded, with a separate module-dependent parsing phase.
  4. The CommonJS module’s top-level this refers to the current module, and ES6 modules’ top-level this refers to undefined.
  5. During cyclic loading, CommonJS returns the value of the part that has been executed. ES6 modules are dynamic references, and the loading variable holds a reference to the module.

conclusion

AMD and CMD simply understand its principle, CommonJS and ES Module to master.