es6 Module语法

Posted 2021-02-12 zhucj

模块功能主要由两个命令构成：export 和  import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export 可以导出   变量、函数、类。

导出可以分为 export ( 具名导出 ) 和 export default ( 默认导出 )。

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

export 输出变量方式一

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

export {firstName, lastName, year};

export 输出变量方式二

注：两种方式是等价的，但建议第二种方式。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。


export function multiply(x, y) {
  return x * y;
};

export 输出函数

针对以上 export 导出，导入的方式如下：

// main.js
import {firstName, lastName, year, multiply} from ‘./profile.js‘;

import 具名导出模块

注：具名导出在导入时必须和模块中导出的变量名或函数名保持一致。

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 1 // export-default.js
 2 export default function () {
 3   console.log(‘foo‘);
 4 }
 5 // import-default.js
 6 import customName from ‘./export-default‘;
 7 customName(); // ‘foo‘
 8 
 9 -----------------------------------------------
10 
11 // export-default.js
12 export default function foo() {
13   console.log(‘foo‘);
14 }
15 
16 // 或者写成
17 
18 function foo() {
19   console.log(‘foo‘);
20 }
21 
22 export default foo;

export default 导出

注：默认导出在导入时可以自定义变量名，默认输出只能有一个。

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from ‘crc32‘; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from ‘crc32‘; // 输入

比较默认输出和正常输出

第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。