简介

哈喽大家好，我是大圣，上次做了一个js的书籍测评，评价还不错，在做css和node之前，再做几本书的详细推荐吧, 国庆今天又在家好好读了几本具有代表性的

javascript高级程序设计【红宝书】
javascript忍者秘籍
你不知道的javascript 【小黄书】
javascript语言精粹与编程实践【绿皮书】
how javascript works
javascript20年（电子八卦书）

img

先来红宝书吧，这本书一直都是体系化学习js必备的书籍，第四版相比于第三版，多了很多，整本书分成三个大模块，全面使用最新的语法，国庆又详细的看了一遍

Ecmascript语法
1. 基础内容
2. 进阶操作
3. 新增了迭代器，代理反射，期约（Promise）三个章节
bom和dom
1. 浏览器宿主环境的相关api
javascript api
1. js相关的进阶api
2. 新增了模块和工作者线程（web worker）
3. 最佳实践

这本书详细的构建了整个javascript开发者所需要的知识体系，所以建议这本书作为体系化学习的开始，读2~3遍后，再去阅读其他进阶和垂直领域的js书籍，效果倍棒

image-20201008061120962

版本

image-20201006214121858

我手里有的只有234三本，第四版换作者了，精彩依旧，体系化依旧是是红宝书的最大特点，借鉴winter的书评，这本书最大的特点就是体系化的前端教程，它是可以用来做教材的，javascript这几年很多好书，都是讲单点的，建议大家用这本书来构建前端开发的知识体系，再去看别的书和框架，构建前端程序员的核心竞争力推荐给大家

第四版的另外一个特色，是很多章节都带上了二维码，扫码可以看到官方对这一节的解读，体验不错，不过如果视频能换成大妹子+露脸就更好了

Ecmascript

前三章

第一章相关的历史更推荐《javascript20年》，第二三章是基础，有js基础的随便翻翻就好，值得注意的是第二章增加了symbol，第三章的位运算，这些都是在vue3源码里出现的，位运算关系到vue3的组合静态标记中的patchFlag和react源码中的EventFlag，一定要搞明白，而且位运算本身就是做组合权限教研的最佳实践，按位或授权，按位与校验权限，除了理解vue3和react源码外，我们做组件开发的时候也用的到

image-20201005070058425

image-20201005064951859

变量作用域与内存

这一章和第三版差不多，主要是讲清楚原始类型和引用类型，一个图就能搞明白，帮我们理解传参至关重要，除了undefined，null，boolean，number ,string，symbol是原始值，传递的时候是影分身，其他都是引用，还是指向你自己，修改会有副作用

let obj1 = new Object();
let obj2 = obj1;
obj1.name = "lsp";
console.log(obj2.name);  // "lsp"

还有就是作用域链的查询，配合乱遭的变量提升、块级作用域、闭包，是众多骚包面试官喜欢的笔试题，与其刷题不如一次性搞清楚，配合小黄书上册，基本就通了

最后是垃圾回收，机制有点像《寻梦环游记》，一个人的死亡并不是重点，被所有人遗忘后，才会被清理，变量也是如此, 如何利用垃圾回收机制去优化自己的代码，书中也给出了几个中肯的建议

内置引用类型

这两张主要是介绍内置各种乱遭的数据类型，比如Date，Regex，math，以及集合的引用类型arr，obj，set，map等，值得注意的是weakmap的讲解，会让大家对vue3的源码理解有所帮助

看到书里解释weak是弱弱的拿着，所以不会阻止垃圾回收的时候，我笑了，翻译还是挺萌的，并且书里对定型数组的讲解，还是蛮不错的

image-20201005212616083

迭代器、生成器、面向对象、代理

自带的for循环比较明显的劣势就是需要知道如何迭代，es6之后的迭代器就是为了解决这个问题，没有代码讲起来比较飘忽

大概意思就是，定义了可迭代的协议，只要我们实现了这个协议的要求，也就是规定好【Symbol.iterator】这个key的行为，就可以通过迭代器去消费，不一定非得是数组或者对象

image-20201005214820288

生成器也贼牛逼，可以在一个函数内部暂停，也就是一个用*定义的生成器函数，内部遇见yield，就会暂停执行，知道调用next来恢复执行

关于对象讲解了对象的configurable，enumberable，wirtable，value几个数据属性，分别对应着数据的能否删除，能否通过for in循环访问，能否修改和实际的值，介绍了一堆es6+的增强语法，然后详细讲解了原型链和继承，还加上了es6的class语法，配合小黄书上册，以后相关的问题你就是专家，和面试官谈笑风生

