4.4 ES6 Modules

❮ Linux Command Full Fight Javascript Or And And ❯

4.4 ES6 Modules

Category ES6 Tutorial

Overview

Before ES6, modularization was achieved using RequireJS or seaJS (both are modularization libraries based on the AMD and CMD specifications, respectively).

ES6 introduced modularization, designed to determine module dependencies and input/output variables at compile time.

ES6 modularization is divided into export and import modules.

Features

ES6 modules automatically enable strict mode, regardless of whether you have added use strict; at the beginning of the module.

Modules can import and export various types of variables, such as functions, objects, strings, numbers, booleans, classes, etc.

Each module has its own context, and variables declared within a module are local and do not pollute the global scope.

Each module is loaded only once (singleton), and if the same file is loaded again from the same directory, it is read directly from memory.

Export and Import

Basic Usage

Modules import and export various types of variables, such as strings, numbers, functions, and classes.

Exported function declarations and class declarations must have names (the export default command is considered separately).
Declarations and references (such as functions) can be exported.
The export command can appear anywhere in the module but must be at the top level.

The import command is hoisted to the top of the module and executed first.

/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
    return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass =  class myClass {
    static a = "yeah!";
}
export { myName, myAge, myfn, myClass }

/*-----import [xxx.js]-----*/
import { myName, myAge, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(myAge);// 20
console.log(myName);// Tom
console.log(myClass.a );// yeah!

It is recommended to use braces to specify the set of variables to be exported at the end of the document, clearly defining the exported interfaces.

Functions and classes need corresponding names, and exporting at the end of the document avoids mismatches.

Usage of as

The interface names exported by the export command must correspond one-to-one with the variables inside the module.

The imported variable names must be the same as the exported interface names, though the order can be inconsistent.

/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }

/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// Tom
Using as to redefine the exported interface name, hiding the internal variables of the module
/*-----export [test1.js]-----*/
let myName = "Tom";
export { myName }
/*-----export [test2.js]-----*/
let myName = "Jerry";
export { myName }
/*-----import [xxx.js]-----*/
import { myName as name1 } from "./test1.js";
import { myName as name2 } from "./test2.js";
console.log(name1);// Tom
console.log(name2);// Jerry

If the exported interface names from different modules are duplicated, use as to redefine the variable names.

Characteristics of the import Command

Read-only Property: It is not allowed to rewrite the reference pointer of the interface in the script loading the module, but you can modify the property values of variables of object type imported with import, not the values of basic types.

import {a} from "./xxx.js"
a = {}; // error

import {a} from "./xxx.js"
a.foo = "hello"; // a = { foo : 'hello' }

Singleton Pattern: Repeatedly executing the same import statement will only execute once and not multiple times. Importing the same module with different interface references will declare the corresponding variables but only execute the import once.

import { a } "./xxx.js";
import { a } "./xxx.js";
// Equivalent to import { a } "./xxx.js";

import { a } from "./xxx.js";
import { b } from "./xxx.js";
// Equivalent to import { a, b } from "./xxx.js";

Static Execution Characteristic: import is statically executed, so it cannot use expressions or variables.

import { "f" + "oo" } from "methods";
// error
let module = "methods";
import { foo } from module;
// error
if (true) {
  import { foo } from "method1";
} else {
  import { foo } from "method2";
}
// error

export default Command

There can be multiple export and import statements in a file or module, but only one export default.
The default in export default corresponds to the exported interface variable.
Variables exported via export need to be enclosed in {} when imported, while export default does not.

Members exposed by export default can be received using any variable.

var a = "My name is Tom!";
export default a; // Only one
export default var c = "error"; 
// error, default already corresponds to the exported variable, cannot follow a variable declaration statement

import b from "./xxx.js"; // No need for {}, use any variable to receive

Combined Usage

Note: import() is a proposal and will not be extended here.

export and import can be used together in the same module, with the following characteristics:

You can rename exported interfaces, including default.

Combined usage of export and import can also export all, and the exported interfaces of the current module will override the inherited ones.

export { foo, bar } from "methods";

// Approximately equivalent to the following two statements, but the above import-export method does not import foo and bar into the module
import { foo, bar } from "methods";
export { foo, bar };

/* ------- Feature 1 --------*/
// Normal rename
export { foo as bar } from "methods";
// Export foo as default
export { foo as default } from "methods";
// Export default as foo
export { default as foo } from "methods";

/* ------- Feature 2 --------*/
export * from "methods";