Before explaining the concepts of CommonJS, AMD, and CMD, we first understand the modularity of js. Modularization, as the name suggests, is to decompose the project according to functions or other logic. Each part only handles one function and decouples the functions to facilitate future development and maintenance. Then modularization must have the following capabilities to split and assemble modules:
Define encapsulated modules;
Define the dependence of the new module on other modules;
can support the introduction of other modules;
Then a set of specifications is needed Guidelines were used to define these capabilities, so CommonJS, AMD, CMD, etc. appeared.
CommonJS was originally called ServerJS
, which is the specification of js on the server side. This is the specification used by node. According to the CommonJS specification, a single file is a module, require
is used to load a module, and exports
is used to expose methods or properties in the module to the outside.
For example:
// hello.jsfunction say(username){ console.log( 'hello, '+username ); } exports.say = say;
=============
// main.jsvar person = require('./hello'); person.say('wenzi'); // hello, wenziperson.say('师少兵'); // hello, 师少兵person.say('NUC'); // hello, NUC
At the same time, # The ##require statement can be written anywhere in the file, as long as it is used before the reference, it does not have to be written at the front of the file. However, in order to make the code easier to read and to intuitively see which modules are currently referenced, it is best to put it at the front of the file.
var a = {name:'wenzi'};var b = a;console.log(a); // {name: "wenzi"}console.log(b); // {name: "wenzi"}
b.name = 'shaobing';console.log(a); // {name: "shaobing"}console.log(b); // {name: "shaobing"}
var b = {name:'师少兵'};console.log(a); // {name: "shaobing"}console.log(b); // {name: "师少兵"}
Explanation: a is an object, b is a pair of a The references, that is, a and b point to the same memory, so the output in 1 is the same. When b is modified, that is, the contents of a and b pointing to the same memory address have changed, a will also be reflected, so the output of the second example will be the same. When b is overwritten, b points to a new memory, and a still points to the original memory, so the final output will be different.
Then you can deriveexports and
module.exports at this time:
RequireJS. AMD became independent from the CommonJS community and became the AMD community alone. The popularity of AMD, To a large extent, it also relies on the promotion of RequireJS authors.
// hello.js// 将需要引入的模块全部写入到数组中,然后传递参数进行调用define(['a', 'b'], function(a, ,b){ // do something return{ hello : function(username){ console.log( 'hello, '+username ); } } })
// main.jsdefine(['./hello'], function(h){ h.hello('wenzi'); })
define, and dependencies are passed in through function parameters. One advantage of this is that all dependencies can be seen at a glance.
nearby dependence. When it is used, it is That place carries
require. SeaJS uses the CMD specification:
// hello.jsdefine(function(require, exports, module){ var a = require('a'); // do a var b = require( 'b' ); // do b module.exports.hello = hello; // 对外输出hello})
You can also see the difference between AMD and CMD from here:
AMD usually needs to introduce all dependencies at once and then pass them through parameters; while CMD only introduces them when needed
However, AMD also supports import formats such as CMD, but the internal execution is still based on AMD's logic.
This article introduces the relevant differences and connections between CommonJS, AMD, and CMD specifications. Here is a brief summary:
CommonJS: Each file is a module and does not need to be defined. node uses this specification;
AMD: Use define to define a module and pay attention to Dependency in advance;
CMD: Use define to define modules and nearby dependencies
Next, we will start The learning of node is officially started.