An overview of the

Prior to ES6, modularity was implemented using RequireJS or seaJS (a modularity library based on the AMD specification, and a modularity library based on the CMD specification, respectively).

ES6 introduces modularity, designed with the idea that module dependencies, as well as input and output variables, can be determined at compile time.

ES6 modularity is divided into export @ and import modules.

The characteristics of

ES6 modules automatically turn on strict mode, regardless of whether you add use Strict to the module header. .

Module can import and export various types of variables, such as functions, objects, strings, numbers, booleans, classes and so on.

Each module has its own context, and variables declared in each module are local variables that do not pollute the global scope.

Each module is loaded only once (singleton). If you load the same file in the same directory again, it is directly read from memory.

The export and import

Basic usage

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

  • Exported function declarations and class declarations must have names (the export default command is another consideration).
  • You can export not only declarations but also references (such as functions).
  • The export command can appear anywhere in the module, but it must be at the top of the module.
  • The import command is promoted 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!
Copy the code

It is recommended to use curly braces to specify that the set of variables to be output should be written at the end of the document, specifying the export interface.

Functions and classes should have names, and the end of the export document should not have names.

As the usage of the

The name of the interface exported by the export command must have a one-to-one relationship with variables in the module.

The name of the imported variable must be the same as the name of the exported interface, that is, the sequence may be different.

/*-----export [test.js]-----*/
let myName = "Tom";
export { myName as exportName }
 
/*-----import [xxx.js]-----*/
import { exportName } from "./test.js";
console.log(exportName);// TomuseasRedefine the name of the exported interface to hide variables inside 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
Copy the code

Export interface names of different modules are the same. Use AS to redefine variable names.

Features of the import command

Read-only attributes: it is not allowed to overwrite interface references in scripts that load modules. That is, you can overwrite values whose import variables are of object attribute type, but not values whose import variables are of basic type.

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

Singleton pattern: If the same import statement is repeated many times, it is executed once, not many times. Import The same module declaring different interface references will declare corresponding variables, but only perform import once.

import { a } "./xxx.js";
import { a } "./xxx.js";
// import {a} "./xxx.js";
 
import { a } from "./xxx.js";
import { b } from "./xxx.js";
// import {a, b} from "./xxx.js";
Copy the code

Statically executed features: Import is statically executed, so expressions and variables cannot be used.

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
Copy the code

Export the default command

  • In a file or module, there can be more than export and import, but only one export default.
  • Default in export Default is the corresponding exported interface variable.
  • If you export the file in export mode, add {} when importing the file. Export default does not need to import the file.
  • 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 is already the corresponding exported variable, cannot be followed by variable declaration statement
 
import b from "./xxx.js"; // No need to add {}, use arbitrary variables to receive
Copy the code

Composite using

Export and import can be used in the same module.

  • You can rename the export interface, including default.
  • Using export and import in combination, you can also export all of them, and the interface exported by the current module will overwrite the inherited export.
export { foo, bar } from "methods";
 
// Is approximately equal to the following two statements, but the above import/export mode does not import foo and bar
import { foo, bar } from "methods";
export { foo, bar };
 
/* ------- features 1 --------*/
// Change the name to normal
export { foo as bar } from "methods";
// Convert foo to default
export { foo as default } from "methods";
// Convert default to foo
export { default as foo } from "methods";
 
/* ------- features 2 --------*/
export * from "methods";
Copy the code