ES模塊簡介

ES模塊是用於處理模塊的ECMAScript標準。儘管Node.js多年來一直使用CommonJS標準,但瀏覽器從未擁有模塊系統,因為每個主要決策(例如模塊系統)都必須先由ECMAScript進行標準化,然後再實施

ES模塊簡介

ES模塊是用於處理模塊的ECMAScript標準。

儘管Node.js多年來一直使用CommonJS標準,因此瀏覽器從未擁有模塊系統,因為每個主要決策(例如模塊系統)都必須先由ECMAScript標準化,然後由瀏覽器實施。

該標準化過程完成了ES6瀏覽器開始實施此標準,試圖使所有內容保持一致,並以相同的方式工作,現在Chrome,Safari,Edge和Firefox(版本60開始)都支持ES模塊。

模塊非常酷,因為它們使您可以封裝各種功能,並將該功能作為庫公開給其他JavaScript文件。

ES Modules Support

ES模塊語法

導入模塊的語法為:

import package from 'module-name'

而CommonJS使用

const package = require('module-name')

模塊是一個JavaScript文件,出口商品一個或多個值(對象,函數或變量),使用export關鍵詞。例如,此模塊導出一個返回大寫字符串的函數:

uppercase.js

export default str => str.toUpperCase()

在此示例中,模塊定義了一個默認導出,因此它可以是匿名函數。否則,將需要一個名稱來將其與其他出口區分開。

現在,任何其他JavaScript模塊可以通過導入uppercase.js提供的功能來導入它。

HTML頁面可以使用<script>帶有特殊標籤type="module"屬性:

<script type="module" src="index.js"></script>

注意:此模塊導入的行為類似於defer腳本加載。看通過延遲和異步有效地加載JavaScript

請務必注意,所有加載了以下腳本的腳本type="module"已加載嚴格模式

在此示例中,uppercase.js模塊定義一個默認導出,因此在導入時,我們可以為其分配一個我們更喜歡的名稱:

import toUpperCase from './uppercase.js'

我們可以使用它:

toUpperCase('test') //'TEST'

您也可以使用絕對路徑進行模塊導入,以引用在另一個域上定義的模塊:

import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

這也是有效的導入語法:

import { toUpperCase } from '/uppercase.js'
import { toUpperCase } from '../uppercase.js'

這不是:

import { toUpperCase } from 'uppercase.js'
import { toUpperCase } from 'utils/uppercase.js'

它是絕對的,或者俱有./或者/在名字之前。

其他導入/導出選項

我們在上面看到了這個例子:

export default str => str.toUpperCase()

這將創建一個默認導出。但是,在文件中,可以使用以下語法導出多個內容:

const a = 1
const b = 2
const c = 3

export { a, b, c }

另一個模塊可以使用

import * from 'module'

您可以使用破壞性分配

import { a } from 'module'
import { a, b } from 'module'

為了方便起見,您可以使用as

import { a, b as two } from 'module'

您可以導入默認導出,也可以按名稱導入任何非默認導出,例如在此常見的React導入中:

import React, { Component } from 'react'

您可以在此處查看ES模塊示例:https://glitch.com/edit/#!/flavio-es-modules-example?path=index.html

CORS

使用以下命令獲取模塊CORS。這意味著,如果您引用其他域中的腳本,則它們必須具有有效的CORS標頭,以允許跨站點加載(例如Access-Control-Allow-Origin: *

不支持模塊的瀏覽器怎麼辦?

結合使用type="module"nomodule

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

結論

ES模塊是現代瀏覽器中引入的最大功能之一。它們是ES6的一部分,但是實現它們的路很長。

我們現在可以使用它們了!但是我們還必須記住,擁有多個模塊將對我們的頁面產生性能影響,因為這是瀏覽器在運行時必須執行的又一個步驟。

Webpack即使ES模塊位於瀏覽器中,它仍然可能會扮演重要角色,但是直接在語言中構建這樣的功能對於統一模塊在客戶端以及在Node.js上的工作方式非常重要。

免費下載我的JavaScript初學者手冊


更多js教程: