ES6 Module语法

在上网课的饰扣遇到了ES6新语法规则，看了

阮一峰ECMASCRIPT6入门

在ES6之前，社区制定了一下模块化加载方案，只要有CommonJS和AMD两种。前者主要用于服务器，后者用于浏览器。ES6在语言标准层面上，实现了模块化功能，可以完全取代CommonJS和AMD规范，成为浏览器个服务器通用的模块解决方案。
ES6模块设计思想，是尽量的静态化，是编译时就能确定模块的依赖关系，以及输入会让输出的量。CommonJS和AMD模块，都只能在运行时确定这些东西。比如，CommonJS模块就是对象，输入时必须查找对象属性。
例如：

//CommonJS模块
let {stat,exists,readFile} = require('fs');

//等同于
let_fs = require('fs');
let start = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

上面的代码实质是整体加载fs模块（即加载fs所有方法），生成一个对象（_fs）,然后再从这个对象上读取三个方法。这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”。
ES6模块不是对象，而是通过export命令显式指定输出代码，再通过import输入。
` import { stat,exists,readFile} from 'fs'; `
上面代码的实质是从fs模块记载三个方法，其他方法不加载。这种加载称为“编译时加载”或者“静态加载”。
ES6的模块自动采用严格模式，不管你有没有在模块头部加上’use strict’;

export命令

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

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。

//profile.js
export var firstName = 'Michael';
export var lastName = 'Jack';
export var age = 20; 

上面的代码就是一个profile.js文件，保存了用户信息。ES6将其视为一个模块，里面使用的export命令对外部输出了三个变量。
export的写法除了像上面这样，还有两天一种：

var firstName = 'Michael';
var lastName = 'Jack';
var age = 20; 
export{firstNmae,lasrName,year};

export命令除了输出变量，还可以输出函数或类（class）。

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

上面的代码是对外输出一个函数multiply

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

function v1(){...}
function v2(){...}
export{
  v1 as stream1,
  v2 as stream2，
  v2 as stream3
};

上面的代码使用as作为关键字，重命名了函数v1 ,v2接口。重命名之后v2可以用不同的名字输出两次。

import命令

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

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

上面代码的import命令，用于加载profile.js文件，并从中输入变量。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。