10分鐘理解Node.js koa源碼架構(gòu)設(shè)計(jì)
koa 發(fā)布已經(jīng)快 6 年的時(shí)間，作為繼 express 之后 node 服務(wù)框架最大的黑馬，有很多的設(shè)計(jì)思想值得我們學(xué)習(xí)，本文從簡(jiǎn)到繁逐步介紹 koa，同時(shí)適合新老手閱讀。
介紹
這里引用中文官方網(wǎng)站的原文
Koa 是一個(gè)新的 web 框架，由 Express 幕后的原班人馬打造， 致力于成為 web 應(yīng)用和 API 開(kāi)發(fā)領(lǐng)域中的一個(gè)更小、更富有表現(xiàn)力、更健壯的基石。 通過(guò)利用 async 函數(shù)，Koa 幫你丟棄回調(diào)函數(shù)，并有力地增強(qiáng)錯(cuò)誤處理。 Koa 并沒(méi)有捆綁任何中間件， 而是提供了一套優(yōu)雅的方法，幫助您快速而愉快地編寫(xiě)服務(wù)端應(yīng)用程序。
既然是 web 框架大家一定不陌生，通過(guò)啟動(dòng)一個(gè) node http server，監(jiān)聽(tīng)一個(gè)端口，進(jìn)而我們就可以通過(guò)類似 localhost:3000 在本地訪問(wèn)我們的服務(wù)了，這個(gè)服務(wù)可以是 web 網(wǎng)站，可以是 restful 接口，也可以是靜態(tài)文件服務(wù)等等。
Hello Word
任何語(yǔ)言、框架都存在 Hello Word 示例，來(lái)表達(dá)其最簡(jiǎn)單的入門(mén) Demo，代碼如下：
此時(shí)訪問(wèn)瀏覽器 localhost:3000，我們會(huì)看到打印出了 Hello Word，此時(shí)一個(gè)基于 koa 的服務(wù)就啟動(dòng)完成了。
上下文
理解 koa 第一步，搞清楚上下文的作用
例如：微信群里面有人說(shuō)外面下雪了，你跑到窗邊看到的卻是晴空萬(wàn)里，這時(shí)你才意識(shí)到同樣是 10 月份，他在寒冷的北方，你在酷暑的南方。
類似的，一次請(qǐng)求會(huì)包含用戶的登錄狀態(tài)，或者一些Token之類的信息，這些信息就是上下文的一部分，用于確定一次的請(qǐng)求環(huán)境。
Koa 的 Context 把 node 的 request, response 對(duì)象封裝進(jìn)一個(gè)單獨(dú)對(duì)象, 并提供許多開(kāi)發(fā) web 應(yīng)用和 APIs 有用的方法. 那些在 HTTP server 開(kāi)發(fā)中使用非常頻繁操作, 直接在 Koa 里實(shí)現(xiàn), 而不是放在更高層次的框架, 這樣中間件就不需要重復(fù)實(shí)現(xiàn)這些通用的功能。
中間件
先來(lái)看一個(gè)官方的例子：
簡(jiǎn)單解釋下，代碼起始初始化一個(gè) koa 實(shí)例，下面分別通過(guò) use 方法載入了三個(gè)中間件方法，執(zhí)行順序：
- 進(jìn)入第一個(gè)中間件
- next() 跳到下一個(gè)中間件
- new Data() 記錄當(dāng)前時(shí)間
- next() 跳到下一個(gè)中間件
- 將 ctx.body 賦值
- 回到上一個(gè)中間件再次記錄當(dāng)前時(shí)間并計(jì)算時(shí)間差存到 http header 中
- 回到上一個(gè)中間件將 header 中的 X-Response-time 打印出來(lái)
這里的執(zhí)行順序延伸出了十分經(jīng)典的洋蔥模型：
在一次請(qǐng)求的過(guò)程中會(huì)往返經(jīng)過(guò)同一中間件兩次，允許我們處理不同請(qǐng)求階段的邏輯。
源碼解析
上面分別介紹了 koa 里面兩個(gè)最重要的概念，下面我們分析下 koa 內(nèi)部是如何運(yùn)作的，所謂的洋蔥模型是如何建立的。
koa 源碼的 lib 目錄十分簡(jiǎn)單。
- lib
- |- application.js
- |- context.js
- |- request.js
- |- response.js
Application 類初始化
入口文件是 application.js，我們先從這里入手。
Application 是一個(gè) class，這個(gè)類繼承了 node 的 Events 這里不詳細(xì)展開(kāi)，在 constructor 中初始化了以下內(nèi)容：
- proxy 代理默認(rèn)不開(kāi)啟
- middleware 中間件是個(gè)空數(shù)組，這里重點(diǎn)注意下
- env 根據(jù)環(huán)境變量 NODE_ENV 來(lái)判斷
- context、request、response 分別通過(guò) Object.create 方法將 lib 目錄下對(duì)應(yīng)的文件導(dǎo)入到 this 當(dāng)前上下文，且不污染引入對(duì)象
use 方法
按照正常的編碼順序，在初始化完 koa 實(shí)例后（即 const app = new Koa()），我們需要調(diào)用 app.use() 去掛載我們的中間件，那么我們看下 use 方法做了什么。
判斷中間件為 function，判斷中間件是否為 generator function 類型，只是簡(jiǎn)單的將中間件函數(shù) push 到了 middleware 數(shù)組中。
此時(shí)心中有沒(méi)有大寫(xiě)的 WHAT？
其實(shí)就是這么直白，沒(méi)什么復(fù)雜邏輯，后面也許大家都猜到了，循環(huán)調(diào)用 middleware 中的方法去執(zhí)行，此處尚未表明洋蔥模型是怎么來(lái)的，我們先不展開(kāi)，繼續(xù)按代碼順序執(zhí)行。
listen 方法
按照正常的編碼順序，在 use 完我們的中間件之后就是 app.listen(3000)
一起看下這個(gè) listen 干了什么。
這里的 http.createServer 就是 node 原生啟動(dòng) http 服務(wù)的方法，這里稍微擴(kuò)展下基礎(chǔ)知識(shí)，此方法接受兩個(gè)參數(shù)。
- options[IncomingMessage, ServerResponse] 這里從 node 版本 v9.6.0, v8.12.0 后才支持，這里不贅述。
- requestListener 此參數(shù)為 function 類型，每次請(qǐng)求會(huì)傳入 req, res 兩個(gè)參數(shù)
不難理解這里的 this.callback() 方法一定是返回了一個(gè)函數(shù)，并且接收兩個(gè)參數(shù) (req, res)，下面看下源碼：
這個(gè) callback 中的信息量有點(diǎn)大，代碼本身并不難理解，注釋也有說(shuō)明，從這里展開(kāi)從上到下分別解釋。
compose 方法
這里的 compose 方法主要負(fù)責(zé)生成洋蔥模型，通過(guò) koa-compose 包實(shí)現(xiàn)，源碼如下：
從注釋看得出大致邏輯，這里的巧妙之處在于 fn(context, dispatch.bind(null, i + 1))。
這個(gè) dispatch.bind(null, i + 1) 就是我們通常寫(xiě)中間件的第二個(gè)參數(shù) next。
我們執(zhí)行這個(gè) next() 方法實(shí)際上得到的是下一個(gè)中間件的執(zhí)行。
也就不難理解為什么我們 await next() 的時(shí)候等待的是后面所有中間件串聯(lián)執(zhí)行后了，回頭再看下上文中間件部分的執(zhí)行順序就豁然開(kāi)朗了。
createContext 方法
callback 中的展開(kāi)解釋，看下 const ctx = this.createContext(req, res) 做了什么。
這里主要是將 req, res 及 this.request, this.response 都掛載到了 context 上，并通過(guò)賦值理清了循環(huán)引用層級(jí)關(guān)系，為使用者提供方便。
handleRequest 方法
還是 callback 中的展開(kāi)解釋，看下 this.handleRequest(ctx, fn) 這部分做了什么。
分別拿到 ctx 和 compose 生成的洋蔥模型，開(kāi)始逐一消費(fèi)中間件。
context.js 文件
上面理清了整體框架，下面看下 context.js 內(nèi)部的細(xì)節(jié)，在文件結(jié)尾有兩大段的代理。
這里可以看到所有的 req 及 res 的方法集合，那么哪些方法可讀，哪些可寫(xiě)，哪些既可讀又可寫(xiě)，哪些方法不允許修改。
這就是 delegates 這個(gè)庫(kù)做的事情。
delegates 內(nèi)部利用了，__defineGetter__ 和 __defineSetter__ 方法控制讀寫(xiě)，當(dāng)然我們可以從中學(xué)習(xí)思想，也不能盲從。
這兩個(gè) api 去 MDN 上搜索會(huì)給出相同的警告信息
This feature is deprecated in favor of defining setters using the object initializer syntax or the Object.defineProperty() API。
其實(shí)還是建議我們使用 vue 的代理方式 Object.defineProperty()，不過(guò)這個(gè)庫(kù)有四年沒(méi)更新了依然穩(wěn)定運(yùn)行著，還是深受 koa 開(kāi)發(fā)者認(rèn)可的。
其它
request.js 和 response.js 文件沒(méi)什么可以講，就是具體的工具方法實(shí)現(xiàn)，方便開(kāi)發(fā)人員調(diào)用，感興趣可以自行閱讀源碼。
應(yīng)用
智聯(lián)前端架構(gòu)整體的 node 服務(wù)都基于 koa 實(shí)現(xiàn)，包括我們的 vue 服務(wù)端渲染和 node restful api 等等。
我們選擇 koa 的原因是其本身輕巧，可擴(kuò)展性良好，支持 async、await 的異步，徹底擺脫了回調(diào)地獄。
市面上也有成熟基于 koa2 的企業(yè)級(jí)解決方案，如 eggjs 和 thinkjs。
總結(jié)
揭開(kāi) koa 的神秘面紗，讓開(kāi)發(fā)者關(guān)注業(yè)務(wù)邏輯同時(shí)也關(guān)注下框架本身，有利于問(wèn)題排查和編寫(xiě)擴(kuò)展，與此同時(shí)可以學(xué)習(xí) express、hapi 等同類型框架的思想，結(jié)合現(xiàn)有企業(yè)級(jí)解決方案，選一款適合你的框架，總之框架不論好壞，只論場(chǎng)景。
