歷史上，JavaScript一直沒(méi)有自己模塊體系(module)，無(wú)法將一個(gè)大程序拆分成互相依賴(lài)的小文件，再用簡(jiǎn)單的方法拼裝起來(lái)。

　　其他語(yǔ)言如java、python等都具備這項(xiàng)功能，唯獨(dú)Javascript沒(méi)有，在ES6之前，要想在前端做模塊化開(kāi)發(fā)，必須依賴(lài)第三方框架來(lái)實(shí)現(xiàn)，如：requireJS與seaJS。

　　requireJS是AMD規(guī)范的起源，seaJS是CMD規(guī)范的起源，由于兩者功能高度重合，后來(lái)seaJS不再維護(hù)，從此淡出人們的視野，于是requireJS一家獨(dú)大，直到ES6的出現(xiàn)，且迅速成為前端和服務(wù)器端通用的模塊解決方案，完全可以取代AMD 規(guī)范和NodeJS支持的CommonJS 規(guī)范。

　　ES6中首次引入模塊化開(kāi)發(fā)規(guī)范ES Module，讓Javascript首次支持原生模塊化開(kāi)發(fā)，從此前端開(kāi)發(fā)一發(fā)不可收拾，讓requireJS等第三方框架倍感壓力，被淘汰也只是時(shí)間問(wèn)題。所以以后的JS模塊化開(kāi)發(fā)將是ES Module的天下，那接下來(lái)我們來(lái)感受一下ES Module的強(qiáng)大與其所擁有的魅力，我會(huì)從以下幾個(gè)方面來(lái)講解ES Module：

　　1、ES Module的用法

　　2、瀏覽器支持情況

　　3、實(shí)際開(kāi)發(fā)中的應(yīng)用

　　ES Module的使用

　　ES Module把一個(gè)文件當(dāng)作一個(gè)模塊，每個(gè)模塊有自己的獨(dú)立作用域，那如何把每個(gè)模塊聯(lián)系起來(lái)呢?核心點(diǎn)就是模塊的導(dǎo)入(import)與導(dǎo)出(export)。

　　1、export導(dǎo)出模塊

　　moduleA.js文件

　　在模塊A中定義了一些變量與方法，然后將其導(dǎo)出。注意，export后只能跟function、class、var、let、const、default、{}，export的作用就是給當(dāng)前模塊對(duì)象添加屬性，方便后期導(dǎo)入到其他模塊中，export的用法如下

　　其中 export default 關(guān)鍵字，接著我們來(lái)說(shuō)說(shuō)模塊的導(dǎo)入。

　　2、import導(dǎo)入模塊

　　import命令用于導(dǎo)入其他模塊提供的數(shù)據(jù)，格式：importfrom

　　如在模塊B中導(dǎo)入模塊A中的數(shù)據(jù)，代碼如下：

　　導(dǎo)入比較簡(jiǎn)單，且名字隨意修改，不受導(dǎo)出模塊的限制(上圖中的getData和getGoods得到的都是模塊A中的getData方法)。 那其它方式導(dǎo)出的屬性就不能改名字了么? 其實(shí)ES Module早就幫我們考慮好了，一個(gè)神奇的關(guān)鍵字 as，用法如下：

　　// 導(dǎo)入模塊屬性時(shí)同時(shí)修改變量名

　　import {myClass as MyGoods,qty as goodsQty} from './moduleA.js'

　　console.log(MyGoods,goodsQty)

　　注意：聲明的變量為MyGoods而不是MyClass，以上代碼的意思時(shí)導(dǎo)入moduleA.js中的myClass屬性并賦值給MyGoods變量，goodsQty同理，這樣可以有效避免當(dāng)前模塊變量命名沖突的情況。

　　引入模塊時(shí)還需要注意一些細(xì)節(jié)，就是url地址可以是相對(duì)路徑或絕對(duì)路徑，但相對(duì)路徑一定要以“./”或“../”開(kāi)頭，避免項(xiàng)目中踩坑，請(qǐng)看以下代碼

　　// 支持

　　import base from 'http://laoxie.com/js/base.js';

　　import base from '/js/base.js';

　　import base from './base.js';

　　import base from '../base.js';

　　// 不支持

　　import base from 'base.js';

　　import base from 'js/base.js';

　　另外ES Module還具有的一些特點(diǎn)：

　　· 每一個(gè)模塊只加載一次， 并只執(zhí)行一次，重復(fù)加載同一文件，直接從內(nèi)存中讀取;

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

