Koa源碼解析，帶你實現一個迷你版的Koa

来源:https://www.cnblogs.com/chanwahfung/archive/2020/06/09/13072249.html
-Advertisement-
Play Games

前言 本文是我在閱讀 Koa 源碼後，並實現迷你版 Koa 的過程。如果你使用過 Koa 但不知道內部的原理，我想這篇文章應該能夠幫助到你，實現一個迷你版的 Koa 不會很難。 本文會循序漸進的解析內部原理，包括： 基礎版本的 koacontext 的實現中間件原理及實現 文件結構 applicat ...


前言

本文是我在閱讀 Koa 源碼後，並實現迷你版 Koa 的過程。如果你使用過 Koa 但不知道內部的原理，我想這篇文章應該能夠幫助到你，實現一個迷你版的 Koa 不會很難。

本文會循序漸進的解析內部原理，包括：

  1. 基礎版本的 koa
  2. context 的實現
  3. 中間件原理及實現

文件結構

  • application.js: 入口文件，裡面包括我們常用的 use 方法、listen 方法以及對 ctx.body 做輸出處理
  • context.js: 主要是做屬性和方法的代理，讓用戶能夠更簡便的訪問到request和response的屬性和方法
  • request.js: 對原生的 req 屬性做處理，擴展更多可用的屬性和方法，比如：query 屬性、get 方法
  • response.js: 對原生的 res 屬性做處理，擴展更多可用的屬性和方法，比如：status 屬性、set 方法

基礎版本

用法：

const Coa = require('./coa/application')
const app = new Coa()

// 應用中間件
app.use((ctx) => {
  ctx.body = '<h1>Hello</h1>'
})

app.listen(3000, '127.0.0.1')

application.js:

const http = require('http')

module.exports = class Coa {
  use(fn) {
    this.fn = fn
  }
  // listen 只是語法糖  本身還是使用 http.createServer
  listen(...args) {
    const server = http.createServer(this.callback())
    server.listen(...args)
  }
  callback() {
    const handleRequest = (req, res) => {
      // 創建上下文
      const ctx = this.createContext(req, res)
      // 調用中間件
      this.fn(ctx)
      // 輸出內容
      res.end(ctx.body)
    }
    return handleRequest
  }
  createContext(req, res) {
    let ctx = {}
    ctx.req = req
    ctx.res = res
    return ctx
  }
}

基礎版本的實現很簡單，調用 use 將函數存儲起來，在啟動伺服器時再執行這個函數，並輸出 ctx.body 的內容。

但是這樣是沒有靈魂的。接下來，實現 context 和中間件原理，Koa 才算完整。

Context

ctx 為我們擴展了很多好用的屬性和方法，比如 ctx.query、ctx.set()。但它們並不是 context 封裝的，而是在訪問 ctx 上的屬性時，它內部通過屬性劫持將 request 和 response 內封裝的屬性返回。就像你訪問 ctx.query，實際上訪問的是 ctx.request.query。

說到劫持你可能會想到 Object.defineProperty，在 Kao 內部使用的是 ES6 提供的對象的 setter 和 getter，效果也是一樣的。所以要實現 ctx，我們首先要實現 request 和 response。

在此之前，需要修改下 createContext 方法：

// 這三個都是對象
const context = require('./context')
const request = require('./request')
const response = require('./response')

module.exports = class Coa {
  constructor() {
    this.context = context
    this.request = request
    this.response = response
  }
  createContext(req, res) {
    const ctx = Object.create(this.context)
    // 將擴展的 request、response 掛載到 ctx 上
    // 使用 Object.create 創建以傳入參數為原型的對象，避免添加屬性時因為衝突影響到原對象
    const request = ctx.request = Object.create(this.request)
    const response = ctx.response = Object.create(this.response)
    
    ctx.app = request.app = response.app = this;
    // 掛載原生屬性
    ctx.req = request.req = response.req = req
    ctx.res = request.res = response.res = res
    
    request.ctx = response.ctx = ctx;
    request.response = response;
    response.request = request;
    
    return ctx
  }
}

