1.5.2　模塊化

1．ES 6模塊化概述

在ES 6版本之前，JavaScript一直沒有模塊（Module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如Ruby的require、Python的import，甚至就連CSS都有@import，但是JavaScript任何這方面的支持都沒有，這對開發(fā)大型的、復(fù)雜的項目形成了巨大障礙。

好在廣大的JavaScript程序員自己制定了一些模塊加載方案，主要有CommonJS和AMD兩種。前者用于Node.js服務(wù)器，后者用于瀏覽器。

2．import和export

隨著ES 6的到來，終于原生支持了模塊化功能，即import和export，而且實現(xiàn)得相當簡單，完全可以取代CommonJS和AMD規(guī)范成為瀏覽器和服務(wù)器通用的模塊化解決方案。

在ES 6的模塊化系統(tǒng)中，一個模塊就是一個獨立的文件，模塊中的對外接口采用export關(guān)鍵字導(dǎo)出，可以將export放在任何變量、函數(shù)或類聲明的前面，從而將它們暴露給外部代碼使用，代碼如下：

要導(dǎo)出數(shù)據(jù)，在變量前面加上export關(guān)鍵字：

     export var name = "小明";
     export let age = 20;
     
     // 上面的寫法等價于下面的寫法
     
     var name = "小明";
     let age = 20;
     export {
       name:name,
       age:age
     }
     // export對象簡寫的方式
     export {name,age}

要導(dǎo)出函數(shù)，需要在函數(shù)前面加上export關(guān)鍵字：

     export function sum(num1,num2){
       return num1 + num2;
     }
     // 等價于
     let sum = function (num1,num2){
       return num1 + num2;
     }
     export sum

所以，如果沒有通過export關(guān)鍵字導(dǎo)出，在外部就無法訪問該模塊的變量或者函數(shù)。

有時會在代碼中看到使用export default，它和export具有同樣的作用，都是用來導(dǎo)出對外提供接口的，但是它們之間還有一些區(qū)別：

·　export default用于規(guī)定模塊的默認對外接口，并且一個文件只能有一個export default，而export可以有多個。

·　通過export方式導(dǎo)出，在導(dǎo)入時要加{ }，export default則不需要。

在一個模塊中可以采用import來導(dǎo)入另一個模塊export的內(nèi)容。

導(dǎo)入含有多個export的內(nèi)容，可以采用對象簡寫的方式，也是現(xiàn)在使用比較多的方式，代碼如下：

     //other.js
     var name = "小明"
     let age = 20
     // export對象簡寫的方式
     export {name,age}
     
     //import.js
     import {name,age} from "other.js"
     console.log(name) // 小明
     console.log(age) // 20

導(dǎo)入只有一個export default的內(nèi)容，代碼如下：

     //other.js
     export default function sum(num1,num2) {
       return num1 + num2;
     }
     //import.js
     import sum from "other.js"
     console.log(sum(1,1)) // 2

有時也會在代碼中看到module.exports的用法，這種用法是從Node.js的CommonJS演化而來的，它其實就相當于：

     module.exports = xxx
     // 相當于
     export xxx

ES 6的模塊化方案使得原生JavaScript的“拆分”能力提升了一個大的臺階，幾乎成為當下最流行的寫法，并且應(yīng)用在大部分的企業(yè)項目中。