Module of ES6

First, module Overview

JavaScript has no modular system, but with the advent of ES6, the module follows.

Es6module's design idea is to be as static as possible, so that the compiler can determine the dependencies of the module, as well as input and output variables. In short, it's ' compile-time loading '.

Es6module is relatively simple to achieve, easy to get started.

Es6module advocates that a JS file is a module concept, consisting mainly of two commands: Export and import, for the module to provide external interface (export) and introduce other module interface (import).

Okay, here's the Export command and the import command that I understand.

Note: Learning ES6 module needs to have a converter, because now many have not supported the ES6 module. See "ES6 Conversion ES5"

Second, export Command

The export command is plainly the interface that the module provides externally.

The syntax is as follows:

var f = 1; export {f};

Or

var f = 1;

But it can't be like this:

var f = 1; export F;

Why is it?

It is important to note that Es6module is a reference to a value that is thrown out. (This and CommonJS modules are different, CommonJS is a copy of the value to be thrown out)

So, you are certainly wrong like above, because export F is the value that is thrown out, not quoted.

Also, it is important to note that export is not the last thing to deal with, oh, what do you mean?

such as Test1:

export {name}; var name = ' Monkey ';

As above, this actually throws outward is empty, if uses Es6module's import(import in below will detail said) references it, will output undefined.

as follows (using import ) Test2:

Import {name} from './test '; console.log (name);

The code for converting Test1 and test2, using Babel to ES5, is as follows:

Test1:

Test2:

To run Test2 in the node environment, the following:

Therefore, export is executed in Es6module, as in the code. Instead of being promoted to the top of the module, like import in Es6module, it is performed first.

III. Import Command

The import command, in plain parlance, refers to the interface provided externally by export. Yes, it is a reference, not a value assignment.

Import uses the following:

/* Name is the     reference name for export in the Test.js file, and the name must be one by one corresponding    to the './test ' for the module you have introduced ./test ‘;

Where, if you want to change the reference name, you can use as, as follows:

Import {name as Ourname} from './test ';

If you want to introduce all the variables in the module, you can use the wildcard character * and then use the as custom name, as follows:

// introduce all the thrown references to the test module and store it in Allvar import * as Allvar from './test '; // then, if there is one method in the test module, we can use allvar.one () as such.

As in the above examples, we use import to explicitly specify the corresponding reference name in the module, or use the * all reference. In fact, we can also set the default in export, so that when the import reference module, you do not need to specify the use of the name.

What do you mean?

As follows:

 //   GetName () {Console.log ( ' Monkey '  // default is actually the equivalent of Es6module set a name for us, corresponding to the value of GetName  export default   GetName;  //  using the test module, one is my random name, it corresponds to default, and does not require {}  import one from './test ';  
  

Iv. sublimation

The value of the Es6module output is a reference to the value. We can get a more thorough understanding of this through a demo.

As follows:

// Module Sample var i = 0; export {i}; // module Test1, introducing the sample module import {i} from './sample '; I+ +; // module TEST2, introducing the sample module import {i} from './sample '; Console.log (i); // module Main, introducing the Test1 and Test2 modules import './test1'./test2 ';

Using bable conversion:

The Error!! The i++ in the module test1 is read-only. (' I ' is read-only).

The reason is: because the ES6 input module variable, is only a "symbolic connection", so this variable is read-only, the re-assignment of it will be an error. (Excerpt from ' Ruan Yi Feng-ecmascript6 ').

Let's change the code above,

As follows:

Using Bable to convert the above code, using CMD, run main.js with the following results:

We used import to introduce Test1 and test2 modules in Main.js, but from the above results we can see that they are quoted in the same sample.

Therefore, the value of the Es6module output is a reference to the value. And, because the value of the Es6module output is a reference to the value. So when a circular reference module is present, it is not the same as COMMONJS.

As below, CommonJS ' s Demo:

Note: Commonjs is a copy of the value, not a reference.

Main.js

var y = require ('./test '= ' Dorie '; setTimeout (function() {    Console.log ( Y.Y);},

Test.js

var b = require ('./main '); var y;settimeout (function() {    = ' monkey ' + b.b;},+);   = y;  

Run the main.js and get the result:

Why?

Because Commonjs is a copy of the value, When the main.js is executed, the test module is introduced, the value of Y is assigned to the Y variable in main.js, and y is undefined and has been assigned, but after the test module runs the anonymous function in SetTimeout in 1 seconds, y becomes ' monkey ' + B.B, but the main.js in the Y has no effect, because it is a value copy.

We will replace the above code with the Es6module form, as follows:

Main.js

Import {y} from './test 'var b = ' Dorie '; setTimeout (function() {    Console.log (y);},2000);  

Test.js

Import {B} from './main '; var y;settimeout (function() {    = ' monkey ' + b;},+);  

After converting Es6module to ES5 with Bable, the converted Main.js is run in node environment with the following results:

In fact, the logic and the above COMMONJS is the same, but the result is not the same, because Es6module is a reference to the value!!

Module of ES6