上面一堆花里胡哨的賦值，是為了能通過多種途徑獲取屬性。比如獲取 query 屬性，可以有 ctx.query、ctx.request.query、ctx.app.query 等等的方式。

如果你覺得看起來有點冗餘，也可以主要理解這幾行，因為我們實現源碼時也就用到下麵這些：

const request = ctx.request = Object.create(this.request)
const response = ctx.response = Object.create(this.response)

ctx.req = request.req = response.req = req
ctx.res = request.res = response.res = res

request

request.js：

const url = require('url')

module.exports = {
 /* 查看這兩步操作
  * const request = ctx.request = Object.create(this.request)
  * ctx.req = request.req = response.req = req 
  * 
  * 此時的 this 是指向 ctx，所以這裡的 this.req 訪問的是原生屬性 req
  * 同樣，也可以通過 this.request.req 來訪問
  */
  get query() {
    return url.parse(this.req.url).query
  },
  get path() {
    return url.parse(this.req.url).pathname
  },
  get method() {
    return this.req.method.toLowerCase()
  }
}

response

response.js：

module.exports = {
  // 這裡的 this.res 也和上面同理 
  get status() {
    return this.res.statusCode
  },
  set status(val) {
    return this.res.statusCode = val
  },
  get body() {
    return this._body
  },
  set body(val) {
    return this._body = val
  }
}

屬性代理

通過上面的實現，我們可以使用 ctx.request.query 來訪問到擴展的屬性。但是在實際應用中，更常用的是 ctx.query。不過 query 是在 request 的屬性，通過 ctx.query 是無法訪問的。

這時只需稍微做個代理，在訪問 ctx.query 時，將 ctx.request.query 返回就可以實現上面的效果。

context.js:

module.exports = {
    get query() {
        return this.request.query
    }
}

實際的代碼中會有很多擴展的屬性，總不可能一個一個去寫吧。為了優雅的代理屬性，Koa 使用 delegates 包實現。這裡我不打算用 delegates，直接簡單封裝下代理函數。代理函數主要用到__defineGetter__ 和 __defineSetter__ 兩個方法。

在對象上都會帶有 __defineGetter__ 和 __defineSetter__，它們可以將一個函數綁定在當前對象的指定屬性上，當屬性被獲取或賦值時，綁定的函數就會被調用。就像這樣：

let obj = {}
let obj1 = {
    name: 'JoJo'
}
obj.__defineGetter__('name', function(){
    return obj1.name
})

此時訪問 obj.name，獲取到的是 obj1.name 的值。

瞭解這個兩個方法的用處後，接下來開始修改 context.js：

const proto = module.exports = {
}

// getter代理
function delegateGetter(prop, name){
  proto.__defineGetter__(name, function(){
    return this[prop][name]
  })
}
// setter代理
function delegateSetter(prop, name){
  proto.__defineSetter__(name, function(val){
    return this[prop][name] = val
  })
}
// 方法代理
function delegateMethod(prop, name){
  proto[name] = function() {
    return this[prop][name].apply(this[prop], arguments)
  }
}

delegateGetter('request', 'query')
delegateGetter('request', 'path')
delegateGetter('request', 'method')

delegateGetter('response', 'status')
delegateSetter('response', 'status')
delegateMethod('response', 'set')

中間件原理

中間件思想是 Koa 最精髓的地方，為擴展功能提供很大的幫助。這也是它雖然小，卻很強大的原因。還有一個優點，中間件使功能模塊的職責更加分明，一個功能就是一個中間件，多個中間件組合起來成為一個完整的應用。

下麵是著名的“洋蔥模型”。這幅圖很形象的表達了中間件思想的作用，它就像一個流水線一樣，上游加工後的東西傳遞給下游，下游可以繼續接著加工，最終輸出加工結果。

原理分析

在調用 use 註冊中間件的時候，內部會將每個中間件存儲到數組中，執行中間件時，為其提供 next 參數。調用 next 即執行下一個中間件，以此類推。當數組中的中間件執行完畢後，再原路返回。就像這樣:

app.use((ctx, next) => {
  console.log('1 start')
  next()
  console.log('1 end')
})

