Detailed introduction to modules in ES6 (with examples)

This article brings you a detailed introduction to the module in ES6 (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. helped.

This article mainly introduces the usage of the module Module, a new feature of ES6, briefly explains the concept and functions of the module Module, and analyzes the usage method and related precautions of the module Module in the form of examples. What is needed Friends can refer to

1. Introduction to Module

Class in ES6 is just syntactic sugar for object-oriented programming. It upgrades the writing method of prototype chain inheritance of the constructor of ES5. It does not solve the modularity problem. The Module function is proposed to solve this problem.

Historically, JavaScript has not had a module system, and it is impossible to split a large program into small files that depend on each other and then assemble them in a simple way. Other languages ​​have this feature.

Before ES6, the community developed some module loading solutions, the most important ones being CommonJS and AMD. The former is for servers and the latter is for browsers. ES6 implements module functions at the level of language specifications, and the implementation is quite simple. It can completely replace the existing CommonJS and AMD specifications and become a universal module solution for browsers and servers.

The design idea of ​​ES6 modules is to be as static as possible, so that the dependencies of the module can be determined at compile time (this kind of loading is called "compile-time loading"), as well as the input and output variables. Both CommonJS and AMD modules can only determine these things at runtime.
The syntax for browsers to use ES6 modules is as follows.

<script type="module" src="fs.js"></script>

The above code inserts a module fs.js into the web page. Since the type attribute is set to module, the browser knows that this is an ES6 module.

// ES6加载模块
import { stat, exists, readFile } from 'fs';

The above code loads a Module through import and loads some of its methods.

2. Import and export

The module function mainly consists of two commands: export and import. The export command is used to specify the external interface of the module, and the import command is used to enter the functions provided by other modules.
A module is an independent file. All variables inside this file cannot be obtained from the outside. If you want the outside world to be able to read a variable inside the module, you must use the export keyword to output the variable. Below is a JS file that uses the export command to output variables.

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

In addition to the above, there is another way to write export. (This is recommended because you can see at a glance which variables are output at the end of the script.)

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

In addition to outputting variables, the export command can also output functions or classes. Normally, the variable output by export is its original name, but it can be renamed using the as keyword.

function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

After using the export command to define the external interface of the module, other JS files can load this module (file) through the import command.

// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

The import command in the above code is used to load the profile.js file and input variables from it. The import command accepts an object (indicated by curly braces) that specifies the name of the variable to be imported from other modules. The variable name inside the curly brackets must be the same as the name of the external interface of the imported module (profile.js).
If you want to rename the input variable, use the as keyword in the import command to rename the input variable.

import { lastName as surname } from './profile';

The import command has a promotion effect and will be promoted to the head of the entire module and executed first.

foo();
import { foo } from 'my_module';

3. Overall loading of the module

In addition to specifying a certain output value to load, you can also use overall loading, that is, use an asterisk (*) to specify an object. All output values ​​are loaded into this object.
There is a circle.js file, which outputs two methods area and circumference.
Now, load this module.

// main.js
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

The above method is to specify the methods to be loaded one by one. The overall loading method is as follows.

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

4. Export default

In order to provide convenience to users and allow them to load the module without reading the document, the export default command must be used to specify the module Default output.

// export-default.js
export default function () {
  console.log('foo');
}

The above code is a module file export-default.js, and its default output is a function.
When other modules load this module, the import command can specify any name for the anonymous function.

// import-default.js
import customName from './export-default';
customName(); // 'foo'

It should be noted that curly brackets are not used after the import command.
Essentially, export default is to output a variable or method called default, and then the system allows you to give it any name. It cannot be followed by a variable declaration statement.

// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;

5. The essence of ES6 module loading

The mechanism of ES6 module loading is completely different from CommonJS module. CommonJS modules output a copy of the value, while ES6 modules output a reference to the value.
The CommonJS module outputs a copy of the output value. That is to say, once a value is output, changes within the module will not affect this value. Look at the following example of the module file lib.js.

// lib.js
var counter = 3;
function incCounter() {
 counter++;
}
module.exports = {
 counter: counter,
 incCounter: incCounter,
};

The above code outputs the internal variable counter and the internal method incCounter that overrides this variable. Then, load this module in main.js.

// main.js
var mod = require('./lib');
console.log(mod.counter); // 3
mod.incCounter();
console.log(mod.counter); // 3

上面代码说明，lib.js模块加载以后，它的内部变化就影响不到输出的mod.counter了。这是因为mod.counter是一个原始类型的值，会被缓存。除非写成一个函数，才能得到内部变动后的值。

// lib.js
var counter = 3;
function incCounter() {
 counter++;
}
module.exports = {
 get counter() {
  return counter
 },
 incCounter: incCounter,
};

上面代码中，输出的counter属性实际上是一个取值器函数。现在再执行main.js，就可以正确读取内部变量counter的变动了。
ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的“符号连接”，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。
还是举上面的例子。

// lib.js
export let counter = 3;
export function incCounter() {
 counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

上面代码说明，ES6模块输入的变量counter是活的，完全反应其所在模块lib.js内部的变化。
由于ES6输入的模块变量，只是一个“符号连接”，所以这个变量是只读的，对它进行重新赋值会报错。

// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

上面代码中，main.js从lib.js输入变量obj，可以对obj添加属性，但是重新赋值就会报错。因为变量obj指向的地址是只读的，不能重新赋值，这就好比main.js创造了一个名为obj的const变量。
最后，export通过接口，输出的是同一个值。不同的脚本加载这个接口，得到的都是同样的实例。

// mod.js
function C() {
 this.sum = 0;
 this.add = function () {
  this.sum += 1;
 };
 this.show = function () {
  console.log(this.sum);
 };
}
export let c = new C();

上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。

// x.js
import {c} from './mod';
c.add();
// y.js
import {c} from './mod';
c.show();
// main.js
import './x';
import './y';

现在执行main.js，输出的是1。这就证明了x.js和y.js加载的都是C的同一个实例。

The above is the detailed content of Detailed introduction to modules in ES6 (with examples). For more information, please follow other related articles on the PHP Chinese website!