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

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

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

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

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

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

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的痛苦歲月。

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

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

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

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

相關文章