ES6语法—Module模块化（下）

上一篇文章讲述了ES6之前的一系列模块化规范，今天我们开始正式探讨ES6语法中的模块化

相信大家也都经历了“过程式的JavaScript”、“面向对象的JavaScript”，再到现在的“面向模块的JavaScript”。

ES6在语言标准的层面上，实现了模块功能，而且实现的相当简单，完全可以取代取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

ES6Module语法的优点

ES6模块：静态加载（编译时加载）
CommonJS 和 AMD 模块：动态加载（运行时加载）
即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高

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

//ES6模块
import { one, two,  three} from 'Num';

上面的代码的是知识从Num模块加载3个属性，其他方法和属性都不加载。这种加载成为“静态加载”或者“编译时加载”

// CommonJS模块
let { one, two, three} = require('Num');

//等同于
let num = require('Num');
let one = num.one;
let two= num.two;
let three = num.three ;

上面代码的实质是整体加载Num模块（即加载fs的所有方法和属性），生成一个对象（num）,然后再从这个对象上面读取3个属性。这种加载称为“动态加载”或者“运行时加载”

除了静态加载带来的各种好处，ES6 模块还有以下好处

不再需要UMD模块格式，将来服务器和浏览器都会支持ES6模块格式。目前，通过各种工具库，其实已经做到了这一代呢
将来浏览器的新API就能用模块格式提供，不再需要做全局变量或者navigator对象的属性
不再需要对象作为命名空间（比如Math对象），未来这些功能可以通过模块提供

export和import命令

模块功能主要有两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能，简单来说就是一个作为输出、一个作为输入

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

export输出变量

//输出变量
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};

export输出函数,同时可以使用as关键字重命名

//输出函数
export function multiply(x, y) {
  return x * y;
};

//as关键词重命名
function v1() { ... }
function v2() { ... }


export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

以下是main.js文件通过import加载这个模块

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

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

同样地，import加载方法和变量的时候可以使用as关键字重命名

import { lastName as surname } from './profile';

需要着重注意的是：export和import命令具有提升效果，会提升到整个模块的头部，首先执行，不能放在代码块内

到这里，你已经感受到ES6模块语法的威力，简简单单地通过export和import命令达到了面向模块化编程的效果；技多不压身，下面再体会一下关于两个命令的一些扩展

模块的整体加载

除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

import  * as name  from './profile'

export default命令

从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

//输出
export default var firstName = 'Michael';

//加载
import defaultName from './profile';
defaultName ;//Michael

export 与 import 的复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。

export {firstName, lastName, year};


//等同于
import {firstName, lastName, year} from  './profile',
export {firstName, lastName, year}

import()

前面介绍过，import命令会被 JavaScript 引擎静态分析。先于模块内的其他模块执行（叫做”连接“更合适）。所以，下面的代码会报错。

// 报错
if (x === 2) {
  import MyModual from './myModual';
}

因此，有一个提案，建议引入import()函数，完成动态加载。import()类似于 Node 的require()方法，区别主要是前者是异步加载，后者是同步加载。

import(specifier)

上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。import()返回一个 Promise 对象,下面来看一下import()函数的一些使用场合

(1)按需加载

import()可以在需要的时候，再加载某个模块。

button.addEventListener('click', event => {
  import('./box.js')
  .then(box => {
    box.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块

(2)条件加载

import()可以放在if代码块，根据不同的情况，加载不同的模块

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

上面代码中，如果满足条件，就加载模块 A，否则加载模块 B。

(3)动态的模块路径

import()允许模块路径动态生成。

import(f())
.then(...);

上面代码中，根据函数f的返回结果，加载不同的模块。

总结：

ES6模块化是一系列前端模块化规范发展而来的，实现相当简单，完全可以取代CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。
比起RequireJS和SeaJS优势在于语法简单
比起CommonJS和AMD优势在于静态加载（编译时加载）

参考

ECMAScript6Module的语法