JavaScript，你從哪裡來？（下）

方塊同學發表於2019-10-30
JavaScript

上文我們講到了 ECMAScript 標準的制定，各個瀏覽器廠商依據標準實現 JavaScript，但是事情到這裡還沒結束，可以說 ECMAScript 標準的制定只是 JavaScript 的起點。還沒看到上篇文章的同學歡迎點選連結。

JavaScript，你從哪裡來？（上）

JavaScript的真正含義

有很多同學有這樣的問題，既然 JavaScript 是基於 ECMAScript 實現的，那麼二者有什麼區別呢？雖然如今 JavaScript 和 ECMAScript 常常被人們用來表示相同的含義，但是 JavaScript 的真正含義比 ECMAScript 中規定的多，完整的 JavaScript 其實是由三個不同的部分組成的：

  • ECMAScript，由 ECMA-262 定義，提供了語言的核心功能
  • DOM（文件物件模型），提供訪問和操作網頁內容的方法和介面
  • BOM（瀏覽器物件模型），提供與瀏覽器互動的方法和介面

JavaScript

ECMAScript

ECMA-262所定義的 ECMAScript 只是描述了這門語言的基礎，包括以下這些內容：

  • 語法
  • 型別
  • 語句
  • 關鍵字
  • 保留字
  • 操作符
  • 物件

ECMAScript 定義的這些內容與實現的宿主平臺沒有關係，不管是在 Web 瀏覽器上還是在大名鼎鼎的 Node 上，我們可以看到基本的語法都是相似的，不同的是在 Web 瀏覽器上可以使用操作網頁內容的 DOM 的介面，而在 Node 上可以使用作業系統和檔案系統的介面。ECMAScript 只是提供了一個基礎，在這個基礎上可以構建更加一個更加完善的環境（比如 JavaScript 和 Node）。

ECMAScript 1.0 在 1997 年釋出，至今已經過去了很長的一段時間了，在這麼長的時間裡，ECMAScript 也更新了許多次版本，在這些版本中，有那麼一個版本你一定曾有所耳聞，不管你是不是前端工程師，不管你是否使用 JavaScript。是哪個版本呢？就是大家常說的 ES6，它的全稱是 ECMAScript 6.0。經常看到有同學疑惑 ES2015 和 ES6 是什麼關係？其實是這樣的，因為 ES6 是在 2015 年釋出的，又被稱為 ES2015，所以 ES2015 和 ES6 其實是同一個東西。當然 ES6 也不是最後一個版本，最新發布的版本已經到了 2019 年釋出的 ES10。

DOM

講完了 ECMAScript 我們來接著講講 DOM 吧。DOM 的全稱是 Document Object Model，即文件物件模型。DOM 是 XML 和 HTML 文件的程式設計介面，它提供了對文件的結構化描述，定義了一種方式使得指令碼程式可以對該結構進行訪問和操作，從而改變真實頁面的結構、樣式以及內容。DOM 可以將整個頁面文件解析成為一個由節點和物件組成的結構體，比如下面這個 HTML 文件：

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>
複製程式碼

經過對映為 DOM 之後，這個 HTML 頁面對應的 DOM 結構如下圖所示：

DOM

DOM 的出現是為了保持 Web 跨平臺的能力，在 DHTML（Dynamic HTML，動態HTML） 出現後，頁面可以支援直接在客戶端進行 HTML 文件的更新，而不需要每次更新都到伺服器上獲取 HTML，頁面不需要重新載入，但是由於 Netscape 和微軟對於 DHTML 的開發各自有想法，這樣下去平臺的差異性越來越大，會導致程式難以相容多個平臺，此時負責制定 Web 通訊標準的 W3C（World Wide Web Consortium，全球資訊網聯盟）站了出來，開始著手進行 DOM 標準的制定，程式設計師終於再一次得到了拯救。

DOM 標準分為幾個級別：

  • DOM Level 1：於 1998 年 10 月成為 W3C 的推薦標準。DOM 1級由兩個模組組成：DOM 核心（DOM Core）和 DOM HTML。DOM 核心規定了如何對映基於 XML 的文件結構，DOM HTML 在 DOM 核心的基礎上進行了擴充套件，增加了針對 HTML 的物件和方法。
  • DOM Level 2：DOM 2級是對 DOM 1級的擴充套件，新增加了滑鼠事件和使用者介面事件和事件處理的介面，還增加了對於 CSS 的支援，以及提供了對 DOM 進行遍歷的介面。
  • DOM Level 3：DOM 3級進一步進行了擴充套件，引入了統一載入和儲存文件的方法，新增了驗證文件的方法，開始支援 XML 1.0 規範。

BOM

BOM 指的是 Browser Object Model，瀏覽器物件模型，它是瀏覽器視窗的一個抽象，使用 BOM 可以支援對瀏覽器視窗的控制，常見的有這樣的一些功能是由 BOM 提供的：

  • 彈出新瀏覽器視窗
  • 移動、縮放和關閉瀏覽器
  • 瀏覽器詳細資訊的 navigator 物件
  • 瀏覽器載入頁面的 location 物件
  • 使用者顯示器解析度詳細資訊的 screen 物件
  • 對 cookies 的支援
  • 像 XMLHttpRequest 這樣的物件

總結

這篇文章中我們一步步梳理了 JavaScript 誕生的全過程，首先 Netscape 的布蘭登·艾奇設計出 LiveScript，與 Sun 公司合作並搭上 Java 的順風車，把 LiveScript 改名為 JavaScript，並在 1995 年第一次進行了釋出並取得了巨大的成功。然後由於微軟的攪局，釋出了 JScript，兩個 JavaScript 的同時存在，導致了差異，不得不制定一個關於 JavaScript 的標準，於是 ECMAScript 在 1997 年誕生了。JavaScript 基於 ECMAScript 進行實現，但又不止於此，還包含了許多 ECMAScript 中沒有描述的內容，如 DOM 和 BOM 等，這些都進一步的豐富了 JavaScript的內涵，使它成為了一門更加完善和強大的指令碼語言，受到了全世界開發者的熱捧。最後引用大神的一句話：

Atwood's Law: Any application that can be written in JavaScript, will eventually be written in JavaScript. （一切能用 JavaScript 實現的，最終都會使用 JavaScript 實現。）

相關文章