簡介

哈嘍大家好， 我是大圣，上次做了一個js的書籍測評，評價還不錯，在做css和node之前，再做幾本書的詳細(xì)推薦吧, ?國慶今天又在家好好讀了幾本具有代表性的

1. javascript高級程序設(shè)計【紅寶書】
2. javascript忍者秘籍
3. 你不知道的javascript 【小黃書】
4. javascript語言精粹與編程實踐【綠皮書】
5. how javascript works
6. javascript20年（電子八卦書）

先來紅寶書吧，這本書一直都是體系化學(xué)習(xí)js必備的書籍，第四版相比于第三版，多了很多，整本書分成三個大模塊，全面使用最新的語法， 國慶又詳細(xì)的看了一遍

1. Ecmascript語法
1. 基礎(chǔ)內(nèi)容
2. 進階操作
3. 新增了迭代器，代理反射，期約（Promise）三個章節(jié)
2. bom和dom
1. 瀏覽器宿主環(huán)境的相關(guān)api
3. javascript api
1. js相關(guān)的進階api
2. 新增了模塊和工作者線程（web worker）
3. 最佳實踐

這本書詳細(xì)的構(gòu)建了整個javascript開發(fā)者所需要的知識體系，所以建議這本書作為體系化學(xué)習(xí)的開始， 讀2~3遍后，再去閱讀其他進階和垂直領(lǐng)域的js書籍，效果倍棒

版本

我手里有的只有234三本 ?，第四版換作者了，精彩依舊，體系化依舊是是紅寶書的最大特點，借鑒winter的書評，這本書最大的特點就是體系化的前端教程，它是可以用來做教材的，javascript這幾年很多好書，都是講單點的，建議大家用這本書來構(gòu)建前端開發(fā)的知識體系，再去看別的書和框架，構(gòu)建前端程序員的核心競爭力 推薦給大家

第四版的另外一個特色，是很多章節(jié)都帶上了二維碼，掃碼可以看到官方對這一節(jié)的解讀，體驗不錯， 不過如果視頻能換成大妹子+露臉就更好了

Ecmascript

前三章

第一章相關(guān)的歷史更推薦《javascript20年》，第二三章是基礎(chǔ)，有js基礎(chǔ)的隨便翻翻就好，值得注意的是第二章增加了symbol，第三章的位運算，這些都是在vue3源碼里出現(xiàn)的，位運算關(guān)系到vue3的組合靜態(tài)標(biāo)記中的patchFlag和react源碼中的EventFlag，一定要搞明白，而且位運算本身就是做組合權(quán)限教研的最佳實踐，按位或授權(quán)，按位與校驗權(quán)限，除了理解vue3和react源碼外，我們做組件開發(fā)的時候也用的到

變量作用域與內(nèi)存

這一章和第三版差不多，主要是講清楚原始類型和引用類型，一個圖就能搞明白，幫我們理解傳參至關(guān)重要，除了undefined，null，boolean，number ,string，symbol是原始值，傳遞的時候是影分身， 其他都是引用，還是指向你自己， 修改會有副作用

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

還有就是作用域鏈的查詢，配合亂遭的變量提升、塊級作用域、閉包，是眾多騷包面試官喜歡的筆試題，與其刷題不如一次性搞清楚，配合小黃書上冊，基本就通了

最后是垃圾回收，機制有點像《尋夢環(huán)游記》，一個人的死亡并不是重點，被所有人遺忘后，才會被清理，變量也是如此, 如何利用垃圾回收機制去優(yōu)化自己的代碼，書中也給出了幾個中肯的建議

內(nèi)置引用類型

這兩張主要是介紹內(nèi)置各種亂遭的數(shù)據(jù)類型，比如Date，Regex，math，以及集合的引用類型arr，obj，set，map等，值得注意的是weakmap的講解，會讓大家對vue3的源碼理解有所幫助

看到書里解釋weak是弱弱的拿著，所以不會阻止垃圾回收的時候，我笑了，翻譯還是挺萌的，并且書里對定型數(shù)組的講解，還是蠻不錯的

