數據結構和算法在前端領域的應用（前菜）

時間 2019-11-06

標籤數據結構算法前端領域應用简体版

原文原文鏈接

這是一個我即將作的一個《數據結構與算法在前端領域的應用》主題演講的一個前菜。但願經過這個分享讓你們認識到其實前端領域也有不少算法的，從而加深前端同窗對算法的認識。若是你們對數據結構和算法感興趣，歡迎關注個人我的公衆號，或者入羣和我交流，二維碼在文章末尾。前端

關於我

我是一個對技術充滿興趣的程序員, 擅長前端工程化，前端性能優化，前端標準化等。vue

作過.net，搞過Java，如今是一名前端工程師。node

除了個人本職工做外，我會在開源社區進行一些輸出和分享，GitHub 共計得到1.5W star。比較受歡迎的項目有leetcode題解 , 宇宙最強的前端面試指南和個人第一本小書react

爲何你們以爲算法沒用

在個人職業生涯中，碰到不少非算法崗的研發同窗吐槽「算法在實際業務中沒什麼用」，甚至在面試官也問過我這個問題。咱們姑且不來判斷這句話正確與否，咱們先來看下爲何你們會有這樣的想法。webpack

我發現不少人喜歡用冰山這個圖來表示這種只看到整體的一小部分的狀況。我也來借用一下這個創意。git

根據個人經驗，咱們寫的業務代碼一般不到總包體的 5%，下面是我之前作過的一個實際項目的代碼分佈。程序員

$ du -sh node_modules # 429M
 $ du -sh src # 7.7M
複製代碼

你們能夠拿本身的實際項目看一下，看是否是這樣的。github

其實不難看出業務代碼在整個應用的比例是很小的，軟件工程有一個至理名言，「軟件開發的 90%的工做是由 10%的人完成的」，這句話很對，那麼剩下的 10 的工做卻由剩下的 90%來完成。web

所以咱們感受算法沒用，是由於咱們沒用深刻剩下的「90%」不少場景咱們接觸不到，而且沒有思考過，就很容易「井底之蛙」，到頭來就變成「只會用別人造好的輪子組裝代碼」的「前端打字員」。面試

那剩下的 90% 究竟有哪些涉及到算法呢？是否能夠舉例說明呢？那接下來讓咱們來繼續看一下。

前端中算法的應用場景都有哪些

說實話，這部份內容實在太多啦，爲了讓你們有一個直觀的感覺，我畫了一個圖。

圖中黃色的表明我本身實現過。

這些都是前端開發過程的一些東西，他們多多少少涉及到了數據結構和算法的知識

下面咱們來簡單分析一下。

VDOM

事實上 VDOM 就是一種數據結構，可是它並非咱們在《數據結構與算法》課程中學習到的一些現成的數據結構。

邏輯上 VDOM 就是用來抽象 DOM 的，底層上 VDOM 廣泛實現是基於 hash table 這種數據結構的。

一個典型的 VDOM 能夠是：

{
  type: 'div',
  props: {
    name: 'lucifer'
  },
  children: [{
    type: 'span',
    props: {},
    children: []
  }]
}
複製代碼

不難看出，VDOM 是一種遞歸的數據結構，所以使用遞歸的方式來處理是很是直觀和容易的。

我上面提到了 VDOM 是 DOM 的抽象（ye, a new level of abstraction）。根據 VDOM 咱們能夠建立一個對應的真實 DOM。

若是咱們只是作了這一層抽象的話，咱們至關於引入了一種編程模式，即從面向 DOM 編程，切換到面向 VDOM 編程，而如今 VDOM 又是由數據驅動的，所以咱們的編程模式切換到了「數據驅動」。

事實上，VDOM 部分還有一個 VDOM diff 算法，相信你們都據說過。關於 DOM diff 的算法，以及它是如何取捨和創新的，我以前在一個地方回答過，這裏給一個連接地址: juejin.im/post/5d3d8c…

Hooks

Hooks 是 React16 添加的一個新功能，它要解決的問題是狀態邏輯複用。

Hooks 邏輯上解決了純函數沒法持久化狀態的「問題」，從而拓寬了純函數組件的適用範圍。

底層上 Hooks 使用數據來實現狀態的對應關係，關於這部分能夠參考個人 [第一期]實現一個簡化版的 React Hook - useState

Fiber

Fiber 也是 React16 添加的一個新功能。

事實上 Fiber 相似 VDOM，也是一個數據結構，並且一樣也是一個遞歸的數據結構。

爲了解決 React 以前一次全量更新的"問題", React 引入了 fiber 這種數據結構，並重寫了整個調和算法，而且劃分了多個階段。關於這部份內容，我只推薦一篇文章, Inside Fiber: in-depth overview of the new reconciliation algorithm in React

