ES6 export command and import command

The module function mainly consists of two commands: export and import.
A module is a separate file, and the variables in this file cannot be obtained from the outside. If you want to obtain this variable externally, only use export to export this variable inside the file, and then import this variable externally.

export command

export can export some variables, functions, arrays, constants, etc.
For example, in the variable.js file, two variables are defined: a and b, so if you want to use the two variables externally, you can use exoprt to export these two variables:

export var a = 10;
export function fo() {
    
    
  ......
};

The above writing method can be changed in another way: (it is recommended to only use the following method, which is more intuitive)

var a = 10;
function fo() {
    
    
  ......
};
export {
    
    a, fo};

name

The name of the variable exported by export is usually the original name of the variable (in the above example, the exported variable names are a and fo). But you can use the as keyword to rename:

......
export {
    
    a as v_a, fo as f_fo};

import command

Now, to use the variables in the variable.js file in the test.js file:

import {
    
    a, fo} from './variable.js';
console.log(a);

Here, the import command is used to import a and fo from the variable.js file. A curly brace directly accepted by import, and the value inside must be the same as that exported by export (that is, the name mentioned in the previous step, this name must be the same).
Note: The variables entered by the import command are all read-only, because its essence is an input interface. In other words, it is not allowed to rewrite the interface in the script that loads the module.
Since the import command is executed during the compilation phase, even if it is defined at the end, it will be promoted to the head of the module.

name

Similarly, imports can also be renamed using the as keyword:

import {
    
    a as v_a, fo as f_fo} from './variable.js';
......

Overall loading

The method described above is to load one by one (that is to say, it can be loaded selectively), or it can be loaded as a whole, that is, use an asterisk (*) to specify an object, and all output values ​​​​are loaded on this object :

import {
    
     * as v} from './variable.js';
console.log(v.a);

export default command

When using the import command above, you need to know what the export name is. Now introduce a method, regardless of the export name, that is, when exporting, use default:

function foo() {
    
    
  ......
}
export default foo;

Then when importing, you can specify a name yourself:

import customName from './variable.js';

Here customName is a custom name, and there is no need to use curly braces.
It should be noted that the essence of export default is to assign the following value to the default variable, so:

// 正确
export default 10;
// 报错
export 10;

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

Composite writing of import and export

In a module A, first imoortB, then exprtB, you can write:

export {
    
     va, vb } from './B.js';

// 可以简单理解为
import {
    
     va, vb } from './B.js';
export {
    
     va, vb };

Similarly, the compound writing method also supports the writing method of renaming, overall output, and default interface:

// 接口改名
export {
    
     va as v_a, vb as v_b } from './B.js';
// 整体输出
export * from './B.js';
// 默认输出
export {
    
     default } from './B.js';

The writing method of changing the named interface to the default interface is as follows.

export {
    
     va as default } from './B.js';

// 等同于
import {
    
     va } from './B.js';
export default va;