ES6 新特性之 Module

关于模块化，在以前有过AMD和CMD，require.js以及后面的sea.js，实际上都是借助于第三方的插件。那么在ES6里面它官方引入了模块化编程，它的不一样之处在于：

ES6的Module它的运行环境其实是编译时的，也就是说在编译时它就会把全部的依赖导入导出，每个模块有本身独立的命名空间，而后这些关系都明确了。

1：基本概念

编译时模块(module)体系

2：export - 规定模块的对外接口

export在ES5以前或者是在sea.js和require.js里面咱们用的都是export.default，可是在ES6咱们实际上只须要用一个export关键字就能够了，它是规定模块化的对外接口，也就是说导出的是什么。

状况一：下面的代码这两个若是放在一个模块化的尾部（或者是一个js尾部、一段代码尾部），那么它的意思就是说导出了两个变量，一个叫作name，一个叫作age，这是最基本的用法。

也就是说在一个js一段代码下咱们导出了两个模块，两个变量能够供外部使用或者说两个方法。

export const name = 'Eric';
export const age = 28;

状况二：default，默认引入。

当别人使用咱们写的模块的时候，可能会不知道咱们导出的关键字是什么，可是当使用了default以后，无论外来是以什么引入，以什么变量把它命名为何都没有关系，由于这时候导出的是整个的对象。所以，别人在引用这个对象时，能够随意命名，对象下面就能够看到变量的名称。

const name = 'Eric';
const age = 28;
export default { name, age };

状况三：导出方法

const name = 'Eric';
const age = 28;
export default function getProperty() {
  return `name: ${name} age: ${age}`
};

状况四：自身导出

const name = 'Eric';
const age = 28;
export default {
  name as customName,
  age as customAge
};

3：import - 加载模块

这里{ name, age }用到的是一个解构，对应上面的第一种导出写法。

import { name, age } from '../xxx.js';

重命名：

import { name as customName } from '../xxx.js';

下面的没有{}没有解构的它获得的是一个默认导出的，能够不用解构就直接导出。

import getProperty from '../xxx.js';

lodash是一个颇有用的函数是编程的工具库。

在ES6里面，当咱们引入两个一样的内容的时候，好比下面的写两遍import，但实际上它只会引入一次。甚至说当咱们引用了同一个文件两次，每次取它不一样的方法，可是实际上也只引入一次。这是ES6 Module内部的特有处理。

import 'lodash';
import 'lodash';
​
import { name } from '../xxx.js';
import { age } from '../xxx.js';

整个文件所有引入：* 表明全部，以下把../xxx.js文件下全部的都导出来而后把它命名到这个utils 。

import * as utils from '../xxx.js';

4：export 与 import 复合

在某些场景下，咱们可能须要把export和import结合。好比咱们引入了不少其余的库，而后封装一下供咱们使用，在封装时咱们须要引入其余的库，也就是import，而后抛出来给咱们本身的模块，这个时候咱们就要用到export。

// 先引进来再导出去
import { foo, bar } from '../xxx.js';
export { foo, bar };
​
/* 等同于 */
export { foo, bar } from '../xxx.js';

把../xxx.js中的所有导出来而后再把它导出去：

export * from '../xxx.js';

把../xxx.js里面default导出的再把它导出来，这样省去了一些中间变量：

export { default } from '../xxx.js';

从../xxx.js中只引入其中一个es6，可是咱们把它默认的default成为了一个es6：

import { es6 } from '../xxx.js';
export default es6;
​
// 等同于 也就是说从../xxx.js把es6引进来而后再把它export默认导出
export { es6 as default } from '../xxx.js';
​
// 默认导出也能够重命名
export { default as es6 } from '../xxx.js';

5：import() - 动态加载

import除了引入模块，通常来讲咱们一般是把它放在文件的顶部来引入依赖，可是这个import它能够动态加载。好比说咱们有一些文件不须要用到，好比点击某一个按钮才可能去实现一些功能，那么实现这个功能的时候咱们就须要一些额外的文件，这个时候就须要用到import动态加载了。

• 按需加载

  button.addEventListener('click', event => {
   import('./xxx.js')
    .then(value => {
   console.log(value);
    })
    .catch(error => {
   /* Error */
    })
  });

• 条件加载

  if (condition === 1) {
    import('./xxx.js').then(module => {
      console.log(module.default);
    });
  } else if (condition === 2) {
    import('./xxx.js').then(({ name, age }) => {
      console.log(name, age);
    });
  } else {
    import('./xxx.js').then(({ name: customName, age }) => {
      console.log(customName, age);
    });
  }