Knowledge points "JavaScript modularity"

JavaScript Modular Process

The evolution of JavaScript is probably a few steps:

• Tools (Browser compatible)

• Components (function Modules)

• Framework (functional module Organization)

• Application (Business module organization)

But after a long, hard-working process, JavaScript is constantly being clustering abstracted to better organize business logic. From another point of view, he also said that JavaScript is inherently lacking in a function: module

Although the organization of the HTML5 to the norms of the promotion and the major manufacturers of the norms of strong support, but for JavaScript itself, its specifications remain weak, it also has the following defects:

• No standard module system

• Fewer standard libraries (ECMAScript only some of the core libraries are defined)

• No standard interface (JavaScript has little definition of a standard unified interface such as Web Server database operations)

• Lack of package management system

COMMONJS Specification

The COMMONJS specification was proposed primarily to compensate for JavaScript's lack of standard flaws in order to achieve the basic ability of Python, Ruby, and Java to develop large-scale applications, rather than staying at the stage of a small scripting program.

It's very simple to use and define.

Module specification for COMMONJS

1 module definition

// Example.js var x =5; var function (value) {    return value +== ADDX;

The definition keyword is exports what does this module mean: In Commonjs, each file is defined as a module, that is, the module represents the file itself

2 Module Reference

var example = require ('./example.js '); Console.log (example.x);   // 5 // 6

The Commonjs module features the following:

• All code runs at the module scope and does not pollute the global scope.

• The module can be loaded multiple times, but only once at the first load, and then the result is cached and then loaded, and the cached result is read directly. To make the module run again, you must clear the cache.

• The order in which the modules are loaded, in the order in which they appear in the code.

3 See figure

It is obvious from a graph that the citation relationship between them

Implementation of the module

The introduction of modules in node requires a 3-step process

1. Path analysis

2. Document Location

3. Compile and Execute

There are two types of modules in node: One is the module provided by node, called the core module , and the other is the module that the user writes as a file module .

ES6 Module

The design idea of the ES6 module is to make it as static as possible, so that the dependencies of the module can be determined at compile time, as well as the input and output variables. CommonJS and AMD modules can only be identified at runtime. For example, the CommonJS module is an object, and you must look up object properties when you enter it.

// COMMONJS Module Let {stat, exists, readFile} = require (' FS '); // equivalent to let _fs = require (' fs '== = _fs.readfile;

The essence of the above code is to load fs the module as a whole (that is fs , all methods loaded), generate an object ( _fs ), and then read 3 methods from the object. This kind of loading is called "Runtime loading" because only the runtime can get this object, resulting in no way to do "static optimization" at compile time.

The ES6 module is not an object, but rather export a command to explicitly specify the output code and then enter it through a import command.

Similar to COMMONJS thought

1 module definition

// Profile.js var firstName = ' Michael 'var lastName = ' Jackson 'var year = 1958;

The above code is a profile.js file that holds the user information. ES6 treats it as a module, which export outputs three variables externally with a command.

export, except like above, there is another.

// Profile.js var firstName = ' Michael '; var lastName = ' Jackson '; var year = 1958; export {firstName, lastName, year};

Typically, the export output variable is the original name, but you can rename it using the as keyword.

function v1 () {...} function v2 () {...} Export {  v1 as streamV1,  v2 as streamV2,  v2 as streamlatestversion};

Note specification:

exportThe command specifies an external interface and must establish a one by one correspondence with the variables inside the module.

// error export 1; // Error var m = 1; export m;

Both of the above are error-free because they do not provide an external interface. The first one is a direct output of 1, the second way through the variable m , or direct output 1. 1just a value, not an interface. The correct wording is the following.

// The wording of a var m = 1; // notation Two var m = 1; export {m}; // three of the wording var n = 1; export {n as M};

functionand class the output must also follow this notation.

// Error function f () {}export F; // correct function f () {}; // correct function f () {}export {f};

In addition, the interface of the export statement output, and its corresponding value is a dynamic binding relationship, that is, through the interface, you can take the real-time value inside the module.

2 Module Reference

// a.jsLet a =function  () {    console.log (' module A ')}; // provide an external excuse and output a variable and Funca method Export {A, Funca}

Reference

Import {A, Funca} from "./a"; // introduce the variables and methods in the import by importing Console.log (a); Console.log (Funca ());

Aliases can be set when referencing

Import {A as avalue, Funca} from "./a"; // introduce the variables and methods in the import by importing Console.log (avalue); Console.log (Funca ());

3 Export Default command

As can be seen from the previous example, import when using a command, the user needs to know the name of the variable or function to be loaded, otherwise it cannot be loaded. However, users certainly want to get started quickly, not necessarily willing to read the documentation, to understand what properties and methods the module has.

In order to provide users with convenience, so that they can load the module without reading the document, it is necessary to use the export default command to specify the default output for the module .

In essence, export default it is the output default of a variable or method called, and then the system allows you to take any name for it.

// Export-default.js default function () {  console.log (' foo ');}

And then you can name it casually.

// import-default.jsimport customname from './export-default '//  ' foo '

But in the case of a normal introduction of the module you must specify the variable or method you want to introduce, as follows:

Import {Funca} from "./a.js";  // You must know the name of the method defined in A.js when you refer to it here .

Comparison under normal and export default is different

// First Group default function // Output  //  ...  //  input //  Second set of function//  output  // ...  //  input

Reference: http://es6.ruanyifeng.com/#docs/module

Knowledge points "JavaScript modularity"