其實以前個人從零開始實現 React 系列教程也欠了 fiber 😄, 等我開心的時候補充上去哈。

Git

我以前寫過一個 Git 終端（代碼被我 rm -rf 啦）。這過程仍是用到了不少數據結構和算法的，我也學到了不少東西，甚至 React16 新的調和算法也有 Git 思想。

很直觀的，Git 在推送本地倉庫到遠程的時候會進行壓縮，其實這裏就用到了最小編輯距離算法。 Leetcode 有一個題目72. Edit Distance, 官方難度hard, Git 的算法要是這個算法的複雜版本。

另外 Git 其實不少存儲文件，數據的時候也用到了特殊的數據結構，我在這裏進行了詳細的描述，感興趣的能夠去看看。

Webpack

Webpack 是衆所周知的一個前端構建工具，咱們能夠用它作不少事情。至今在前端構建領域仍是龍頭老大 🐲 的位置。

Webpack 中最核心的 tapable 是什麼，是如何配合插件系統的？ webpack 是如何對資源進行抽象的， webpack 是如何對依賴進行處理的？更復雜一點 Tree Shaking 如何作，分包怎麼作，加速打包怎麼作。

其實 webpack 的執行過程是基於事件驅動的，tapable 提供了一系列鉤子，讓 plugin 深刻到這些過程之中去。聽起來有點像事件總線，其實其中的設計思想和算法細節要複雜和精妙不少。

關於這部分細節，我在個人從零實現一個 Webpack

以後會加入更多特性，好比 tapable

AST

AST（抽象語法樹）是前端編譯（嚴格意義上是轉義）的理論基礎，你若是想深刻前端編譯，就必定不能不會這個知識點。

和 AST 類似的，其實還有 CST，prettier 等格式化工具會用到，有興趣能夠搜一下。

這個網站可讓你對 AST 有一個直觀的認識。

AST 厲害就厲害在它自己不涉及到任何語法，所以你只要編寫相應的轉義規則，就能夠將任何語法轉義到任何語法。這就是babel， PostCSS, prettier， typescript 等的原理，除此以外，還有不少應用場景，好比編輯器。

以前本身寫過一個小型的生成 AST 的程序，源代碼忘記放哪了。😅

Browser History

像瀏覽器中的歷史頁面，移動端 webview 的 view stack, 都用到了棧這種數據結構。

剩下的我就不一一說了。其實都是有不少數據結構和算法的影子的。

OK，說了那麼多。這些都是「大牛」們作的事情，好像和我平常開發不要緊啊。我只要用他們作好的東西，調用一下，同樣能夠完成個人平常工做啊。讓咱們帶着這個問題繼續往下看。

算法在平常開發中的應用都有哪些

大神： 「你能夠先這樣，再這樣，而後就會抽象爲純算法問題了。」

我： 「哇，好厲害。」
複製代碼

其實就是你沒有掌握，或者「再思考」，以致於不能融匯貫通。

好比你能夠用 vue 組件寫一個遞歸，實現一些遞歸的功能，也是能夠的，可是大多數人都想不到。

接下來，我會舉幾個例子來講明「算法在平常開發中的應用」。注意，如下全部的例子均來自個人實際業務需求。

第一個例子 - 撤銷與重作

業務描述

某一天，可(gai)愛(si)的產品提了一個需求，」咱們的系統須要支持用戶撤銷和重作最近十次的操做。「

讓咱們來回憶一下純函數。

純函數有一個特性是給定輸入，輸出老是同樣的。

關於函數式編程能夠參考我以前的幾篇文章和一個分享

咱們對問題進行一些簡化，假設咱們的應用是純粹的數據驅動，也就是說知足純的特性。

咱們繼續引入第二個知識點 - reducer.

reducer 是一個純函數，函數簽名爲(store1, action1) => store2。即給定 state 和 action，必定會返回肯定的新的 state。

本質上 reducer 是 reduce 的空間版本。

假設咱們的應用初始 state 爲 state1，咱們按照時間前後順序分別發送了三個 action， action1, action2, action3。

咱們用一個圖來表示就是這樣的：

運用簡單的數據知識，咱們不難推導出以下關係：

若是對這部分知識點還比較迷茫，能夠看下我以前的一篇文章，從零實現一個 Redux

解決方案

基礎知識鋪墊完了，咱們來看一下怎麼解決這個問題。

第一種方案，咱們能夠將每次的store，即store1, store2, store3都存起來。好比我想回退到第二步，咱們只須要將store2取出來，覆蓋當前store，而後從新渲染便可。這種方案很直觀，能夠知足咱們的業務需求。可是缺點也很明顯，store在這裏被存儲了不少。每次發送一個action都會有一個新的store被存起來。當咱們應用比較大的時候，或者用戶觸發了不少action的時候，會佔據大量內存。實際場景中性能上咱們很難接受。