JS 模塊 目前已獲得全部主流瀏覽器的支持。

什么是 JavaScript 模塊

JS modules 其實是一系列功能的集合。以前你可能聽過說 Common JS ，AMD 等模塊標準，不一樣標準的模塊功能都是相似的，都容許你 import 或者 export 一些東西。

JavaScript 模塊目前有標準的語法，在模塊中，你能夠經(jīng)過 export 關鍵字，導出一切東西（變量，函數(shù)，其它聲明等等）

//lib.mjs
export const repeat = (string) => `${string} ${string}`;
export function shout(string) {
  return `${string.toUpperCase()}!`;
}

而想要導入該模塊，只須要在其它文件中使用import 關鍵字引入便可

//main.mjs
import {repeat, shout} from './lib.mjs';
repeat('hello');
// → 'hello hello'
shout('Modules in action');
// → 'MODULES IN ACTION!'

模塊中還能夠?qū)С瞿J值

//lib.mjs
export default function(string) {
  return `${string.toUpperCase()}!`;
}

具備默認值的模塊能夠以任意名字導入到其它模塊中jquery

//main.mjs
import shout from './lib.mjs';
//     ^^^^^

模塊和傳統(tǒng)的script 標簽引入腳本有一些區(qū)別，以下：

• JS模塊默認使用嚴格模式
• 模塊中不支持使用 html 格式的注釋，即<!-- TODO: Rename x to y. -->
• 模塊會建立本身的頂級詞義上下文，這意味著，當在模塊中使用var foo = 42; 語句時，并不會建立一個全局變量foo, 所以也不能經(jīng)過window.foo在瀏覽器中訪問該變量。
• import 和 export 關鍵字只在模塊中有效。

因為存在上述不一樣，經(jīng)過傳統(tǒng)方式引入的腳本 和 以模塊方式引入的腳本，就會有相同的代碼，也會產(chǎn)生不一樣的行為，于是 JS 執(zhí)行環(huán)節(jié)須要知道那些腳本是模塊。

在 瀏覽器中使用模塊

在 瀏覽器中，經(jīng)過設置 <script> 元素的type 屬性為 module 能夠聲明其實一個模塊。

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

支持type="module"的瀏覽器會忽略帶有nomudule屬性的的<script>元素，這樣就提供了降級處理的空間。其意義不只如此，支持type="module"的環(huán)境意味著其也支持箭頭函數(shù)，async-await等新語法功能，這樣引入的腳本無須再作轉義處理了。

歡迎你開啟JavaScript原生模塊之旅！