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-262ECMA-402 版本。

新的語言功能,包括引入新的語法和 API 以及修改現有行為,以提案的形式進行討論。每個提案都經歷一個 4 個階段的過程,通常在第 3 階段或第 4 階段由 JavaScript 引擎實現,因此可供公眾使用。

有關 ECMAScript 歷史的更多資訊,請參閱 維基百科 ECMAScript 條目

國際化 API

ECMAScript 國際化 API 規範 是 ECMAScript 語言規範的補充,也由 Ecma TC39 標準化。國際化 API 為 JavaScript 應用程式提供排序 (字串比較)、數字格式化和日期和時間格式化,允許應用程式選擇語言並根據需要調整功能。初始標準於 2012 年 12 月獲得批准;瀏覽器中實現的狀態在 Intl 物件的文件中跟蹤。國際化規範現在也每年批准一次,瀏覽器不斷改進其實現。

DOM API

WebIDL

WebIDL 規範 提供了 DOM 技術和 ECMAScript 之間的粘合劑。

DOM 的核心

文件物件模型 (DOM) 是一種跨平臺的、與語言無關的約定,用於表示和互動 HTML、XHTML 和 XML 文件中的物件。DOM 樹中的物件可以透過使用物件上的方法進行定址和操作。 W3C 對核心文件物件模型進行標準化,該模型定義了與語言無關的介面,將 HTML 和 XML 文件抽象為物件,並定義了操作此抽象的機制。在 DOM 定義的事項中,我們可以找到

從 ECMAScript 的角度來看,DOM 規範中定義的物件被稱為“宿主物件”。

HTML DOM

HTML,網路的標記語言,是根據 DOM 規範進行定義的。在 DOM 核心定義的抽象概念之上,HTML 還定義了元素的含義。HTML DOM 包含諸如 HTML 元素上的 className 屬性,或 document.body 等 API。

HTML 規範還定義了文件的限制;例如,它要求所有 <ul> 元素(表示無序列表)的子元素必須是 <li> 元素,因為它們代表列表項。一般來說,它還禁止使用未在標準中定義的元素和屬性。

尋找 Document 物件,Window 物件和其他 DOM 元素?請閱讀 DOM 文件

其他值得注意的 API

非瀏覽器環境(如 Node.js)通常沒有 DOM API——因為它們不與文件互動——但它們通常仍然實現許多 Web API,例如 fetch()setTimeout()

JavaScript 實現

在瀏覽器環境及其他環境中,主要有三種 JavaScript 實現。

  • Mozilla 的 SpiderMonkey,用於 Firefox。這是第一個真正的 JavaScript 引擎,由 Brendan Eich 在 Netscape 建立。
  • Google 的 V8,用於 Google Chrome、Opera、Edge、Node.jsDenoElectron 等等。
  • 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 是獨立的環境,類似於 Perl 或 Python。

  • Node.js - Node.js 是一個用於輕鬆構建快速、可擴充套件的網路應用程式的平臺。
  • ShellJS - Node.js 的可移植 Unix shell 命令。

基於瀏覽器的 JavaScript Shell

以下 JavaScript Shell 透過瀏覽器的 JavaScript 引擎執行程式碼。

工具和資源

有助於編寫和除錯 JavaScript 程式碼的工具。

Firefox 開發者工具

Web 控制檯JavaScript Profiler偵錯程式 等等。

學習 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 的訪問。