【JS红宝书⁰¹】基础核心

Se1fAware
201 阅读7分钟

引子：

JavaScript 是一种编程语言，它可以被包含在网页中以提供功能，如菜单、声音及其他互动功能。主要由三大部分组成，分别为 ECMAScript, DOM, BOM。

核心（ECMAScript）

ECMAScript简介： 即ECMA-262定义的语言，是一个基准，并不局限于Web浏览器。ECMAScript没有输入输出的方法。 Web浏览器只是ECMAScript实现可能存在的一种宿主环境，宿主环境提供ECMAScript的基准实现和与环境自身交互必须的扩展，如DOM使用ECMAScript的核心类型与语法，提供特定与环境额的额外功能

ESMAScript基本定义：语法，类型，语句，关键字，保留字，操作符，全局对象

ECMAScript 只是对实现这个规范描述的所有方面的一门语言的称呼

ESMAScript符合性：要成为 ECMAScript 实现，必须几个条件；

  • 支持ECMA-262中描述的所有 类型，值，对象，属性，函数，以及程序语法与定义
  • 支持Unicode字符标准

除此之外，符合性实现还可以满足下列要求：

  • 增加ECMA-262中未提及的 “额外的类型， 值，对象， 属性和函数”。 ECMA-262 所说的这些额外内容主要指规范中未给出的新对象或对象的新属性。
  • 支持 ECMA-262 中没有定义的 “程序和正则表达式语句” （意思是允许修改和扩展内置的正则表达式特性）

上列条件为实现开发者基于ECMAScript开发语言提供了极大的权限和灵活度，这也是它受欢迎的一点

注： ECMAScript可以理解为JavaScript的一种标准，但实际上JS是以ECMA-262标准为实现和扩展的

文档对象模型（DOM）

文档对象模型（DOM，Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的XML。DOM将整个页面抽象为一组分层节点。HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。 DOM 就是使用 ECMAScript实现的

  • 简单举例
 <html> 
     <head> 
         <title>Sample Page</title> 
     </head> 
     <body> 
         <p> Hello Shrimps!</p> 
     </body> 
 </html>

这些代码通过DOM可以表示为树状的一组分层节点，如下：

DOM 通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。

为什么 DOM 是必需的

在 IE4 和 Netscape Navigator 4 支持不同形式的动态 HTML（DHTML）的情况下，开发者首先可以 做到不刷新页面而修改页面外观和内容，代表了Web技术的一个巨大进步。

- 但也暴露了很大的问题： 由于网景和微软采用不同思路开发 DHTML，此后开发者就再不能写一个可以在任何浏览器运行的HTML页面了。

- 解决问题的办法： 为了保持 Web 跨平台的本性，万维网联盟（W3C，World Wide Web Consortium）开始了制定 DOM 标准的进程。

DOM级别

Level 0 ： 没有一种标准叫 DOM Level 0，这只是一个历史的参照点。 DOM Level 0 可以看作 IE4 和 Netscape Navigator 4 中最初支持的 DHTML。

Level 1

  • 1998 年 10 月，DOM Level 1 成为 W3C 的推荐标准组成：DOMCore 和 DOM HTML

    DOMCore 提供了一种映射 XML 文档，从而方便访问和操作文档任意部分的方式；

    DOM HTML 扩展了前者，并增加了特定于 HTML 的对象和方法。

  • Level 1 的目标是映射文档结构。

  • 这个对最初 DOM 的扩展增加了对鼠标和用户界面事件，范围，遍历(迭代DOM节点的方法)的支持，而且通过对象接口支持了层叠样式表(CSS)。DOM Level1 中的DOM Core 也被扩展以包含对 XML (可扩展标记语言)命名空间的支持。

Level 2

DOM Level 2 新增了以下模块与支持新的接口：

  • DOM视图：描述追踪文档不同视图(如应用 CSS 样式前后的文档)的接口
  • DOM事件：描述事件及事件处理的接口
  • DOM样式：描述处理元素 CSS 样式的接口
  • DOM遍历和范围：描述遍历和操作 DOM 树的接口

