歷史上，JavaScript一直沒有自己模塊體系(module)，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。
其他語言如java、python等都具備這項功能，唯獨Javascript沒有，在ES6之前，要想在前端做模塊化開發，必須依賴第三方框架來實現，如：requireJS與seaJS。
requireJS是AMD規范的起源，seaJS是CMD規范的起源，由于兩者功能高度重合，后來seaJS不再維護，從此淡出人們的視野，于是requireJS一家獨大，直到ES6的出現，且迅速成為前端和服務器端通用的模塊解決方案，完全可以取代AMD 規范和NodeJS支持的CommonJS 規范。
ES6中首次引入模塊化開發規范ES Module，讓Javascript首次支持原生模塊化開發，從此前端開發一發不可收拾，讓requireJS等第三方框架倍感壓力，被淘汰也只是時間問題。所以以后的JS模塊化開發將是ES Module的天下，那接下來我們來感受一下ES Module的強大與其所擁有的魅力，我會從以下幾個方面來講解ES Module：
1、ES Module的用法
2、瀏覽器支持情況
3、實際開發中的應用
ES Module的使用
ES Module把一個文件當作一個模塊，每個模塊有自己的獨立作用域，那如何把每個模塊聯系起來呢?核心點就是模塊的導入(import)與導出(export)。
1、export導出模塊
moduleA.js文件
在模塊A中定義了一些變量與方法，然后將其導出。注意，export后只能跟function、class、var、let、const、default、{}，export的作用就是給當前模塊對象添加屬性，方便后期導入到其他模塊中，export的用法如下
其中 export default 關鍵字，接著我們來說說模塊的導入。
2、import導入模塊
import命令用于導入其他模塊提供的數據，格式：importfrom
如在模塊B中導入模塊A中的數據，代碼如下：
導入比較簡單，且名字隨意修改，不受導出模塊的限制(上圖中的getData和getGoods得到的都是模塊A中的getData方法)。 那其它方式導出的屬性就不能改名字了么? 其實ES Module早就幫我們考慮好了，一個神奇的關鍵字 as，用法如下：
// 導入模塊屬性時同時修改變量名
import {myClass as MyGoods,qty as goodsQty} from './moduleA.js'
console.log(MyGoods,goodsQty)
注意：聲明的變量為MyGoods而不是MyClass，以上代碼的意思時導入moduleA.js中的myClass屬性并賦值給MyGoods變量，goodsQty同理，這樣可以有效避免當前模塊變量命名沖突的情況。
引入模塊時還需要注意一些細節，就是url地址可以是相對路徑或絕對路徑，但相對路徑一定要以“./”或“../”開頭，避免項目中踩坑，請看以下代碼
// 支持
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還具有的一些特點：
· 每一個模塊只加載一次， 并只執行一次，重復加載同一文件，直接從內存中讀取;
· 每一個模塊內聲明的變量都是局部變量， 不會污染全局作用域;
· 通過export導出模塊，通過import導入模塊
· ES6模塊只支持靜態導入和導出，只可以在模塊的最外層作用域使用import和export
瀏覽器支持情況
ES Module的瀏覽器支持情況怎么樣，畢竟我們是要在瀏覽器環境中使用的，推薦一個網站(https://caniuse.com/)給大家，快速查看一些新特性的瀏覽器支持情況，ES Module的支持情況如下：
大家發現，哪怕是Chrome和Firefox這樣的現代瀏覽器，也是在最近的版本中才對ES Module進行支持，IE直接不支持，肯定有小伙伴會問，那如果要兼容低版本瀏覽器怎么辦呢?有聽過大名鼎鼎的babel么?接下來我們講講ES Module在實際開發中的使用。
實際開發中的應用
1、在瀏覽器中直接使用
如果要在瀏覽器中直接使用，首先你的瀏覽器必須要支持ES Module特性，另外script標簽的寫法有別于傳統的寫法，平時我們的寫法如下：
這種傳統寫法，由于再全局作用域下聲明變量，會讓goodsName和qty成為全局變量，但如果type屬性改成module(type=”module”) 瀏覽器就會將代碼視為 ECMAScript module 處理，代碼如下：
我們可以直接引入其他模塊到當前代碼調用，代碼如下
當然，添加type=”module”的script標簽也支持使用src屬性直接引入其他模塊
代碼如下：
2、在構建工具中使用
要想讓低版本的瀏覽器也能運行模塊化的代碼，需要在項目中使用babel這樣的工具來進行編譯，一般會配合webpack這樣的構建工具，實現的原理其實很簡單，就是把ES Module的代碼編譯成瀏覽器支持的ES5代碼，由于babel和webpack不在本文的討論內容范圍，大家可以自行查找相關資料，或持續關注我的其他文章，下面演示的是moduleA.js經過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
* 每個模塊擁有自己獨立的作用域
*/
// 這里的變量、方法只會在當前模塊生效，不會影響全局作用域
var goodsName = 'huawei mate30 pro';
exports.goodsName = goodsName;
var qty = 5;
exports.qty = qty;
function getData() {
return {
goodsName: goodsName,
qty: qty
};
}
// @如要在其它模塊中使用這里的數據，則必須導出
var _default = getData;
// 1. 給模塊對象添加default屬性，值為getData函數
exports["default"] = _default;
// 2. 給模塊對象添加myClass屬性，值為一個類
var myClass = function myClass() {
_classCallCheck(this, myClass);
};
exports.myClass = myClass;
// 3. 給模塊對象添加a,b,c屬性
var a = 'xxx';
exports.a = a;
var b = 10;
exports.b = b;
var c = 20; // 4. 給模塊對象添加多個已聲明屬性(注意不是導出一個對象)
exports.c = c;
從代碼中大家可以看到，已經把ES6的代碼編譯成ES代碼，低版本瀏覽器自然就可以運行了。
京公網安備 11010802030320號