ES6之模塊化導入導出

一、概述

在js的歷史上一直沒有模塊（module）體系，沒法將一個大程序拆分紅相互依賴的小文件，再用簡單的方法拼裝起來，這對開發大型的、複雜的項目造成了巨大障礙。

在 ES6 以前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，後者用於瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，

並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。

二、ES6 模塊（module）的設計思想是什麼？

那就是儘可能的靜態化，使得編譯時就能肯定依賴關係

三、CommonJS模塊 和 ES6 模塊比較

看兩段代碼

// 導出 node 文件系統的幾個方法
let {stat,exists,readFile} = require('fs');

注意：這段代碼其實是加載了整個 fs 模塊。這種加載方式稱爲「運行時加載」，由於只有運行時才能獲得這個對象。致使徹底沒辦法在編譯時作「靜態優化」。

// ES6 模塊
import {stat,exists,readFile} from 'fs'

注意：這段代碼只導出了三個方法，其餘的方法沒有加載。這種方式稱爲「編譯時加載」，ES6能夠在編譯時就完成模塊加載，效率要比CommonJS模塊的加載方式高。　　

四、模塊功能命令之 export 和 import。

模塊功能主要有兩個命令構成：export 和 import。 export 命令用於規定模塊的對外接口，import命令用於輸入其餘模塊提供的功能。

一個js文件就是一個模塊，該文件內部的全部變量，外部沒法獲取，若是你但願外部可以讀取模塊內部某個變量，就必須使用export關鍵字輸出該變量。

 

輸出變量：

//eg:對外部輸出三個變量----》聲明後輸出
// js 文件內部
export var name = 'zjl'
export var age = 18
export var gender = '男'

// eg:對外輸出三個變量-----》先聲明再輸出   優先使用這種寫法

var name = 'zjl'
var age = 18
var gender = '男'
export {name,age,gender}

 輸出函數：

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

export 輸出的變量或函數都有本身的名字，咱們也能夠重命名：

function test(){...}
function test2(){....}
function test3(){...}

export {test as fun1,test2 as fun2,test3 as fun3}

注意：export 命令規定的是對外接口，接口名與模塊內部變量之間，必須與模塊的變量創建一一對應關係。（有種鍵值對的意思），

簡單來講導出的變量他必須有一個值。

export 語句不能放在代碼塊內，如函數內，不然會報錯。由於此作法使其沒法作到靜態化，違背了 ES6 模塊的設計理念。 

 

import 命令

經過 export 定義了模塊的接口以後，咱們能夠經過import 命令加載這個模塊。

載入模塊方式：

// 大括號內的變量名，必須跟 export 對外接口的變量名一致
import {name,age,gender}  from './XXX.js'
// 重命名
iport {name as username};

注意幾個 import 關鍵點

①import 導入的值都是隻讀的，不容許修改輸入的接口。

②能夠修改導入的對象 ，能夠修改導入對象的屬性，但不推薦這樣作，建議把導入的變量（不論是普通變量仍是對象）都當作只讀的。

③import.....from 中 from 後面的路徑能夠是絕路徑也能夠是相對路徑。

④js模塊導入時能夠省略後面 的 .js後綴。

⑤import 命令具備提高效果，它會把import命令提高到模塊的頭部，首先執行。

⑥執行同一個import命令屢次，默認只會執行一次，不會執行屢次

import {name} from './XXX.js'
import {name} from './XXX.js'
//只會執行一次

⑦從同一個模塊經過多條import加載不一樣變量，但它們對應的是同一個模塊實例。import語句是 單例模式（Singleton）

import {name}  from './a.js'
import {age}  from 'a.js'
// 單例模式

⑧不推薦 import 和 require 在同一個模塊使用，由於他們的執行時期不同，致使的結果可能就不同。

目前在模塊中使用 require 還須要 Babel 轉換比較麻煩。

⑨總體加載模塊

import *  as user from './a.js'
// 導出 a 模塊的全部值並命名爲 user（一個對象）

五、模塊功能命令之 export default 

咱們經過前面瞭解到 import 導入 export 對外接口 須要知道對外接口的準確名稱，才能拿到對應的值，這樣是比較麻煩的。爲此ES6還提供了 export default 命令，

使用 export default 導出的值，import導入能夠爲這個導出值自定義名稱。

// 導出模塊 a.js，導出一個匿名函數
export default function (){...}

//導入模塊 b.js,  
import fun  from './a.js';    // fun還能夠爲其餘合法的名稱

默認輸出（export default）注意點：

①export default 只能使用一次，export可使用屢次

②後面不能跟變量聲明語句

export  default var a=10; // 寫法錯誤

③export default a 的含義就是jiang將變量 a 的值賦給變量 default，因此上面那種寫法是錯誤的。

④ export 導出必定要指定對外接口 而 export default 不須要。

⑤export 和 export default 能一塊兒使用。

六、export 和 import 的複合寫法。

export {name,age} from 'a.js' // 這種寫法至關於轉發了這兩個接口，沒有實際導入當前模塊，當前模塊不能直接使用這兩個變量。

// 能夠寫成兩句,實際導入當前模塊
import {name,age} from 'a.js'
export {name,age};

七、介紹到此結束。