JavaScript 技術概述
HTML 定義了網頁的結構和內容,CSS 設定了格式和外觀,而 JavaScript 則為網頁添加了互動性並建立了豐富的 Web 應用程式。
然而,在 Web 瀏覽器語境下所理解的“JavaScript”這個總稱包含幾個非常不同的元素。其中之一是核心語言 (ECMAScript),另一個是 Web API 的集合,包括 DOM(文件物件模型)。
JavaScript,核心語言 (ECMAScript)
JavaScript 的核心語言由 ECMA TC39 委員會標準化為 ECMAScript 語言。“ECMAScript”是語言標準的術語,但“ECMAScript”和“JavaScript”可以互換使用。
此核心語言也用於非瀏覽器環境,例如在 Node.js 中。
ECMAScript 範圍包括什麼?
除其他外,ECMAScript 定義了:
- 語言語法(解析規則、關鍵字、控制流、物件字面量初始化等)
- 錯誤處理機制(
throw、try...catch、建立使用者定義Error型別的能力) - 型別(布林值、數字、字串、函式、物件等)
- 基於原型的繼承機制
- 內建物件和函式,包括
JSON、Math、Array方法、parseInt、decodeURI等。 - 嚴格模式
- 一個模組系統
- 基本記憶體模型
標準化過程
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 階段過程,通常由 JavaScript 引擎在第 3 階段或第 4 階段實現,因此可供公眾使用。
有關 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 樹**中的物件可以透過使用物件上的方法進行定址和操作。如今,DOM 核心規範由 WHATWG 維護(取代了 W3C 版本)。它定義了與語言無關的介面,將 HTML 和 XML 文件抽象為物件,還定義了操作此抽象的機制。這包括:Node、Element、DocumentFragment、Document、DOMImplementation、Event、EventTarget 等。
從 ECMAScript 的角度來看,DOM 規範中定義的物件稱為“宿主物件”。
HTML DOM
HTML,即 Web 的標記語言,是根據 DOM 進行規範的。在 DOM 核心中定義的抽象概念之上,HTML 還定義了元素的_含義_。HTML DOM 包括 HTML 元素上的 className 屬性,或 Document.body 等 API。
HTML 規範還定義了文件的限制;例如,它要求表示無序列表的 <ul> 元素的所有子元素都是 <li> 元素,因為它們表示列表項。一般來說,它還禁止使用未在標準中定義的元素和屬性。
正在尋找 Document 物件、Window 物件和其他 DOM 元素?請閱讀 DOM 文件。
其他值得注意的 API
setTimeout()和setInterval()函式最初是在 HTML Standard 中的Window介面上指定的。- XMLHttpRequest 可以傳送非同步 HTTP 請求。
- Fetch API 為網路請求提供了更符合人體工程學的抽象。
- CSS 物件模型將 CSS 規則抽象為物件。
- WebWorkers 允許平行計算。
- WebSockets 允許低階雙向通訊。
- Canvas 2D Context 是
<canvas>的繪圖 API。 - WebAssembly 介面提供了 JavaScript 程式碼和 WebAssembly 模組之間通訊的實用工具。
非瀏覽器環境(如 Node.js)通常沒有 DOM API——因為它們不與文件互動——但它們通常仍然實現許多 Web API,例如 fetch() 和 setTimeout()。
JavaScript 實現
當前 Web 瀏覽器中使用的 JavaScript 引擎包括:
- Mozilla 的 SpiderMonkey,用於 Firefox、Servo 和 Flow。其他非瀏覽器用途包括 MongoDB、CouchDB 等。這是 Brendan Eich 在 Netscape 建立的_第一個_ JavaScript 引擎。
- Google 的 V8,用於 Chrome 和基於 Chromium 的瀏覽器,如 Opera、Edge 和 Brave。其他非瀏覽器用途包括 Node.js、Deno、Electron 等。
- Apple 的 JavaScriptCore(也稱為 SquirrelFish/Nitro),用於 Safari 和其他基於 WebKit 的瀏覽器。其他非瀏覽器用途包括 Bun。
- LibJS,用於 Ladybird。
早期瀏覽器中使用的某些 JavaScript 引擎包括:
- Carakan,在 Opera 成為基於 Chromium 的瀏覽器之前使用。
- Microsoft 的 Chakra,用於 Internet Explorer(儘管它實現的語言正式稱為“JScript”,以避免商標問題)。早期版本的 Edge 使用另一個 JavaScript 引擎,令人困惑地也稱為 Chakra,然後才成為基於 Chromium 的瀏覽器。
某些專門為非瀏覽器目的定製的 JavaScript 引擎包括:
- Engine262,用 JavaScript 編寫,本質上旨在作為語言的參考實現。
- Meta 的 Hermes,針對 React Native 進行了最佳化。
- Mozilla 的 Rhino,用 Java 編寫。
- Oracle 的 GraalJS,用 Java 編寫並基於 GraalVM 構建。
- Moddable XS,用於物聯網/嵌入式系統。
- QuickJS,旨在小巧輕便。
JavaScript 引擎公開了一個公共 API,應用程式開發人員可以使用它將 JavaScript 整合到他們的軟體中。到目前為止,JavaScript 最常見的宿主環境是 Web 瀏覽器。Web 瀏覽器通常使用公共 API 建立負責將 DOM 反映到 JavaScript 中的**宿主物件**。
JavaScript 的另一個常見應用是作為(Web)伺服器端指令碼語言。JavaScript Web 伺服器公開代表 HTTP 請求和響應物件的宿主物件,然後 JavaScript 程式可以操作這些物件以動態生成網頁。Node.js 是一個流行的示例。
Shell
JavaScript shell 允許您快速測試 JavaScript 程式碼片段,而無需重新載入網頁。它們對於開發和除錯程式碼非常有用。
獨立 JavaScript shell
以下 JavaScript shell 是獨立的執行環境,例如 Perl 或 Python。
- Node.js - Node.js 是一個用於輕鬆構建快速、可伸縮網路應用程式的平臺。
- ShellJS - 用於 Node.js 的行動式 Unix shell 命令。
基於瀏覽器的 JavaScript shell
以下 JavaScript shell 透過瀏覽器的 JavaScript 引擎執行程式碼。
- Firefox 有一個內建的 JavaScript 控制檯,支援多行編輯。
- Babel REPL - 一個基於瀏覽器的 REPL,用於試驗未來的 JavaScript。
- TypeScript playground — 一個基於瀏覽器的遊樂場,用於試驗新的 JavaScript 特性(透過 tsc 編譯器)和 TypeScript 語法。
工具和資源
編寫和除錯 JavaScript 程式碼的有用工具。
- Firefox 開發者工具
-
Web Console、JavaScript Profiler、Debugger 等。
- 學習 JavaScript
-
對於有抱負的 Web 開發人員來說,這是一個極好的資源——在互動式環境中學習 JavaScript,包括短課程和互動式測試,並透過自動化評估進行指導。前 40 節課是免費的,完整課程只需一次小額付款。
- TogetherJS
-
協作變得簡單。透過將 TogetherJS 新增到您的網站,您的使用者可以即時在網站上互相幫助!
- Stack Overflow
-
Stack Overflow 上帶有“JavaScript”標籤的問題。
- JSFiddle
-
編輯 JavaScript、CSS 和 HTML 並獲得即時結果。使用外部資源並在線與您的團隊協作。
- Plunker
-
Plunker 是一個線上社群,用於建立、協作和分享您的 Web 開發想法。編輯您的 JavaScript、CSS 和 HTML 檔案並獲得即時結果和檔案結構。
- JS Bin
-
JS Bin 是一個開源的協作式 Web 開發除錯工具。
- CodePen
-
CodePen 是另一個協作式 Web 開發工具,用作即時結果遊樂場。
- StackBlitz
-
StackBlitz 是另一個線上遊樂場/除錯工具,可以使用 React、Angular 等託管和部署全棧應用程式。
- RunJS
-
RunJS 是一個桌面遊樂場/便箋簿工具,提供即時結果並可訪問 Node 和瀏覽器 API。