ES6 module (introduction, features)

introduce

ES6 introduces modularity. Its design idea is to determine the dependencies of modules and the variables of input and output at compile time.

The modularization of ES6 is divided into two modules: export @ and import.

characteristic

The module of ES6 automatically turns on the strict mode, whether you add use strict; to the module header or not;.

The module can import and export various types of variables, such as functions, objects, strings, numbers, Boolean values, classes, etc.

Each module has its own context. The variables declared in each module are local variables and will not pollute the global scope.

Each module is loaded only once (it is a single instance). If you load the same file in the same directory, you can read it directly from memory.

export and import

Basic Usage
The module imports and exports various types of variables, such as string, value, function and class.

// Export variables. Variables can be of any type
export const name = 'es module'

// Export method
export function foo() {}

// Export class
export class Person{}

//Export multiple variables. It should be noted here that {} in export {name, foo, person} is not correct
//For example, it is a syntax for export ing variables
const name = 'es module'
function foo () {}
class Person {}
export { name, foo, Person }

as keyword
If we want to modify the exported variable name, we can use the as keyword to modify the variable alias, but this method is only applicable to export {}

const name = 'es module'

export { name as alias }

default keyword
As the name suggests, default represents a default exported variable, and export default can export any variable or object

const name = 'es module'
export default name
or
export default { name } // The {} here is an object
or 
export {name as default} // In this way, you can also export name by default

Unlike export {}, {} in export default {} is an object. Because export default can export any variable or value, export default {} exports an object, and the import rules are different after using the default keyword.

import

The variable imported with import {} does not copy the value, but points to the address of its variable. Therefore, when the value exported in the module changes, the variable imported will also change, and the variable cannot be modified (modification here means re assignment)

For normal exported values

let name = "lihegui",
sex = "male"
export {name，sex}

import {name,sex} from "./xxx.js"

For default exported values

let name = "lihegui"
export defalut name

import people_name from "./xxx/js"

keyword
Sometimes we need to import all the member variables in the module, but using the conventional way to import them one by one is error prone and inconvenient. At this time, we can use keywords

import {a, b, c, d, e} from './modules.js'
// or
import * as param from './modules.js'
console.log(param)
// { ... }  param is an object that contains all members

The import path can be absolute path, relative path and complete link, but it cannot be omitted/ And suffix

CommonJS

Import through the require function
Through exports or module Exports export
Synchronous loading

CommonJS module specification

CommonJS module specification is mainly divided into three parts: module reference, module definition and module identification
Benefits of CommonJS module specification
CommonJS module specification solves the problem of variable pollution well. Each module has independent space and does not interfere with each other. Compared with other schemes such as namespace, it is dwarfed.

modular

export

There is also a free variable exports in each module, which is an object on which the API of the module's external output is bound. Moreover, exports is the only way for the module to export API.

var name = "lihegui"
var sex = "male"
var func2 = function() {
   console.log("func2");
};
 
exports.name = name;
exports.sex = sex;
exports.function2 = func2;
exports.people = {
  name,
  sex
}

require

Module reference

var Math=require('math');
const {name,sex,people} = require("./function.js")

With and without path
In the above example, the require d parameter is only the string of the module name without path. It refers to the node in the current directory of a.js_ The math module in the modules directory. If there is no node in the current directory_ Modules directory or node_ If the math module is not installed in the modules directory, an error will be reported.
If the module to be introduced is in another path, you need to use a relative path or an absolute path, for example:

var add = require('./add.js')

module

In each module, the module object represents the module itself
It is an object. This object has an id attribute, which represents the id of the module. At the same time, it should be a read-only attribute.
The module object can have a uri attribute that indicates the source from which the module is loaded
module. Usage of exports

let name = "lihegui"
let sex = "male"
module.exports = {
    name,
    sex
}

module. Differences between exports and exports

Differences between ES6 module and CommonJS

Recommended articles on the differences between ES6 module and CommonJS