JavaScript 原生模塊_編程實戰微課

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

什么是 JavaScript 模塊

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

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

//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!'

模塊中還能夠導出默認值

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

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

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

模塊和傳統的script 標簽引入腳本有一些區別，以下：

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

因為存在上述不一樣，經過傳統方式引入的腳本和以模塊方式引入的腳本，就會有相同的代碼，也會產生不一樣的行為，于是 JS 執行環節須要知道那些腳本是模塊。

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

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

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