迭代器、生成器、面向?qū)ο?、代?span style="display: none;">

自帶的for循環(huán)比較明顯的劣勢就是需要知道如何迭代，es6之后的迭代器就是為了解決這個問題，沒有代碼講起來比較飄忽

大概意思就是，定義了可迭代的協(xié)議，只要我們實現(xiàn)了這個協(xié)議的要求，也就是規(guī)定好【Symbol.iterator】這個key的行為，就可以通過迭代器去消費，不一定非得是數(shù)組或者對象

生成器也賊牛逼，可以在一個函數(shù)內(nèi)部暫停，也就是一個用*定義的生成器函數(shù)，內(nèi)部遇見yield，就會暫停執(zhí)行，知道調(diào)用next來恢復(fù)執(zhí)行

關(guān)于對象講解了對象的configurable，enumberable，wirtable，value幾個數(shù)據(jù)屬性，分別對應(yīng)著數(shù)據(jù)的能否刪除，能否通過for in循環(huán)訪問，能否修改和實際的值，介紹了一堆es6+的增強語法，然后詳細(xì)講解了原型鏈和繼承，還加上了es6的class語法，配合小黃書上冊，以后相關(guān)的問題你就是專家，和面試官談笑風(fēng)生

然后就是學(xué)習(xí)vue3必備的Proxy和Reflect了， 響應(yīng)式必備 快去看書吧，看完這章再去研究vue3的reactivity模塊鞏固一下，效果更佳

函數(shù)和promise

然后函數(shù)章節(jié)大家基本都會了，大部分內(nèi)容大家都耳熟能詳了，關(guān)于尾遞歸優(yōu)化的小節(jié)值得關(guān)注，然后就是熱度最廣的期約與異步函數(shù)了，包括基本的使用，promise的合成策略呀，一些第三方的擴展等，

關(guān)于promise的翻譯，上個測評我講過了，我問過hax，是future+promise的結(jié)合體， 我也覺得沒必要翻譯，但是如果翻譯的話，我覺得期約還是挺準(zhǔn)確的，畢竟總有一天這些術(shù)語都要翻譯，否則技術(shù)書籍里的英文單詞會越來越遠(yuǎn)

配合promise和async await，我們可以寫出更簡潔和容易理解的代碼，也是現(xiàn)代前端必備的技能了，這一章配合小黃書中冊，以及綠皮書對promise的剖析，絕對是進階必備

以上都是js的語言規(guī)范，然后推薦大家關(guān)注tc39的github，會有很多新語法的討論，了解新語法的來龍去脈，stage3的瀏覽器就基本是先了，stage2就是非常有潛力的天，我比較關(guān)注的比如Temporal處理事件，class fields

能在語言的設(shè)計階段就能圍觀甚至參與，絕對是裝逼必備技能，這里推薦關(guān)注我的技術(shù)偶像之一hax，tc39委員會成員

bom和dom

bom和客戶端檢測

然后就是瀏覽器環(huán)境了，所謂的bom和dom，bom沒啥多介紹的，大家耳熟能詳了，window，location控制導(dǎo)航，navigator了解瀏覽器，history操作瀏覽歷史等

客戶端檢測章節(jié)主要就是判斷各個瀏覽器，這一塊我建議大家閱讀司徒正美的《javascript框架設(shè)計》，關(guān)于瀏覽器檢測講的最深入，不過現(xiàn)在這個現(xiàn)代瀏覽器橫行的時代，這塊內(nèi)容過一下就好

dom

這塊大部分內(nèi)容也就是復(fù)習(xí)了，包括nodeType的12個數(shù)字都是啥意思，常見的dom操作，去瞅瞅dom啟蒙作為復(fù)習(xí)資料也不錯

