摘要：中的模塊功能主要由兩個命令構成和。命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能，二者屬于相輔相成一一對應關系。文件大括號里面的變量名，必須與被導入模塊對外接口的名稱相同。每一個模塊內聲明的變量都是局部變量，不會污染全局作用域。

JavaScript語言自創立之初，一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。

很多編程語言都有這項功能，比如 Python的import、Ruby的require，甚至就連CSS都有@import，但是JavaScript沒有這方面的支持，這增加了開發大型的、復雜的項目時的難度。

于是前端開發者們開始想辦法，為了防止命名空間被污染，采用的是命名空間的方式。

在ES6之前，一些前端社區制定了模塊加載方案，最主要的有CommonJS和AMD兩種。前者用于服務器，后者用于瀏覽器。

但這兩種規范都由開源社區制定，沒有統一，而ES6中引入了模塊（Module）體系，從語言層在實現了模塊機制，實現了模塊功能，而且實現得相當簡單，為JavaScript開發大型的、復雜的項目掃清了障礙。

ES6中的模塊功能主要由兩個命令構成：export和import。

export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能，二者屬于相輔相成、一一對應關系。

一、什么是模塊

模塊可以理解為函數代碼塊的功能，是封裝對象的屬性和方法的javascript代碼，它可以是某單個文件、變量或者函數。

模塊實質上是對業務邏輯分離實現低耦合高內聚，也便于代碼管理而不是所有功能代碼堆疊在一起，模塊真正的魔力所在是僅導出和導入你需要的綁定，而不是將所有的東西都放到一個文件。

在理想狀態下我們只需要完成自己部分的核心業務邏輯代碼，其他方面的依賴可以通過直接加載被人已經寫好模塊進行使用即可。

二、export 導出 命令

一個模塊就是一個獨立的文件，該文件內部的所有變量，外部無法獲取。如果想從外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。分為以下幾種情況：

（1）在需要導出的lib.js文件中， 使用 export{接口} 導出接口， 大括號中的接口名字為上面定義的變量， import和引入的main.js文件中的export是對應的：

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

（2）在export接口的時候， 我們可以使用 XX as YY， 把導出的接口名字改了， 比如： xiaoming as haoren，

這樣做的目的是為了讓接口字段更加語義化。

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

（3）直接在export的地方定義導出的函數，或者變量：

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

（4）不需要知道變量名字（相當于是匿名的）的情況，可以 直接把開發的接口給export。如果一個js模塊文件就只有一個功能， 那么就可以使用export default導出。

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

這樣做的好處是其他模塊加載該模塊時，import命令可以為該匿名函數指定任意名字。

（5）export也能默認導出函數， 在import的時候， 名字可以自定義， 因為每一個模塊的默認接口就一個：

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

（6）使用通配符* ，重新導出其他模塊的接口

//lib.js
export * from "./other";
//如果只想導出部分接口， 只要把接口名字列出來
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

三、import 導入命令

ES6導入的模塊都是屬于引用，每一個導入的js模塊都是活的， 每一次訪問該模塊的變量或者函數都是最新的， 這個是原生ES6模塊 與AMD和CMD的區別之一。

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

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

大括號里面的變量名，必須與被導入模塊對外接口的名稱相同。

想要輸入的變量重新取一個名字，import命令要使用 as關鍵字，將輸入的變量重命名。

import { formatFn as fn0 } from "lib.js";

注：import后面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js后綴可以省略。

四、ES6模塊化的基本規則、特點

1、每一個模塊只加載一次， 每一個JS只執行一次， 如果下次再去加載同目錄下同文件，直接從內存中讀取。 一個模塊就是一個單例，或者說就是一個對象。

2、每一個模塊內聲明的變量都是局部變量， 不會污染全局作用域。

3、模塊內部的變量或者函數可以通過export導出。

4、一個模塊可以導入別的模塊。

五、class與模塊化相結合實例

結合上節課我們學的 ES6 class與面向對象編程的知識，我們再實現一個把class和模塊化結合的例子。

首先我們創建一個parent.js文件，使用class類的寫法創建一個Parent類：

const name = "tom";
const age = "20";

class Parent{
  hw(){
    console.log(`hello world`)
  }
  static obj(){
      console.log("obj")/*表示為靜態方法不回唄實例繼承，而是直接通過類調用。*/
    }
}  
var parent = new Parent()
parent.hw()//hell world

export{name,age,Parent}

之后在child.js中分別引入parent.js中的name、age、Parent

import {name,age,Parent} from "./parent"


class Child extends Parent{
    constructor(obj){
        //就是new命令自動跳用方法。一個類必須要有constructor，如果沒定義，有默認添加一個空的。
        super()//調用父類的constructor()
        this._config = obj;
        console.log(obj.name+"年齡"+obj.age)
    }
    hw(){
      console.log("hw")
    }
    set val(value){
      this._config.name = value;
      console.log(`name=${value}`)
    }
    get val(){
      console.log(this._config.name);
    }
}

Child.obj()//obj 繼承父類static方法
var model = new Child({name,age}) //tom年齡20
model.hw()//hw
model.val = "jock"; //name=jock
model.val//jock

六、總結

本文主要從什么是模塊，模塊的導出（導出變量、函數、類、文件等），模塊的導入（單個導入、多個導入、導入整個）等角度講述了ES6模塊化操作。

ES6模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運行時確定這些東西。比如 CommonJS模塊就是對象，輸入時必須查找對象屬性。

模塊打包現在最好用的就是webpack了，webpack作為一款新興的模塊化管理和打包工具，其視任意文件都為模塊，并打包成bundle文件，相比于browserify更加強大。

模塊化開發是前端開發的一大趨勢，比如大家去看vue、react、angular，或者你們公司的項目源碼，你會發現，幾乎所有項目都使用了模塊化。小伙伴們一定要緊跟時代的大潮，將組件化開發，模塊化開發，自動化構建結合，探索高效的開發之道。