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);
    });
  }