JavaScript 技術概述
而 HTML 定義了網頁的結構和內容, CSS 設定了格式和外觀, JavaScript 為網頁添加了互動性並建立了豐富的 Web 應用程式。
但是,在 Web 瀏覽器環境中理解的 "JavaScript" 這個總稱包含了幾個非常不同的元素。其中一個是核心語言 (ECMAScript),另一個是 Web API 的集合,包括 DOM (文件物件模型)。
JavaScript,核心語言(ECMAScript)
JavaScript 的核心語言由 ECMA TC39 委員會標準化為一種名為 ECMAScript 的語言。 "ECMAScript" 是語言標準的術語,但 "ECMAScript" 和 "JavaScript" 可以互換使用。
這種核心語言也用於非瀏覽器環境,例如在 Node.js 中。
哪些內容屬於 ECMAScript 範圍?
標準化過程
ECMAScript 版本每年由 ECMA 大會批准和釋出為標準。所有開發都是公開的,在 Ecma TC39 GitHub 組織 上,該組織託管提案、官方規範文字和會議記錄。
在 ECMAScript 第 6 版 (稱為 ES6) 之前,規範每隔幾年釋出一次,通常用它們的版本號來稱呼 - ES3、ES5 等。在 ES6 之後,規範以釋出時間命名 - ES2017、ES2018 等。ES6 等同於 ES2015。ESNext 是一個動態名稱,指的是在編寫時下一個版本的名稱。ESNext 功能更準確地稱為提案,因為根據定義,規範尚未最終確定。
ECMA-262 的當前委員會批准的快照可以在 Ecma International 的 ECMA-262 語言規範頁面 上以 PDF 和 HTML 格式獲得。ECMA-262 和 ECMA-402 由規範編輯不斷維護和更新;TC39 網站託管最新的、最新的 ECMA-262 和 ECMA-402 版本。
新的語言功能,包括引入新的語法和 API 以及修改現有行為,以提案的形式進行討論。每個提案都經歷一個 4 個階段的過程,通常在第 3 階段或第 4 階段由 JavaScript 引擎實現,因此可供公眾使用。
有關 ECMAScript 歷史的更多資訊,請參閱 維基百科 ECMAScript 條目。
國際化 API
ECMAScript 國際化 API 規範 是 ECMAScript 語言規範的補充,也由 Ecma TC39 標準化。國際化 API 為 JavaScript 應用程式提供排序 (字串比較)、數字格式化和日期和時間格式化,允許應用程式選擇語言並根據需要調整功能。初始標準於 2012 年 12 月獲得批准;瀏覽器中實現的狀態在 Intl 物件的文件中跟蹤。國際化規範現在也每年批准一次,瀏覽器不斷改進其實現。
相關資源
您可以透過多種方式參與或跟蹤 ECMAScript 語言規範和 ECMAScript 國際化 API 規範以及相關資源的當前工作
DOM API
WebIDL
WebIDL 規範 提供了 DOM 技術和 ECMAScript 之間的粘合劑。
DOM 的核心
文件物件模型 (DOM) 是一種跨平臺的、與語言無關的約定,用於表示和互動 HTML、XHTML 和 XML 文件中的物件。DOM 樹中的物件可以透過使用物件上的方法進行定址和操作。 W3C 對核心文件物件模型進行標準化,該模型定義了與語言無關的介面,將 HTML 和 XML 文件抽象為物件,並定義了操作此抽象的機制。在 DOM 定義的事項中,我們可以找到
- 文件結構、樹模型和 DOM 事件架構在 DOM 核心 中:
Node、Element、DocumentFragment、Document、DOMImplementation、Event、EventTarget、... - DOM 事件 中的 DOM 事件架構的定義不太嚴格,以及特定事件。
- 其他內容,例如DOM 遍歷 和 DOM 範圍。
從 ECMAScript 的角度來看,DOM 規範中定義的物件被稱為“宿主物件”。
HTML DOM
其他值得注意的 API
setTimeout和setInterval函式最初是在 HTML 標準的Window介面中定義的。- XMLHttpRequest 使得傳送非同步 HTTP 請求成為可能。
- Fetch API 為網路請求提供了更符合人體工程學的抽象。
- CSS 物件模型 將 CSS 規則抽象為物件。
- Web Workers 允許平行計算。
- WebSockets 允許低級別的雙向通訊。
- Canvas 2D 上下文 是針對
<canvas>的繪圖 API。 - WebAssembly 介面 提供了用於在 JavaScript 程式碼和 WebAssembly 模組之間進行通訊的工具。
非瀏覽器環境(如 Node.js)通常沒有 DOM API——因為它們不與文件互動——但它們通常仍然實現許多 Web API,例如 fetch() 和 setTimeout()。
JavaScript 實現
在瀏覽器環境及其他環境中,主要有三種 JavaScript 實現。
- Mozilla 的 SpiderMonkey,用於 Firefox。這是第一個真正的 JavaScript 引擎,由 Brendan Eich 在 Netscape 建立。
- Google 的 V8,用於 Google Chrome、Opera、Edge、Node.js、Deno、Electron 等等。
- Apple 的 JavaScriptCore(也稱為 SquirrelFish/Nitro),用於 WebKit 瀏覽器(如 Apple Safari)和 Bun。
除了以上實現之外,還有其他流行的 JavaScript 引擎,例如
- Carakan,用於早期版本的 Opera。
- 微軟的 Chakra 引擎,用於 Internet Explorer(儘管它實現的語言正式稱為“JScript”以避免商標問題)。早期版本的 Edge 使用了另一個名為 Chakra 的 JavaScript 引擎,令人困惑。
- LibJS,用於 SerenityOS 的瀏覽器實現。
- Mozilla 的 Rhino 引擎,一個用 Java 編寫的 JavaScript 實現,主要由 Norris Boyd(也在 Netscape 工作)建立。
有一些引擎專門針對非瀏覽器用途而定製。
- Engine262,一個用 JavaScript 編寫的 JavaScript 引擎。它是為 JavaScript 開發者探索新的語言特性和查詢規範中的錯誤而建立的。
- Moddable XS,用於嵌入式系統(如物聯網)。
- QuickJS,一個小型且可嵌入的 JavaScript 引擎。
- Meta 的 Hermes 引擎,一個針對 React Native 最佳化的引擎。
- Oracle 的 GraalJS,一個由 Oracle Labs 在 GraalVM 上構建的高效能實現。
JavaScript 引擎公開了一個公共 API,應用程式開發者可以使用它將 JavaScript 整合到他們的軟體中。到目前為止,JavaScript 最常見的宿主環境是 Web 瀏覽器。Web 瀏覽器通常使用公共 API 建立宿主物件,這些物件負責將 DOM 反映到 JavaScript 中。
JavaScript 的另一個常見應用是作為(Web)伺服器端指令碼語言。JavaScript Web 伺服器公開宿主物件,這些物件代表 HTTP 請求和響應物件,然後可以由 JavaScript 程式操作以動態生成網頁。Node.js 就是一個流行的例子。
外殼
JavaScript Shell 允許您快速測試 JavaScript 程式碼片段,而無需重新載入網頁。它們對開發和除錯程式碼非常有用。
獨立 JavaScript Shell
基於瀏覽器的 JavaScript Shell
以下 JavaScript Shell 透過瀏覽器的 JavaScript 引擎執行程式碼。
- Firefox 有一個 內建 JavaScript 控制檯,支援多行編輯。
- Babel REPL - 一個基於瀏覽器的 REPL,用於試驗未來的 JavaScript。
- TypeScript Playground — 一個基於瀏覽器的 Playground,用於試驗新的 JavaScript 特性(透過 tsc 編譯器)和 TypeScript 語法。
工具和資源
有助於編寫和除錯 JavaScript 程式碼的工具。
- Firefox 開發者工具
- 學習 JavaScript
-
一個適合有抱負的 Web 開發者的優秀資源——在一個互動式環境中學習 JavaScript,包含簡短的課程和互動式測試,由自動評估引導。前 40 課免費,完整課程可透過一次性小額付費獲取。
- TogetherJS
-
協作變得輕鬆。透過將 TogetherJS 新增到您的網站,您的使用者可以在網站上即時互相幫助!
- Stack Overflow
-
Stack Overflow 上帶有“JavaScript”標籤的問題。
- JSFiddle
-
編輯 JavaScript、CSS 和 HTML 並獲取即時結果。使用外部資源並與您的團隊線上協作。
- Plunker
-
Plunker 是一個線上社群,用於建立、協作和分享您的 Web 開發想法。編輯您的 JavaScript、CSS 和 HTML 檔案,並獲取即時結果和檔案結構。
- JSBin
-
JS Bin 是一款開源的協作式 Web 開發除錯工具。
- Codepen
-
Codepen 是另一個協作式 Web 開發工具,用作即時結果遊樂場。
- StackBlitz
-
StackBlitz 是另一個線上 Playground/除錯工具,它可以使用 React、Angular 等託管和部署全棧應用程式。
- RunJS
-
RunJS 是一款桌面 Playground/記事本工具,它提供即時結果以及對 Node 和瀏覽器 API 的訪問。