有一個新的MutationObserver接口值得關(guān)注，可以觀察dom的變化，比如屬性，子節(jié)點的變化，都可以記錄下來，這個用來做用戶行為監(jiān)控，以及做fmp的性能統(tǒng)計，也就是首屏啥時候渲染出來，還可以設(shè)置不同元素的權(quán)重，比如video權(quán)重高等，統(tǒng)計出一個現(xiàn)在關(guān)鍵的性能治療fmp，都是很好用的api

然后就是一些擴展，大家也都很熟悉了，比如querySelector啥的，值得一提的是關(guān)于dom的遍歷，使用NodeIterator和TreeWalker可以非常方便的進行dom深度優(yōu)先遍歷，還有范圍選擇api，都值得一讀，這些新的api可能會對后續(xù)的vue和react的虛擬dom實現(xiàn)有一些影響

然后關(guān)于事件就當(dāng)復(fù)習(xí)了，里面關(guān)于ie兼容性的內(nèi)容為覺得有些多余，總的來說事件的方方面面都介紹到了，dom2和dom3的規(guī)范，界面事件，鼠標(biāo)事件，滾輪，鍵盤還有合成事件，觸摸事件等亂糟的, 不過還是有些細(xì)節(jié)沒介紹到, 比如once配置可以只觸發(fā)一次, 這個也是我看vue3源碼才知道的

然后就是canvas，webgl的入門，表單腳本和錯誤處理調(diào)試，處理xml，這部分第三版其實都有沒啥多說的

Javascript API

剩下的部分統(tǒng)稱為javascript api，基本都是比第三版多出來的內(nèi)容，非常推薦閱讀了解

比如20章就是一堆html5的新api入門，編碼，文件，媒體元素，拖放，通知，頁面顯隱，web component

然后網(wǎng)絡(luò)請求部分除了xmlhttprequest，跨域之外，多了fetch api，beacon api和websocket

客戶端存儲除了cookie還有l(wèi)ocalstorage和indexdb

新增的es6模塊值得關(guān)注，講解了模塊系統(tǒng)的發(fā)展史，但是沒講到我喜歡的seajs ，差評

除了es6本身的模塊系統(tǒng)知識外，也介紹了瀏覽器里面的script，加上type=module后，就直接支持了import語法，這個就是vue3配套的vite工具的原理了，我寫過一個vite源碼的文章，歡迎移步, 通過攔截import的請求實現(xiàn)工程化，在不遠(yuǎn)的未來可能會取代webpack的地位，還不快去好好學(xué)習(xí)

然后就是web worker，翻譯成工作者線程，感覺還不如叫影分身，囧，這一章還是蠻有必要的，大部分js開發(fā)者都沒有多進程的概念，學(xué)完這個我們就知道碰見耗時的任務(wù)偷桃子，我們完全可以用猴子猴孫去做，不耽誤主進程去和七仙女去講述葫蘆娃從石頭里蹦出來的故事，比如我們常見的面試題，大文件上傳，計算文件md5這個任務(wù)用webworker就是比較合理的場景

最后的最佳實踐 沒啥說的了，就是常見的優(yōu)化策略，這部分只是一個入門，后續(xù)需要看別的書看進階，后面框架的推薦竟然還有mooltools等過時的庫，所以不看也罷，不如我以后做一起現(xiàn)代的工具推薦

總結(jié)

總的來說這本書絕對是前端的重要參考書，借鑒winter的書評，這本書最大的特點就是體系化的前端教程，它是可以用來做腳踩的，javascript這幾年很多好書，都是講單點的

建議大家用這本書來構(gòu)建前端開發(fā)的知識體系，再去看別的書和框架，構(gòu)建前端程序員的核心競爭力 推薦給大家

下期預(yù)告 ?忍者書和小黃書 or javascript20年

參考資料

1. tc39 ?https://github.com/tc39

2. hax知乎 https://www.zhihu.com/people/he-shi-jun/answers

3. 《前端會客廳》hax專場 ?https://www.bilibili.com/video/BV1xT4y1L7ui

4. Javascript書籍全測評 ?https://juejin.im/post/6877712145757896717