• 別名：前端工程師培養大綱
• 評分：4星
• 作者：張成文
• GitHub：https://github.com/ouvens/
• 豆瓣：https://book.douban.com/subject/27021790/

本書就像它前言中提到的那樣，是一本以現代前端技術思想與理論為主要內容的書，類似于大學剛入學發的那本專業培養大綱，總結和梳理了整個前端開發體系，讓我們站在一個全局的角度去看待前端這個領域，展示了可供我們深入探索的各個方向。

這類書籍寫起來不容易，沒把握好很容易就變成博客合集。這本書到底怎么樣，見仁見智吧。書中很多原理的講解都附有代碼，不是很復雜，仔細揣摩下都能懂，作者確實是費了些心思的。個人感覺不足的地方有幾點，第一個就是對前端構建的工具介紹的不多，我們常見的webpack，gulp等都沒怎么提及，另一個是對MVV*模式介紹的過于簡單，React Native，weex都沒留下只言片語。前端技術發展日新月異，各種工具框架層出不窮，爭奇斗艷，讓我們這些搞前端的眼花繚亂，真心有些學不動的感覺。

作者的GitHub上有一張 前端知識導圖， 一定要看，一定要看，一定要看，重要的事情說三遍。大家可能比較熟悉StuQ出品的 HTML5開發技能圖譜，也很全面，但是比前者精簡了很多。

本書第一章就回答了一個常見的問題，即我們在瀏覽器的地址欄輸入網址到展示頁面這一過程中發生了什么。由此引出了瀏覽器的組成結構， 介紹了渲染引擎的渲染流程，我們最常見的是webkit內核，渲染DOM的流程如下：

接著是瀏覽器緩存的話題，有一張圖還是很經典，如下：

第二章的內容讓我懷疑作者了解Android開發，因為在Hybrid app的介紹中原生的部分都是Android的，對于jsBridge的原理，我之前還花過力氣研究過，大家最常見的應該是大頭鬼的開源的項目 JsBridge 了，還有其他的實現方法，不過原理都是一樣的，但是實現的細節有不同。

第三章提及了web Components這個提上議程的原生組件化標準。其實我們也接觸過，比如說 <video>、<audio> 等標簽，深入下去你會發現這個其實就是Shadow DOM。我覺得web Components的組件化和常用框架的組件化有著很大的區別，前者目的就是為了組件，而后者的目的是高效的同步UI和狀態，無論是使用虛擬DOM還是通過觀察者檢測變化。

大名鼎鼎的ionic在V4版本中放棄了Angular，轉而使用了Stencil，它是一個把你所寫的組件代碼最終生成Web Components的編譯器。官網上介紹它的特色如下：

• Virtual DOM
• Async rendering (inspired by React Fiber)
• Reactive data-binding
• TypeScript
• JSX

我粗略看了下它的文檔，可以說是Angular+React的結合體，上一段他們官網的示例代碼，大家體會一下：

import { Component, Prop } from '@stencil/core';@Component({tag: 'my-first-component',styleUrl: 'my-first-component.scss' }) export class MyComponent {// Indicate that name should be a public property on the component@Prop() name: string;render() {return (<p>My name is {this.name}</p>);} } 復制代碼

@Component，render()這兩個看起來很眼熟吧。

第四章介紹了現代前端框架的原理，通過簡單的代碼粗略實現了雙向數據綁定，靜下心來看的話，肯定可以懂得，掘金上介紹Vue實現原理的博客很多，可以對照著看。Virtual DOM的設計理念當然是不可或缺的，短短幾頁內容，深入了解的話，還是不夠的。

第五章是前端項目的各種規范，這里我就不得不吐槽一下Angular，官方文檔里居然連變量命名都提供了建議，真是夠夠的。相比Vue和React，Angular真的是管的太寬了，可能唯一的好處就是從java轉過來的我對ts有種莫名的好感吧。不過Angular自帶的Rxjs真心是好用，讓我想起當年寫Android的痛苦歲月。

第六章提到了后端直出，這個我沒用過，就不鬼扯了。

本書一個有意思的地方是在最后一部分還專門教大家如何成為一個優秀的前端工程師，這個在其他的技術類書籍中確實是少見的。

本書不推薦購買，借閱看兩遍就足夠了，不過上面的知識導圖強烈建議存檔的。

前端類圖書還是挺多的，有些真的沒必要買，看一遍就過去了，有些呢確實是不可或缺的好書，為了防止自己花了冤枉錢，可以辦理一張圖書館的借書證，很多書都可以在里面找到，先借閱一番，再來決定是否買。吐槽一下南京的金陵圖書館，號稱是排在全國前列，我以為管理有多好，然而有些書的位置壓根兒就不對，可以搜到，就是找不到，也是醉了。

原文發布時間為：2018年06月28日

原文作者：JerryMissTom

本文來源：掘金?如需轉載請聯系原作者

總結

以上是生活随笔為你收集整理的《现代前端技术解析》读后鬼扯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。