Home > Web Front-end > JS Tutorial > Learn the module specifications of node(1) from 0 to 1

Learn the module specifications of node(1) from 0 to 1

大家讲道理
Release: 2017-01-24 15:30:51
Original
1212 people have browsed it

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:

  1. Define encapsulated modules;

  2. Define the dependence of the new module on other modules;

  3. 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.

1. CommonJS

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;
Copy after login

=============

// main.jsvar person = require('./hello');

person.say('wenzi'); // hello, wenziperson.say('师少兵'); // hello, 师少兵person.say('NUC'); // hello, NUC
Copy after login

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.

The difference between exports and module.exports

Some people may have seen using exports directly, and some using module.exports. Here is a brief explanation of the difference between the two.

Let’s take a simple example first:

var a = {name:'wenzi'};var b = a;console.log(a); // {name: "wenzi"}console.log(b); // {name: "wenzi"}
Copy after login
The output results of a and b are the same. Now I change the value of name in b:

b.name = 'shaobing';console.log(a); // {name: "shaobing"}console.log(b); // {name: "shaobing"}
Copy after login
The output results of a and b have changed. I will redeclare b again:

var b = {name:'师少兵'};console.log(a); // {name: "shaobing"}console.log(b); // {name: "师少兵"}
Copy after login
These three examples output three results:

  1. Declare an object and put a Assign a value to b, and then a and b output the same result;

  2. changes the name in b, then the name in a also changes;

  3. The b object is redeclared, then the name in a does not change along with b

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 derive

exports and module.exports at this time:

  1. module.exports initial value is one Empty object {}

  2. exports is a reference to module.exports

  3. require() returns module.exports instead of exports

If module.exports has a new pointer, the exports will be invalid; if module.exports has not changed, just export it directly.

2. AMD and RequireJS

Speaking of AMD, we have to mention

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.

In the AMD specification, the default recommended module format is:

// hello.js// 将需要引入的模块全部写入到数组中,然后传递参数进行调用define(['a', 'b'], function(a, ,b){    // do something    return{
        hello : function(username){            console.log( 'hello, '+username );
        }
    }
})
Copy after login
==========

// main.jsdefine(['./hello'], function(h){
    h.hello('wenzi');
})
Copy after login
That is to say, in AMD, modules must be defined using

define, and dependencies are passed in through function parameters. One advantage of this is that all dependencies can be seen at a glance.

3. CMD and seajs

The CMD specification was proposed by the famous Yu Bo in China. The only thing that makes do is

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})
Copy after login

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.

4. Summary

This article introduces the relevant differences and connections between CommonJS, AMD, and CMD specifications. Here is a brief summary:

  1. CommonJS: Each file is a module and does not need to be defined. node uses this specification;

  2. AMD: Use define to define a module and pay attention to Dependency in advance

  3. CMD: Use define to define modules and nearby dependencies

Next, we will start The learning of node is officially started.


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template