然后就是学习vue3必备的Proxy和Reflect了，响应式必备快去看书吧，看完这章再去研究vue3的reactivity模块巩固一下，效果更佳

函数和promise

然后函数章节大家基本都会了，大部分内容大家都耳熟能详了，关于尾递归优化的小节值得关注，然后就是热度最广的期约与异步函数了，包括基本的使用，promise的合成策略呀，一些第三方的扩展等，

关于promise的翻译，上个测评我讲过了，我问过hax，是future+promise的结合体，我也觉得没必要翻译，但是如果翻译的话，我觉得期约还是挺准确的，毕竟总有一天这些术语都要翻译，否则技术书籍里的英文单词会越来越远

配合promise和async await，我们可以写出更简洁和容易理解的代码，也是现代前端必备的技能了，这一章配合小黄书中册，以及绿皮书对promise的剖析，绝对是进阶必备

以上都是js的语言规范，然后推荐大家关注tc39的github，会有很多新语法的讨论，了解新语法的来龙去脉，stage3的浏览器就基本是先了，stage2就是非常有潜力的天，我比较关注的比如Temporal处理事件，class fields

能在语言的设计阶段就能围观甚至参与，绝对是装逼必备技能，这里推荐关注我的技术偶像之一hax，tc39委员会成员

image-20201006215835219

image-20201006215913089

bom和dom

bom和客户端检测

然后就是浏览器环境了，所谓的bom和dom，bom没啥多介绍的，大家耳熟能详了，window，location控制导航，navigator了解浏览器，history操作浏览历史等

客户端检测章节主要就是判断各个浏览器，这一块我建议大家阅读司徒正美的《javascript框架设计》，关于浏览器检测讲的最深入，不过现在这个现代浏览器横行的时代，这块内容过一下就好

dom

这块大部分内容也就是复习了，包括nodeType的12个数字都是啥意思，常见的dom操作，去瞅瞅dom启蒙作为复习资料也不错

有一个新的MutationObserver接口值得关注，可以观察dom的变化，比如属性，子节点的变化，都可以记录下来，这个用来做用户行为监控，以及做fmp的性能统计，也就是首屏啥时候渲染出来，还可以设置不同元素的权重，比如video权重高等，统计出一个现在关键的性能治疗fmp，都是很好用的api

然后就是一些扩展，大家也都很熟悉了，比如querySelector啥的，值得一提的是关于dom的遍历，使用NodeIterator和TreeWalker可以非常方便的进行dom深度优先遍历，还有范围选择api，都值得一读，这些新的api可能会对后续的vue和react的虚拟dom实现有一些影响

然后关于事件就当复习了，里面关于ie兼容性的内容为觉得有些多余，总的来说事件的方方面面都介绍到了，dom2和dom3的规范，界面事件，鼠标事件，滚轮，键盘还有合成事件，触摸事件等乱糟的, 不过还是有些细节没介绍到, 比如once配置可以只触发一次, 这个也是我看vue3源码才知道的

image-20201006080650548

image-20201006080056529

然后就是canvas，webgl的入门，表单脚本和错误处理调试，处理xml，这部分第三版其实都有没啥多说的

Javascript API

剩下的部分统称为javascript api，基本都是比第三版多出来的内容，非常推荐阅读了解

比如20章就是一堆html5的新api入门，编码，文件，媒体元素，拖放，通知，页面显隐，web component

然后网络请求部分除了xmlhttprequest，跨域之外，多了fetch api，beacon api和websocket

客户端存储除了cookie还有localstorage和indexdb

新增的es6模块值得关注，讲解了模块系统的发展史，但是没讲到我喜欢的seajs ，差评

除了es6本身的模块系统知识外，也介绍了浏览器里面的script，加上type=module后，就直接支持了import语法，这个就是vue3配套的vite工具的原理了，我写过一个vite源码的文章，欢迎移步, 通过拦截import的请求实现工程化，在不远的未来可能会取代webpack的地位，还不快去好好学习

然后就是web worker，翻译成工作者线程，感觉还不如叫影分身，囧，这一章还是蛮有必要的，大部分js开发者都没有多进程的概念，学完这个我们就知道碰见耗时的任务偷桃子，我们完全可以用猴子猴孙去做，不耽误主进程去和七仙女去讲述葫芦娃从石头里蹦出来的故事，比如我们常见的面试题，大文件上传，计算文件md5这个任务用webworker就是比较合理的场景