本文實例講述了ES6新特性之模塊Module用法。分享給大家供大家參考，具體如下：

一、Module簡介

ES6的Class只是面向對象編程的語法糖，升級了ES5的構造函數的原型鏈繼承的寫法，并沒有解決模塊化問題。Module功能就是為了解決這個問題而提出的。

歷史上，JavaScript一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能。

在ES6之前，社區制定了一些模塊加載方案，最主要的有CommonJS和AMD兩種。前者用于服務器，后者用于瀏覽器。ES6在語言規格的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代現有的CommonJS和AMD規范，成為瀏覽器和服務器通用的模塊解決方案。

ES6模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系（這種加載稱為“編譯時加載”），以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運行時確定這些東西。

瀏覽器使用ES6模塊的語法如下。

<script type="module" src="fs.js"></script>

上面代碼在網頁中插入一個模塊fs.js，由于type屬性設為module，所以瀏覽器知道這是一個ES6模塊。

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

上面代碼通過import去加載一個Module，加載其中的一些方法。

二、import 和 export

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

一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。下面是一個JS文件，里面使用export命令輸出變量。

// profile.jsexport var firstName = 'Michael';export var lastName = 'Jackson';export var year = 1958;

export的寫法，除了像上面這樣，還有另外一種。(推薦這種，因為這樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。)

// profile.jsvar firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};

export命令除了輸出變量，還可以輸出函數或類（class）。通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名。

function v1() { ... }function v2() { ... }export {  v1 as streamV1,  v2 as streamV2,  v2 as streamLatestVersion};

使用export命令定義了模塊的對外接口以后，其他JS文件就可以通過import命令加載這個模塊（文件）。

// main.jsimport {firstName, lastName, year} from './profile';function setName(element) {  element.textContent = firstName + ' ' + lastName;}