JavaScript 技術概述

HTML 定義了網頁的結構和內容,CSS 設定了格式和外觀,而 JavaScript 則為網頁添加了互動性並建立了豐富的 Web 應用程式。

然而,在 Web 瀏覽器語境下所理解的“JavaScript”這個總稱包含幾個非常不同的元素。其中之一是核心語言 (ECMAScript),另一個是 Web API 的集合,包括 DOM(文件物件模型)。

JavaScript,核心語言 (ECMAScript)

JavaScript 的核心語言由 ECMA TC39 委員會標準化為 ECMAScript 語言。“ECMAScript”是語言標準的術語,但“ECMAScript”和“JavaScript”可以互換使用。

此核心語言也用於非瀏覽器環境,例如在 Node.js 中。

ECMAScript 範圍包括什麼?

除其他外,ECMAScript 定義了:

  • 語言語法(解析規則、關鍵字、控制流、物件字面量初始化等)
  • 錯誤處理機制(throwtry...catch、建立使用者定義 Error 型別的能力)
  • 型別(布林值、數字、字串、函式、物件等)
  • 基於原型的繼承機制
  • 內建物件和函式,包括 JSONMathArray 方法、parseIntdecodeURI 等。
  • 嚴格模式
  • 一個模組系統
  • 基本記憶體模型

標準化過程

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 文件抽象為物件,還定義了操作此抽象的機制。這包括:NodeElementDocumentFragmentDocumentDOMImplementationEventEventTarget 等。

從 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。