JavaScript,你從哪裡來?(下)

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

上文我們講到了 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.01997 年釋出,至今已經過去了很長的一段時間了,在這麼長的時間裡,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 實現。)

相關文章