Top 10 ES6 features module "Modules"

Ranking (2) Modules

This section describes how to build modules in ES6

1, start.

In ECMAScript 6, modules is a module that is stored in a file and is generally a file.
There are two ways to expose methods in a module to external use

1.1 Multiple named exports

Multiple exposed methods or properties

// ------lib.js------Export Const SQRT =function  Square (x) {    return x *  function  diag (x, y) {    return sqrt (square (x) + square (y));}

Description
The const declaration creates a read-only constant. This does not mean that the value pointed to by the constant is immutable, but that the value of the variable identifier can only be assigned once;
Detailed Enquiry: Https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const
Let declares a local variable for a block-level field and can initialize the variable at the same time;
Let allows you to limit the scope of a variable to a block-level domain.
Unlike Var, var declares that variables are either global or function-level and cannot be block-level.
For more information, please inquire:
Https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let

// ------main.js------Import {square, diag} from ' Lib '; Console.log (Square (//  121 // 5

You can also introduce the entire module:

// ------main.js------Import * As Lib from ' Lib '; Console.log (Lib.square (//  121/ /  5

1.2 Single default Export

There are two different ways

// ------myfunc.js------ default function // // ------main1.js------import myFunc from ' MyFunc '; MyFunc ();

Or define a class of classes:

// ------myclass.js------ default // // ------main2.js------import MyClass from ' MyClass 'new MyClass ();

1.3 Browsers:scripts versus Modules

Scripts Modules
HTML element <script> <script type= "module" >

2 Modules in JavaScript2.1 ECMAScript 5 module Systems

The Representative has an AMD CMD approach, which is no longer in detail here.
For Commom JS The above example is shown in the following form:

    //------lib.js------    varsqrt =math.sqrt; functionSquare (x) {returnX *x; }    functiondiag (x, y) {returnsqrt (square (x) +Square (y)); } module.exports={sqrt:sqrt, Square:square, Diag:diag,}; //------main.js------    varSquare = require (' lib '). Square; varDiag = require (' lib '). Diag; Console.log (Square (11));//121Console.log (Diag (4, 3));//5

2.2 ECMAScript 6 Module Systems

The ES6 module loads the advantages of compatible with CMD AMD.
In addition, ES6 module syntax is more rigorous than commonjs
Module loader based on promise, receiving a single modular model

System.import (' Some_module ')    = {        // use some_module    })    . Catch (Error = {• •    });

You can also receive multiple modules, using Promise.all ()

Promise.all (        [' Module1 ', ' module2 ', ' Module3 ']        = system.import (x)))     = =        {// use Module1, Module2, Module3    });

2.3 More Loader methods

ES6 Loader has more load methods, the most important of which is the following 3 System.module (source, options?).
Evaluates the JavaScript code in Source to a module (which is delivered asynchronously via a Promise).
System.set (name, module)
is for registering a module (e.g. one of the created via System.module ()).
System.define (name, source, options?)
Both evaluates the module code in source and registers the result.

2.4 Detailed narration

Tell CommonJS vs ES6:

In CommonJS, imports is just a backup of export.
In ES6, imports is a read-only read-only type.
The following shows the demo

2.4.1 in COMMONJS

//------lib.js------varCounter = 3;functionInccounter () {counter++;} Module.exports={counter:counter,//(A)Inccounter:inccounter,};//------main1.js------varCounter = require ('./lib '). Counter;//(B)varInccounter = require ('./lib ')). Inccounter;//The imported value is a (disconnected) copy of a copyConsole.log (counter);//3Inccounter ();//Console.log (counter);//3//The imported value can changedcounter++; Console.log (counter);//4

Another form of expression cannot be changed.

// ------main2.js------ var lib = require ('./lib '); // The imported value is a (disconnected) copy // 3  //  3// the imported value can changedlib.counter++  // 4

2.4.2 in ES6

//------lib.js------Export Let counter = 3; exportfunctionInccounter () {counter++;}//------main1.js------Import {counter, inccounter} from './lib ';//The imported value ' counter ' is liveConsole.log (counter);//3Inccounter (); Console.log (counter);//4//The imported value can ' t be changedcounter++;//TypeErrorIf you import the module object via the asterisk (*), you get the same results://------main2.js------Import * as Lib from './lib ';//The imported value ' counter ' is liveConsole.log (Lib.counter);//3Lib.inccounter (); Console.log (lib.counter);//4//The imported value can ' t be changedlib.counter++;//TypeError

In another example, you can't change the imports, but you can change its property approach

// ------lib.js------export Let obj = {}; // ------main.js------Import {obj} from './lib '//  OK//  TypeError

The next section discusses destructuring.

Top 10 ES6 features module "Modules"