Level 3

  • 进一步扩展了DOM，增加了以统一的方式加载和保存文档的方法(包含一个叫DOM Load and Save 的新模块中)，还有验证文档的方法(DOM Valiadtion)。
  • 在DOM Level 3 中，DOM Core 经过扩展支持了所有的XML 1.0 的特性，包括XML Infoset，XPath 和 XML base。

目前，W3C 不再按照 Level 来维护 DOM 了，而是作为 DOM Living Standard 来维护，其快照称为DOM4。DOM4 新增的内容包括替代 Mutation Events 的 Mutation Observers。

其他DOM

除了 DOM Core 和 DOM HTML 接口，有些其他语言也发布了自己的 DOM 标准。下面列出的语言是基于XML的，每一种都增加了该语言独有的DOM方法和接口：

  • 可伸缩矢量图（SVG，Scalable Vector Graphics）
  • 数学标记语言（MathML，Mathematical Markup Language）
  • 同步多媒体集成语言（SMIL，Synchronized Multimedia Integration Language）

以上列表中的语言是 W3C推荐标准，还有一些语言开发了自己的DOM实现，比如 Mozilla 的 XML 用户界面语言（XUL，XMLUser Interface Language）。

Web浏览器对DOM的支持情况

DOM 标准在 Web 浏览器实现它之前就已经作为标准发布了。

  • IE 在第 5 版中尝试支持 DOM，但直到 5.5 版才开始真正支持，该版本实现了 DOM Level 1 的大部分。
  • IE 在第 6 版和第 7 版中都没有实现新特性，第 8 版中修复了一些问题。
  • 网景在 Netscape 6（Mozilla 0.6.0）之前都不支持 DOM。Netscape 7 之后，Mozilla 把开发资源转移到开发 Firefox 浏览器上。
  • Firefox 3+支持全部的 Level 1、几乎全部的 Level 2，以及 Level 3 的某些部分。

支持 DOM 是浏览器厂商的重中之重，每个版本发布都会改进支持度。

下表展示了主流浏览器支持DOM 的情况：

注意 ：上表中兼容性的状态会随时间而变化，请根据官网情况自行观察。

浏览器对象模型（BOM）

IE3 和 Netscape Navigator 3 提供了浏览器对象模型（BOM） API，用于支持访问和操作浏览器的窗口。

BOM提供与浏览器交互的方法和接口，使用BOM，开发者可以操控浏览器显示页面之外的部分。

BOM最独一也是矛点最多的就是 ———— 它是唯一一个没有相关标准的JavaScript实现。

关于扩展

BOM 主要针对浏览器窗口和子窗口（frame） ，但是人们通常会把任何特点与浏览器的扩展都归在 BOM 的范畴内，如以下的一些扩展：

  • 弹出新浏览器窗口的能力
  • 移动，缩放和关闭浏览器窗口的能力
  • navigator 对象：提供关于浏览器的详细信息；
  • location 对象： 提供浏览器加载页面的详细信息；
  • screen 对象：提供关于用户屏幕分辨率的详细信息
  • performance 对象：提供浏览器内存占用，导航行为和时间统计的详细信息
  • 对 cookie 的支持；
  • 其他自定义对象，如 XMLHttpRequest 和 IE 的 ActiveXObject。

因为在很长时间内都没有标准，所以每个浏览器实现的都是自己的 BOM。有一些所谓的事实标准，比如对于 window 对象和 navigator 对象，每个浏览器都会给它们定义自己的属性和方法。 现在有了 HTML5，BOM 的实现细节应该会日趋一致

总结

JavaScript 是一门用来与网页交互的脚本语言，包含以下三个组成部分。
  • ECMAScript：由 ECMA-262 定义并提供核心功能。
  • 文档对象模型（DOM） ：提供与网页内容交互的方法和接口。
  • 浏览器对象模型（BOM） ：提供与浏览器交互的方法和接口。

JavaScript 的这三个部分得到了五大 Web 浏览器（IE、Firefox、Chrome、Safari 和 Opera）不同程度的支持。所有浏览器基本上对 ES5（ECMAScript 5）提供了完善的支持，而对 ES6（ECMAScript 6）和ES7（ECMAScript 7）的支持度也在不断提升。

avatar
文章
阅读
粉丝