資訊專欄INFORMATION COLUMN
摘要：從事開(kāi)發(fā)的程序員，對(duì)于前后端分離模式多半不陌生，這也是目前主流的開(kāi)發(fā)模式，具體關(guān)于前后端分離的模式可以參看文章你不得不了解的前后端分離原理，在這里寫(xiě)者不進(jìn)行說(shuō)明。原理圖如下，前后端在一個(gè)進(jìn)程同一個(gè)端口中，通過(guò)熱替換更新的，而不是全量重啟。
從事 Web 開(kāi)發(fā)的程序員，對(duì)于前后端分離模式多半不陌生，這也是目前主流的 Web 開(kāi)發(fā)模式，具體關(guān)于前后端分離的模式可以參看文章《你不得不了解的前后端分離原理!》，在這里寫(xiě)者不進(jìn)行說(shuō)明。
好了，讓我們進(jìn)入主題 —— Node.js 前后端分離開(kāi)發(fā)新思路
在進(jìn)入新思路之前，我們現(xiàn)需要了解“老思路”是什么？（注意：后面的案例都是以全棧工程師為例，即前后端代碼在一起）
以一種具體情景為例：小牛是一名全棧工程師，喜歡前端后端全干，前端使用目前主流的 Webpack + React 全家桶（或 Vue 全家桶），后端使用 express（或 Koa），小牛在同時(shí)開(kāi)發(fā)前后端過(guò)程中，開(kāi)啟兩個(gè)進(jìn)程（前后端各一個(gè)），同時(shí)使用 nodemon 熱重啟后臺(tái)服務(wù)，使用 Webpack Proxy 轉(zhuǎn)發(fā)實(shí)現(xiàn)跨域請(qǐng)求，然后哼哧哼哧開(kāi)發(fā)。
如例子：一個(gè)前后端分離的簡(jiǎn)單案例
Process 1 Process 2 ___________ ____________________ | | Proxy | | | | FrontEnd | <----> | Nodemon | BackEnd | | | | | (cp 1) | ------------- ----------------------
如上示意，該模式啟動(dòng)需要啟動(dòng)兩個(gè)進(jìn)程（前端 和 Nodemon），其中 BackEnd 程序作為子進(jìn)程掛載在 Nodemon 進(jìn)程，而且前端和 Nodemon 進(jìn)程通過(guò) Proxy 轉(zhuǎn)發(fā)實(shí)現(xiàn)通信。
乍看一下這樣挺美好的，但是這種模式的缺陷也很容易暴露出來(lái)
傳統(tǒng)思路的缺陷BackEnd 程序復(fù)雜度提升后，啟動(dòng)時(shí)間也變得不可控，每次熱啟動(dòng)后臺(tái)服務(wù)時(shí)間過(guò)長(zhǎng)；
需要同時(shí)開(kāi)啟兩個(gè)進(jìn)程，一定程度提高了開(kāi)發(fā)成本
那么對(duì)于上述的問(wèn)題，需要介紹一下我們今天的主角！
前后端分離開(kāi)發(fā)新思路依舊是小牛的例子，大牛同樣使用小牛相同的前后端技術(shù)棧，但不同的是，大牛不使用 Nodemon 實(shí)現(xiàn)后端程序的熱重啟，而是使用類似 Webpack HMR（Hot Module Replacement） 的思路，熱更新 Node.js 中的 module，具體實(shí)現(xiàn)使用 hot-module-require。
原理圖如下，前后端在一個(gè)進(jìn)程（同一個(gè)端口）中，通過(guò) Fs Watcher 熱替換更新的 Module，而不是全量重啟。
Process _________________________ | | File Watcher | | Frontend | + | | | Backend | ---------------------------
其中核心的 Node.js 端 HMR 實(shí)現(xiàn)思路如下
Node.js 端 HMR 實(shí)現(xiàn)思路首先我們來(lái)看看一個(gè)程序的依賴圖關(guān)系
得到程序依賴圖
index.js 為程序入口，可以通過(guò)靜態(tài)代碼分析，得到 index.js 的直接依賴 express/index.js 和 lib/middleware.js，然后遞歸地進(jìn)行，依次得到一個(gè)完整的依賴圖，算法具體實(shí)現(xiàn)參看 detect-dep。
監(jiān)聽(tīng)依賴圖中涉及到的文件
需要熱更新，那就離不開(kāi)文件改動(dòng)的監(jiān)聽(tīng)，所以進(jìn)行依賴圖中文件的監(jiān)聽(tīng)（實(shí)際上只需要監(jiān)聽(tīng)本地的文件，排除 node builtin modules 和第三方模塊）
某個(gè)時(shí)候，lib/to-array.js 文件發(fā)生改動(dòng)！
刪除更新模塊 A 緩存 (delete require.caches[modulePath])
以 A 為入口，更新依賴圖
發(fā)出 A 更新的信號(hào)
根據(jù)依賴圖，得到依賴 A 的模塊集合 B
向上回溯 B，再次從 0. 開(kāi)始執(zhí)行
其中這一步需要注意環(huán)狀依賴的處理，需要保證一條依賴路徑，不進(jìn)行重復(fù)的依賴更新。
如 lib/to-array.js，存在兩條路徑：lib/to-array.js -> lib/middleware.js -> index/js 和 lib/to-array.js -> lib/express-utils.js -> lib/middleware.js -> index/js
以上算法的具體實(shí)現(xiàn)參看 hot-module-require，
具體的應(yīng)用代碼可以參看這里
相比與傳統(tǒng)模式，新思路的優(yōu)點(diǎn)十分突出。
優(yōu)勢(shì)細(xì)化 Module 更新的顆粒度，避免不必要的更新開(kāi)銷，大大縮減服務(wù)更新時(shí)間
只有一個(gè)進(jìn)程，一定程度上縮減了進(jìn)程調(diào)度，進(jìn)程切換的開(kāi)銷
用一個(gè)具體的場(chǎng)景對(duì)比舉例，如后端使用內(nèi)存存儲(chǔ)用戶 session 數(shù)據(jù)。如使用傳統(tǒng)方式開(kāi)發(fā)，則每一次更新后臺(tái)代碼，都會(huì)丟失內(nèi)存中的用戶數(shù)據(jù)，所以每次都需要重新進(jìn)行登錄；但是在新方式，只需要不修改用戶登錄模塊代碼，則不會(huì)重置用戶 session 數(shù)據(jù)，即不需重新登錄。
Backend 入口 / - - 登錄 --> Common <-- 某業(yè)務(wù)邏輯
如上簡(jiǎn)易模塊依賴圖，A -> B 表示 A 依賴 B，所以上圖中，Backend 入口直接依賴 “登錄”和“某業(yè)務(wù)邏輯”，間接依賴“Common”；這時(shí)候我們只有在修改了“登錄”或“Common”的代碼，才會(huì)觸發(fā)登錄模塊的熱更新。
但是新方法也不是無(wú)缺陷
缺陷如代碼模塊中包含全局副作用代碼，可能會(huì)有各種奇怪問(wèn)題出現(xiàn)
擴(kuò)展使用 Node.js HMR 可以實(shí)現(xiàn)各種各樣的熱更新體驗(yàn)，如熱更新 proxy，熱更新 mock 數(shù)據(jù)，熱更新配置文件...，非常 Cool！
相關(guān)材料靜態(tài)依賴分析
Node.js HMR 實(shí)現(xiàn)
Node.js HMR 在開(kāi)發(fā)環(huán)境中的使用
Node.js 環(huán)狀依賴
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104977.html
摘要：異步最佳實(shí)踐避免回調(diào)地獄前端掘金本文涵蓋了處理異步操作的一些工具和技術(shù)和異步函數(shù)。 Nodejs 連接各種數(shù)據(jù)庫(kù)集合例子 - 后端 - 掘金Cassandra Module: cassandra-driver Installation ... 編寫(xiě) Node.js Rest API 的 10 個(gè)最佳實(shí)踐 - 前端 - 掘金全文共 6953 字，讀完需 8 分鐘，速讀需 2 分鐘。翻譯自...
摘要：基本邏輯如下圖所示對(duì)此做了一個(gè)點(diǎn)贊的，邏輯不復(fù)雜，但達(dá)到了作為中間層實(shí)現(xiàn)前后端分離的目的。 零、用koa2實(shí)現(xiàn)前后端分離的點(diǎn)贊＋1的功能（歡迎clone和star） Github：https://github.com/pengxiaohua/praise-by-koa簡(jiǎn)書(shū)：http://www.jianshu.com/p/c3215333655a 一、前后端不分離存在什么問(wèn)題 之前做一...
摘要：我所在的美團(tuán)酒店事業(yè)部去年月份成立，新的業(yè)務(wù)新的開(kāi)發(fā)團(tuán)隊(duì)，這一切使得我們的前后端分離推進(jìn)的很徹底。日志監(jiān)控平臺(tái)日志監(jiān)控平臺(tái)是美團(tuán)內(nèi)部的一個(gè)日志收集系統(tǒng)，目前美團(tuán)統(tǒng)一使用收集日志，具有接收格式日志的能力，而日志監(jiān)控平臺(tái)也是以格式日志來(lái)收集。 轉(zhuǎn)自：美團(tuán)技術(shù)團(tuán)隊(duì) 作者：美團(tuán)技術(shù)團(tuán)隊(duì) 分享理由：很好的分享，可見(jiàn)，基于Node的前后端分離的架構(gòu)是越顯流行和重要，前端攻城獅們，No...
摘要：因此今天要討論的話題就是前后端分離的開(kāi)發(fā)，讓前端工程師的工作更飽滿，更具有價(jià)值如何實(shí)現(xiàn)前后端分離要實(shí)現(xiàn)前后端分離開(kāi)發(fā)其實(shí)不是什么難事，前輩早就有很多經(jīng)驗(yàn)了，比如等。 為什么要做分離開(kāi)發(fā)： 現(xiàn)在很多公司的web開(kāi)發(fā)模式都是用jsp、php、asp等等開(kāi)發(fā)，由服務(wù)端渲染，而前端工程師的工作就是完成切圖及靜態(tài)頁(yè)面的搭建，他們的精力都放在了輔助別人完成項(xiàng)目的工作，背鍋還不討好，責(zé)任劃分不明確。...
閱讀 1263·2021-11-25 09:43
閱讀 2000·2021-11-11 10:58
閱讀 1238·2021-11-08 13:18
閱讀 2750·2019-08-29 16:25
閱讀 3549·2019-08-29 12:51
閱讀 3349·2019-08-29 12:30
閱讀 784·2019-08-26 13:24
閱讀 3720·2019-08-26 10:38
