ES6 标准入门-Module

Posted 2020-10-19 lu0511

1、ES6模块的设计思想是尽量静态化，使得编译时就会确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块都只能在运行时确定这些东西。

2、ES6模块不是对象，而是通过export显示指定输出的代码

3、严格模式

ES6的模块自动采用严格模式

4、export命令

模块功能主要由两个命令构成：export和import

export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能

5、import命令

6、模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用*指定一个对象，所有输出值都加载在这个对象上，下面是circle.js文件，输出两个方法：area和circumference

// circle.js
export function area(radius){
  return Math.PI * radius * radius;
}
export function circunference(radius){
  return 2*Math.PI*radius;
}

现在加载这个模块

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

上面的写法逐一指定要加载的方法，整体加载的写法如下：

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

7、module命令

module命令可以取代import语句，达到整体输入模块的作用。

// main.js
module circle from ‘./circle‘
console.log("圆面积："+circle.area(4));
console.log("圆周长："+circle.circunference(14));

8、export default 命令

// export-default.js
export default function() {
  console.log(‘foo‘);
}
// import-default.js
import customname from ‘./export-default‘;
customname();//‘foo‘

上面的import命令可以用任何名称指向export-default.js输出的方法，这时就不需要知道原模块输出的函数名。需要注意的是，这时import命令后面不使用大括号

下面比较一下默认输出和正常输出

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

import crc32 from ‘crc32‘; // 输入

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

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

 

上面代码的两组写法，第一组是使用export default时，对应的import语句不需要使用大括号；第二组是不使用export default时，对应的import语句需要使用大括号。

export default命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出，因此export default命令只能使用一次。所以，import命令后面才不用加大括号，因为只可能对应一个方法。

9、ES6模块加载的实质

ES6模块加载的机制与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。

因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块