ES6詳解八：模塊（Module）！--各類導入導出方法

[-]

1. 基本用法
1. 命名導出named exports
2. 默認導出
3. 命名導出結合默認導出
4. 僅支持靜態導入導出
5. 各類導入和導出方式總結

 

modules是ES6引入的最重要一個特性。 
因此之後再寫模塊，直接按照ES6的modules語法來寫，而後用 babel + browserify 來打包就好了。

modules規範分兩部分，一部分是如何導出，一部分是如何導入。

基本用法

命名導出(named exports)

能夠直接在任何變量或者函數前面加上一個 export 關鍵字，就能夠將它導出。 
這種寫法很是簡潔，和平時幾乎沒有區別，惟一的區別就是在須要導出的地方加上一個 export 關鍵字。 
好比：

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

而後在另外一個文件中這樣引用：

import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));

你可能會注意到這個奇怪的語法 { square, diag } 不就是前面講過的 destructing嗎。因此你會覺得還能夠這樣寫：

import lib from 'lib';
 square = lib.square;

可是其實這樣是錯的，由於 import { square, diag } from 'lib’; 是import的特有語法，並非 destructing 語法，因此其實import的時候並非直接把整個模塊以對象的形式引入的。

若是你但願能經過 lib.square 的形式來寫，你應該這樣導入：

import * as lib from 'lib';
 square = lib.square;

不過值得注意的一點是，若是你直接用babel編譯，執行是會報錯的。由於 babel 並不會徹底編譯 modules，他只是把 ES6 的modules語法編譯成了 CMD 的語法，因此還須要用 browserify 之類的工具再次編譯一遍。 
若是你發現 browserify 找不到 lib，能夠改爲 from ‘./lib’ 試試。

默認導出

你們會發現上面的寫法比較麻煩，由於必需要指定一個名字。其實不少時候一個模塊只導出了一個變量，根本不必指定一個名字。 
還有一種用法叫默認導出，就是指定一個變量做爲默認值導出：

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

默認導出的時候不須要指定一個變量名，它默認就是文件名。 
這裏的區別不只僅是不用寫名字，而是 導出的默認值就是模塊自己，而不是模塊下面的一個屬性，便是 import myFunc from 'myFunc’; 而不是 import {myFunc} from 'myFunc’;

命名導出結合默認導出

默認導出一樣能夠結合命名導出來使用：

export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

上面的代碼導出了一個默認的函數，而後由導出了兩個命名函數，咱們能夠這樣導入：

import _, { each } from 'underscore';

注意這個逗號語法，分割了默認導出和命名導出

其實這個默認導出只是一個特殊的名字叫 default，你也能夠就直接用他的名字，把它當作命名導出來用，下面兩種寫法是等價的：

import { default as foo } from 'lib';
import foo from 'lib';

一樣的，你也能夠經過顯示指定 default 名字來作默認導出, 下面兩種寫法是同樣的：

//------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

僅支持靜態導入導出

ES6規範只支持靜態的導入和導出，也就是必需要在編譯時就能肯定，在運行時才能肯定的是不行的，好比下面的代碼就是不對的：

//動態導入
var mylib;
if (Math.random()) {
    mylib = require('foo');
} else {
    mylib = require('bar');
}
//動態導出
if (Math.random()) {
    exports.baz = ...;
}

爲何要這麼作，主要是兩點：

1. 性能，在編譯階段即完成全部模塊導入，若是在運行時進行會下降速度
2. 更好的檢查錯誤，好比對變量類型進行檢查

各類導入和導出方式總結

總結一下，ES6提供了以下幾種導入方式：

// Default exports and named exports
import theDefault, { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import { named1, named2 } from 'src/mylib';

// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';

// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';

// Only load the module, don’t import anything
import 'src/mylib';

以下幾種導出方式：

//命名導出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;

export function myFunc() {
    ...
}
export function* myGeneratorFunc() {
    ...
}
export class MyClass {
    ...
}
// default 導出
export default 123;
export default function (x) {
    return x
};
export default x => x;
export default class {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
};
//也能夠本身列出全部導出內容
const MY_CONST = ...;
function myFunc() {
    ...
}

export { MY_CONST, myFunc };
//或者在導出的時候給他們改個名字
export { MY_CONST as THE_CONST, myFunc as theFunc };

//還能夠導出從其餘地方導入的模塊
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';

注： 
主要參考這篇文章：http://www.2ality.com/2014/09/es6-modules-final.html