12 es6模块化

在ES6出现之前，JS不像其他语言拥有“模块化”这一概念，比如python的import，就连css也有@import，于是为了支持JS模块化，我们使用类、立即执行函数或者第三方插件(RequireJS、seaJS)来实现模块化，在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。es6成为浏览器和服务器通用的模块解决方案。

一个文件就是一个模块, 模块中的数据都是私有的，ES6模块化模块和NodeJS中一样, 可以通过对应的关键字暴露模块中的数据, 可以通过对应的关键字导入模块, 使用模块中暴露的数据

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。
特点：静态加载，传统的commenJS属于是运行时加载（无法在编译时做静态优化），而es6模块化成为编译时加载，所以效率要比commonJS模块加载的效率高，这也就导致了没法引用es6模块本省，因为它不是对象；es5模块自动采取严格模式

eg：
```
let { stat, exists, readfile } = require('fs');
//只有在运行时才会生成一个对象，然后加载这个对象中的三个方法，
import { stat, exists, readFile } from 'fs';
```

1.export命令

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

一个模块就是一个独立的文件，该文件内部的所有变量外部无法获取，如果你希望外部能够读取模块内的一个变量，必须使用export关键字输出该变量，函数和类也是同理

eg：
```
//profile.js
export var firstName='Michael'
export var lastName = 'Jackson';
export var year = 1958;
```
或者：
```
var firstName='Michael'
var lastName = 'Jackson';
var year = 1958;
export {firstName,lastName,year as YEARS} //可以使用as重命名
```
只有这两种写法，其他的都是错误的，比如什么var m=1 export m也错了，没有加{}是错误的

2.import命令

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

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

建议对import导入的变量都采用只读形式，不要修改，如果是对象是可以修改的，因为避免难以排查的错误

from后的路径

可以是相对路径也可以是绝对路径，如果不带路径，就必须有配置文件，告诉 JavaScript 引擎该模块的位置。

如果多次重复执行同一句import语句，那么只会执行一次

3.整体加载

import * as circle form ‘./circle’

eg:

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

import * as circle from './circle';  //cricle对象不允许修改
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));