阅读 11084

Javascript高级程序设计第四版详细测评| 🏆 掘金技术征文-双节特别篇

视频版地址

简介

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

  1. javascript高级程序设计【红宝书】
  2. javascript忍者秘籍
  3. 你不知道的javascript 【小黄书】
  4. javascript语言精粹与编程实践【绿皮书】
  5. how javascript works
  6. javascript20年(电子八卦书)

img

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

  1. Ecmascript语法
    1. 基础内容
    2. 进阶操作
    3. 新增了迭代器,代理反射,期约(Promise)三个章节
  2. bom和dom
    1. 浏览器宿主环境的相关api
  3. 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的组合静态标记中的patchFlagreact源码中的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就是比较合理的场景

image-20201006222338112

最后的最佳实践 没啥说的了,就是常见的优化策略,这部分只是一个入门,后续需要看别的书看进阶,后面框架的推荐竟然还有mooltools等过时的库,所以不看也罢,不如我以后做一起现代的工具推荐

总结

总的来说这本书绝对是前端的重要参考书,借鉴winter的书评,这本书最大的特点就是体系化的前端教程,它是可以用来做脚踩的,javascript这几年很多好书,都是讲单点的

建议大家用这本书来构建前端开发的知识体系,再去看别的书和框架,构建前端程序员的核心竞争力 推荐给大家

image-20201006144255843

下期预告 忍者书和小黄书 or javascript20年

参考资料

  1. tc39 github.com/tc39

  2. hax知乎 www.zhihu.com/people/he-s…

  3. 《前端会客厅》hax专场 www.bilibili.com/video/BV1xT…

  4. Javascript书籍全测评 juejin.im/post/687771…

  5. 本文视频版本地址 欢迎三连 www.bilibili.com/video/BV1Nf…

🏆 掘金技术征文|双节特别篇