《現代前端技術解析》讀後鬼扯

• 别名：前端工程師培養大綱
• 評分：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

本文來源：

掘金 https://juejin.im/post/5b349cb2f265da59645b17b4

如需轉載請聯系原作者