前言
最近在重看红宝书,发现了很多原本没有注意到的细节,加上之前一段时间看了很多面经,对面试喜欢考的高频考点也有了一些了解。于是打算写一个红宝书精读的系列,把书上的知识点和面试题结合起来,并且分享包含拓展的知识点的一些文章。
思维导图
章节重点
第一章惯例是比较简略的介绍和历史的回顾。
1.历史回顾 & ECMAScript
关于历史,一般也没有什么技术相关的考点,只能说了解了显得知识体系比较完善(比较闲)。
不过需要注意的一个点:我们一般说的ES就是ECMAScript,它和JavaScript的关系可以说是标准和具体实现的关系。ECMA于1997年因为网景和微软的JavaScript实现出入变大,制定了一个标准规范:ECMA-262 来规定这门语言所应该具有的基本规范。
打个比方:市场上本来没有手抓饼,后来一个小吃摊主创造了手抓饼,别人看到了纷纷模仿,但是都或多或少有些区别,分不清谁是正宗谁是正确。于是市场监管局就出面规定了手抓饼的规范:比如说必须要加一个鸡蛋,必须使用什么制作等等。后来人们虽然也有不同意,但是就可以尝试去讨论标准而不是各行其是,让人们搞不清手抓饼是什么。
而这个手抓饼标准也在不断地变化,比如说最初的手抓饼规定只能用鸡蛋,后来大家觉得鸭蛋未必不可,于是市场监管局也在更新标准。ECMAScript也在不断地更新自己的版本。现在比较重要的两个版本节点是ECMAScript 第三版(它是IE8支持的上限)和ECMAScript 第六版,或者称为ES2015(它提供了很多新的方法,更新巨大)。
这里推荐 阮一峰老师的ES6教程
因为手抓饼有了标准,大家除了购买大商家出售的手抓饼,也可以自己尝试做手抓饼。ECMA认为一个符合ECMAScript的语言实现需要具有以下特征:
- 支持ECMA-262提出的语法、类型、语句、关键字、保留字、操作符、全局对象。
- 支持Unicode字符标准
当然在这个基础上还可以有更多新的内容,可以理解为 XXX extends ECMAScript
2. DOM & BOM
虽然在前文说过:ECMAScript和JavaScript的关系可以说是标准和具体实现的关系。但是实际上JavaScript还有别的组成部分,它们就是DOM和BOM。所以我们可以说JavaScript包含三个部分:
- ECMAScript:核心
- DOM:文档对象模型
- BOM: 浏览器对象模型
关于DOM和BOM的详细介绍在之后的章节,所以本章就简单的列举了一下。
DOM
DOM从名字也可以看出,是针对文档的,放在前端领域,说的自然就是HTML文档。DOM的作用简单的来说就是:将整个HTML页面抽象为一组分层节点,形成一个文档树。
什么是文档树呢?HTML是由标签组成的,标签之间有清晰的嵌套关系:比如ul标签中嵌套li标签。这种关系用树表示出来就是父节点和子节点。 如下两图所示,图一的HTML页面可以被处理为图二的文档树。
那么为什么需要文档树呢?其中一个原因就是能够更好地展示节点(或者说标签)之间的关系。比如说DOM中一个API: XXX.childNodes就可以获得XXX标签的子标签节点组成的类数组,这种父子关系就依赖于树的层级表现。
和ECMAScript一样,DOM也在不断地升级,目前可以分为三个阶段:Level 1~3。具体的功能实现详见知识导图。这里就不再一一介绍了,因为13章还会专门讲DOM。
BOM
BOM同样也可以顾名思义,肯定是与浏览器有关的东西。而实际上也确实如此,浏览器除了页面显示之外的操作,那些浏览器自己提供的功能(因而也特定于浏览器具体实现),都可以被称作BOM。
常见的BOM操作诸如location与网络路由相关,screen与屏幕显示相关。
正如上文提到的BOM操作很多特定于浏览器,所以各家之间的区别也越来越大。从ECMAScript的诞生我们多少也能猜到BOM也会有一个统一标准的到来。HTML5中将许多BOM操作覆盖从而形成了标准。所以在学习HTML5时也需要关注这些BOM操作。
总结
本章偏总论,介绍的点比较概要,我个人认为需要掌握的知识点有:
- ECMAScript关键版本
- JavaScript组成部分(ECMAScript, DOM, BOM)
实际上从本章我们也能了解到前端技术整体上是一个不断标准化的趋势:网景微软的不同js实现导致了ECMA-262出现;不同浏览器不同的BOM操作实现导致了HTML5覆盖BOM操作。技术不断发展,形成繁荣但却混乱的局面,然后标准介入,归纳优秀的部分并且改善用户体验。
作为一个普通前端,我们或许不能主导技术的开发甚至标准的制定,但是我们可以尽可能的写出符合标准的代码,学习其中优秀的编程思路。这也是多看MDN文档,多读源码的最大益处吧~
面试相关文章
介绍了常见的BOM和DOM可能会考到的知识点。
由DOM的一个非常基本的操作延伸到性能优化和算法相关,展示了一种面试中深入挖掘的情景。