　　· 通過(guò)export導(dǎo)出模塊，通過(guò)import導(dǎo)入模塊

　　· ES6模塊只支持靜態(tài)導(dǎo)入和導(dǎo)出，只可以在模塊的最外層作用域使用import和export

　　瀏覽器支持情況

　　ES Module的瀏覽器支持情況怎么樣，畢竟我們是要在瀏覽器環(huán)境中使用的，推薦一個(gè)網(wǎng)站(https://caniuse.com/)給大家，快速查看一些新特性的瀏覽器支持情況，ES Module的支持情況如下：

　　大家發(fā)現(xiàn)，哪怕是Chrome和Firefox這樣的現(xiàn)代瀏覽器，也是在最近的版本中才對(duì)ES Module進(jìn)行支持，IE直接不支持，肯定有小伙伴會(huì)問(wèn)，那如果要兼容低版本瀏覽器怎么辦呢?有聽(tīng)過(guò)大名鼎鼎的babel么?接下來(lái)我們講講ES Module在實(shí)際開(kāi)發(fā)中的使用。

　　實(shí)際開(kāi)發(fā)中的應(yīng)用

　　1、在瀏覽器中直接使用

　　如果要在瀏覽器中直接使用，首先你的瀏覽器必須要支持ES Module特性，另外script標(biāo)簽的寫(xiě)法有別于傳統(tǒng)的寫(xiě)法，平時(shí)我們的寫(xiě)法如下：

　　這種傳統(tǒng)寫(xiě)法，由于再全局作用域下聲明變量，會(huì)讓goodsName和qty成為全局變量，但如果type屬性改成module(type=”module”) 瀏覽器就會(huì)將代碼視為 ECMAScript module 處理，代碼如下：

　　我們可以直接引入其他模塊到當(dāng)前代碼調(diào)用，代碼如下

　　當(dāng)然，添加type=”module”的script標(biāo)簽也支持使用src屬性直接引入其他模塊

　　代碼如下：

　　2、在構(gòu)建工具中使用

　　要想讓低版本的瀏覽器也能運(yùn)行模塊化的代碼，需要在項(xiàng)目中使用babel這樣的工具來(lái)進(jìn)行編譯，一般會(huì)配合webpack這樣的構(gòu)建工具，實(shí)現(xiàn)的原理其實(shí)很簡(jiǎn)單，就是把ES Module的代碼編譯成瀏覽器支持的ES5代碼，由于babel和webpack不在本文的討論內(nèi)容范圍，大家可以自行查找相關(guān)資料，或持續(xù)關(guān)注我的其他文章，下面演示的是moduleA.js經(jīng)過(guò)Babel編譯后的代碼：

　　"use strict";

　　Object.defineProperty(exports, "__esModule", {

　　value: true

　　});

　　exports.qty = exports.goodsName = exports.c = exports.b = exports.a = exports.myClass = exports["default"] = void 0;

　　function _classCallCheck(instance, Constructor) {

　　if (!(instance instanceof Constructor)) {

　　throw new TypeError("Cannot call a class as a function");

　　}

　　}

　　/**

　　* @模塊A --moduleA.js

　　* 每個(gè)模塊擁有自己獨(dú)立的作用域

　　*/

　　// 這里的變量、方法只會(huì)在當(dāng)前模塊生效，不會(huì)影響全局作用域

　　var goodsName = 'huawei mate30 pro';

　　exports.goodsName = goodsName;

　　var qty = 5;

　　exports.qty = qty;

　　function getData() {

　　return {

　　goodsName: goodsName,

　　qty: qty

　　};

　　}

　　// @如要在其它模塊中使用這里的數(shù)據(jù)，則必須導(dǎo)出

　　var _default = getData;

　　// 1. 給模塊對(duì)象添加default屬性，值為getData函數(shù)

　　exports["default"] = _default;

　　// 2. 給模塊對(duì)象添加myClass屬性，值為一個(gè)類(lèi)

　　var myClass = function myClass() {

　　_classCallCheck(this, myClass);

　　};

　　exports.myClass = myClass;

　　// 3. 給模塊對(duì)象添加a,b,c屬性

　　var a = 'xxx';

　　exports.a = a;

　　var b = 10;

　　exports.b = b;

　　var c = 20; // 4. 給模塊對(duì)象添加多個(gè)已聲明屬性(注意不是導(dǎo)出一個(gè)對(duì)象)

　　exports.c = c;

　　從代碼中大家可以看到，已經(jīng)把ES6的代碼編譯成ES代碼，低版本瀏覽器自然就可以運(yùn)行了。