app.use((ctx, next) => {
  console.log('2 start')
  next()
  console.log('2 end')
})

app.use((ctx, next) => {
  console.log('3 start')
  next()
  console.log('3 end')
})

輸出結果如下：

1 start
2 start
3 start
3 end
2 end
1 end

有點數據結構知識的同學，很快就想到這是一個“棧”結構，執行的順序符合“先入後出”。

下麵我將內部中間件實現原理進行簡化，模擬中間件執行：

function next1() {
  console.log('1 start')
  next2()
  console.log('1 end')
}
function next2() {
  console.log('2 start')
  next3()
  console.log('2 end')
}
function next3() {
  console.log('3 start')
  console.log('3 end')
}
next1()

執行過程：

  1. 調用 next1，將其入棧執行，輸出
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【iOS】解決UICollectionView中使用reloadItemsAtIndexPaths進行局部cell更新導致視圖重疊問題
    UICollectionView與UITableView類似，都可以使用reloadData來進行cell內容的更新。 UICollectionView可以採用reloadItemsAtIndexPaths方法。 self.collectionView.reloadItems(at: [indexP ...
  • ArrayAdapter的簡單使用
    我們在使用ListView的時候，自字義Adapter固然好用，靈活，但對於我們只是想簡單的顯示幾行數據，沒必要搞那麼大動靜。ArrayAdapter幫助我們顯示一個數組到列表中，數組可以按我們的需要進行增改，實現起來也簡單易用。 ...
  • Web前端基礎——JavaScript（二）
    之前的博客：Web前端基礎——JavaScript（一） 本文主要利用一個案例，練習JavaScript中document對象： css.css @charset "UTF-8"; body{ width:800px; margin-left:auto; margin-right:auto; } b ...
  • 【面經】記一次位元組跳動前端面試經歷
    對於實習招聘（甚至校招）來說，項目經歷可能是獲得面試的敲門磚，但是基礎絕對是贏得面試的通天索。 (互聯網偵察註：校招就是考基礎和潛力，基礎扎實潛力不錯的一般都會收) 即使是實習招聘，白板寫代碼也很可能逐漸成為主流面試的標配，平時要有意識地鍛煉這方面能力，要不然面試時沒有IDE真的是做不下去。 (互聯 ...
  • HTML基礎教程_1
    一、前言、web標準 1. 瀏覽器內核 瀏覽器 內核 備註 IE Trident IE、獵豹瀏覽器、３６０瀏覽器、百度瀏覽器 Firefox Gecko 可惜這幾年已經沒落了，打開速度慢，升級平凡、豬一樣的隊友Ｆｌａｓｈ Safari ｗｅｂｋｉｔ 現在很多人錯誤把ｗｅｂｋｉｔ叫做Chrome內核（ ...
  • HTML基礎02
    表單form 作用:用於獲取用戶輸入的信息,並且將信息提交到伺服器 學習表單就是學習表單中有哪些控制項.比如:文本域(textarea)、下拉列表、單選框(radio-buttons)、覆選框(vheckboxes)等等。 表單通常使用表單標簽<from>來設置: <form> <input /> < ...
  • Nodejs中ES Modules如何操作運用？本文詳解
    2020-05-26 Nodejs v12.17.0 LTS 版發佈，去掉 --experimental-modules 標誌。 1、雖然已在最新的 LTS v12.17.0 中支持，但是目前仍處於 Stability: 1 - Experimental 實驗階段，如果是在生產環境使用該功能，還應保 ...
  • Vue學習總結之Vue的生命周期是怎麼運用操作的？本文詳解
    寫在前面 1.每一篇文章都希望您有所收穫，每一篇文章都希望您能靜下心來瀏覽、閱讀。每一篇文章都是作者精心打磨的作品。 2.如果您覺得二郎神楊戩有點東西的話，作者希望你可以幫我點亮那個點贊的按鈕，對於二郎神楊戩這個暖男來說，真的真的非常重要，這將是我持續寫作的動力。您只需要小手輕輕一點，帶來的卻是溫暖 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類