摘要：中的模塊功能主要由兩個(gè)命令構(gòu)成和。命令用于規(guī)定模塊的對(duì)外接口，命令用于輸入其他模塊提供的功能，二者屬于相輔相成一一對(duì)應(yīng)關(guān)系。文件大括號(hào)里面的變量名，必須與被導(dǎo)入模塊對(duì)外接口的名稱相同。每一個(gè)模塊內(nèi)聲明的變量都是局部變量，不會(huì)污染全局作用域。

JavaScript語(yǔ)言自創(chuàng)立之初，一直沒(méi)有模塊（module）體系，無(wú)法將一個(gè)大程序拆分成互相依賴的小文件，再用簡(jiǎn)單的方法拼裝起來(lái)。

很多編程語(yǔ)言都有這項(xiàng)功能，比如 Python的import、Ruby的require，甚至就連CSS都有@import，但是JavaScript沒(méi)有這方面的支持，這增加了開(kāi)發(fā)大型的、復(fù)雜的項(xiàng)目時(shí)的難度。

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

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

但這兩種規(guī)范都由開(kāi)源社區(qū)制定，沒(méi)有統(tǒng)一，而ES6中引入了模塊（Module）體系，從語(yǔ)言層在實(shí)現(xiàn)了模塊機(jī)制，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡(jiǎn)單，為JavaScript開(kāi)發(fā)大型的、復(fù)雜的項(xiàng)目掃清了障礙。

ES6中的模塊功能主要由兩個(gè)命令構(gòu)成：export和import。

export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能，二者屬于相輔相成、一一對(duì)應(yīng)關(guān)系。

一、什么是模塊

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

模塊實(shí)質(zhì)上是對(duì)業(yè)務(wù)邏輯分離實(shí)現(xiàn)低耦合高內(nèi)聚，也便于代碼管理而不是所有功能代碼堆疊在一起，模塊真正的魔力所在是僅導(dǎo)出和導(dǎo)入你需要的綁定，而不是將所有的東西都放到一個(gè)文件。

在理想狀態(tài)下我們只需要完成自己部分的核心業(yè)務(wù)邏輯代碼，其他方面的依賴可以通過(guò)直接加載被人已經(jīng)寫(xiě)好模塊進(jìn)行使用即可。

二、export 導(dǎo)出 命令

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

（1）在需要導(dǎo)出的lib.js文件中， 使用 export{接口} 導(dǎo)出接口， 大括號(hào)中的接口名字為上面定義的變量， import和引入的main.js文件中的export是對(duì)應(yīng)的：

//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接口的時(shí)候， 我們可以使用 XX as YY， 把導(dǎo)出的接口名字改了， 比如： xiaoming as haoren，

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

//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的地方定義導(dǎo)出的函數(shù)，或者變量：

//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）不需要知道變量名字（相當(dāng)于是匿名的）的情況，可以 直接把開(kāi)發(fā)的接口給export。如果一個(gè)js模塊文件就只有一個(gè)功能， 那么就可以使用export default導(dǎo)出。

//lib.js
export default "string";

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

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

（5）export也能默認(rèn)導(dǎo)出函數(shù)， 在import的時(shí)候， 名字可以自定義， 因?yàn)槊恳粋€(gè)模塊的默認(rèn)接口就一個(gè)：

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

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

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

//lib.js
export * from "./other";
//如果只想導(dǎo)出部分接口， 只要把接口名字列出來(lái)
//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 導(dǎo)入命令

ES6導(dǎo)入的模塊都是屬于引用，每一個(gè)導(dǎo)入的js模塊都是活的， 每一次訪問(wèn)該模塊的變量或者函數(shù)都是最新的， 這個(gè)是原生ES6模塊 與AMD和CMD的區(qū)別之一。

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

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

大括號(hào)里面的變量名，必須與被導(dǎo)入模塊對(duì)外接口的名稱相同。

想要輸入的變量重新取一個(gè)名字，import命令要使用 as關(guān)鍵字，將輸入的變量重命名。

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

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

四、ES6模塊化的基本規(guī)則、特點(diǎn)

1、每一個(gè)模塊只加載一次， 每一個(gè)JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件，直接從內(nèi)存中讀取。 一個(gè)模塊就是一個(gè)單例，或者說(shuō)就是一個(gè)對(duì)象。

2、每一個(gè)模塊內(nèi)聲明的變量都是局部變量， 不會(huì)污染全局作用域。

3、模塊內(nèi)部的變量或者函數(shù)可以通過(guò)export導(dǎo)出。

4、一個(gè)模塊可以導(dǎo)入別的模塊。

五、class與模塊化相結(jié)合實(shí)例

結(jié)合上節(jié)課我們學(xué)的 ES6 class與面向?qū)ο缶幊痰闹R(shí)，我們?cè)賹?shí)現(xiàn)一個(gè)把class和模塊化結(jié)合的例子。

首先我們創(chuàng)建一個(gè)parent.js文件，使用class類的寫(xiě)法創(chuàng)建一個(gè)Parent類：

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

class Parent{
  hw(){
    console.log(`hello world`)
  }
  static obj(){
      console.log("obj")/*表示為靜態(tài)方法不回唄實(shí)例繼承，而是直接通過(guò)類調(diào)用。*/
    }
}  
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命令自動(dòng)跳用方法。一個(gè)類必須要有constructor，如果沒(méi)定義，有默認(rèn)添加一個(gè)空的。
        super()//調(diào)用父類的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

六、總結(jié)

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

ES6模塊的設(shè)計(jì)思想，是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運(yùn)行時(shí)確定這些東西。比如 CommonJS模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性。

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

模塊化開(kāi)發(fā)是前端開(kāi)發(fā)的一大趨勢(shì)，比如大家去看vue、react、angular，或者你們公司的項(xiàng)目源碼，你會(huì)發(fā)現(xiàn)，幾乎所有項(xiàng)目都使用了模塊化。小伙伴們一定要緊跟時(shí)代的大潮，將組件化開(kāi)發(fā)，模塊化開(kāi)發(fā)，自動(dòng)化構(gòu)建結(jié)合，探索高效的開(kāi)發(fā)之道。