上文我们讲到了 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 实现。)