一個學習 Koa 源碼的例子

来源:https://www.cnblogs.com/o2team/archive/2020/05/20/12921976.html
-Advertisement-
Play Games

作者： MarkLin 學習目標： 1. 原生 node 封裝 2. 中間件 3. 路由 Koa 原理 一個 nodejs 的入門級 http 服務代碼如下， koa 的目標是更簡單化、流程化、模塊化的方式實現回調，我們希望可以參照 koa 用如下方式來實現代碼： 所以我們需要創建一個 文件，該文件 ...


作者： MarkLin

學習目標：

  1. 原生 node 封裝
  2. 中間件
  3. 路由

Koa 原理

一個 nodejs 的入門級 http 服務代碼如下，

// index.js
const http = require('http')
const server = http.createServer((req, res) => {
  res.writeHead(200)
  res.end('hello nodejs')
})

server.listen(3000, () => {
  console.log('server started at port 3000')
})

koa 的目標是更簡單化、流程化、模塊化的方式實現回調，我們希望可以參照 koa 用如下方式來實現代碼：

// index.js
const Moa = require('./moa')
const app = new Moa()

app.use((req, res) => {
  res.writeHeader(200)
  res.end('hello, Moa')
})

app.listen(3000, () => {
  console.log('server started at port 3000')
})

所以我們需要創建一個 moa.js 文件，該文件主要內容是創建一個類 Moa， 主要包含 use() 和 listen() 兩個方法

// 創建 moa.js
const http = require('http')

class Moa {

  use(callback) {
    this.callback = callback
  }

  listen(...args) {
    const server = http.createServer((req, res) => {
      this.callback(req, res)
    })

    server.listen(...args)
  }
}

module.exports = Moa

Context

koa 為了能夠簡化 API，引入了上下文 context 的概念，將原始的請求對象 req 和響應對象 res 封裝並掛載到了 context 上，並且設置了 getter 和 setter ，從而簡化操作

// index.js
// ...

// app.use((req, res) => {
//   res.writeHeader(200)
//   res.end('hello, Moa')
// })

app.use(ctx => {
  ctx.body = 'cool moa'
})

// ...

為了達到上面代碼的效果，我們需要分裝 3 個類，分別是 context, request, response , 同時分別創建上述 3 個 js 文件，

// request.js
module.exports = {
  get url() {
    return this.req.url
  }
  get method() {
    return this.req.method.toLowerCase()
  }
}

// response.js
module.exports = {
  get body() {
    return this._body
  }

  set body(val) = {
    this._body = val
  }
}

// context.js
module.exports = {
  get url() {
    return this.request.url
  }
  get body() = {
    return this.response.body
  }
  set body(val) {
    this.response.body = val
  }
  get method() {
    return this.request.method
  }
}

接著我們需要給 Moa 這個類添加一個 createContext(req, res) 的方法, 併在 listen() 方法中適當的地方掛載上：

// moa.js
const http = require('http')

const context = require('./context')
const request = require('./request')
const response = require('./response')

class Moa {
  // ...
  listen(...args) {
    const server = http.createServer((req, res) => {
      // 創建上下文
      const ctx = this.createContext(req, res)

      this.callback(ctx)

      // 響應
      res.end(ctx.body)
    })
    server.listen(...args)
  }

  createContext(req, res) {
    const ctx = Object.create(context)
    ctx.request = Object.create(request)
    ctx.response = Object.create(response)

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

中間件

Koa 中間鍵機制：Koa 中間件機制就是函數組合的概念，將一組需要順序執行的函數複合為一個函數，外層函數的參數實際是內層函數的返回值。洋蔥圈模型可以形象表示這種機制，是 Koa 源碼中的精髓和難點。

洋蔥圈模型

同步函數組合

假設有 3 個同步函數:

// compose_test.js
function fn1() {
  console.log('fn1')
  console.log('fn1 end')
}

function fn2() {
  console.log('fn2')
  console.log('fn2 end')
}

function fn3() {
  console.log('fn3')
  console.log('fn3 end')
}

我們如果想把三個函數組合成一個函數且按照順序來執行，那通常的做法是這樣的：

// compose_test.js
// ...
fn3(fn2(fn1()))

執行 node compose_test.js 輸出結果：

fn1
fn1 end
fn2
fn2 end
fn3
fn3 end

當然這不能叫做是函數組合，我們期望的應該是需要一個 compose() 方法來幫我們進行函數組合，按如下形式來編寫代碼：

// compose_test.js
// ...
const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

讓我們來實現一下 compose() 函數，

// compose_test.js
// ...
const compose = (middlewares) => () => {
  [first, ...others] = middlewares
  let ret = first()
  others.forEach(fn => {
    ret = fn(ret)
  })
  return ret
}

const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

可以看到我們最終得到了期望的輸出結果：

fn1
fn1 end
fn2
fn2 end
fn3
fn3 end

非同步函數組合

瞭解了同步的函數組合後，我們在中間件中的實際場景其實都是非同步的，所以我們接著來研究下非同步函數組合是如何進行的，首先我們改造一下剛纔的同步函數，使他們變成非同步函數,

// compose_test.js
async function fn1(next) {
  console.log('fn1')
  next && await next()
  console.log('fn1 end')
}

async function fn2(next) {
  console.log('fn2')
  next && await next()
  console.log('fn2 end')
}

async function fn3(next) {
  console.log('fn3')
  next && await next()
  console.log('fn3 end')
}
//...

現在我們期望的輸出結果是這樣的:

fn1
fn2
fn3
fn3 end
fn2 end
fn1 end

同時我們希望編寫代碼的方式也不要改變,

// compose_test.js
// ...
const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

所以我們只需要改造一下 compose() 函數，使他支持非同步函數就即可:

// compose_test.js
// ...

function compose(middlewares) {
  return function () {
    return dispatch(0)
    function dispatch(i) {
      let fn = middlewares[i]
      if (!fn) {
        return Promise.resolve()
      }
      return Promise.resolve(
        fn(function next() {
          return dispatch(i + 1)
        })
      )
    }
  }
}

const middlewares = [fn1, fn2, fn3]
const finalFn = compose(middlewares)
finalFn()

運行結果：

fn1
fn2
fn3
fn3 end
fn2 end
fn1 end

完美！！！

完善 Moa

我們直接把剛纔的非同步合成代碼移植到 moa.js 中, 由於 koa 中還需要用到 ctx 欄位，所以我們還要對 compose() 方法進行一些改造才能使用：

// moa.js
// ...
class Moa {
  // ...
  compose(middlewares) {
    return function (ctx) {
      return dispatch(0)
      function dispatch(i) {
        let fn = middlewares[i]
        if (!fn) {
          return Promise.resolve()
        }
        return Promise.resolve(
          fn(ctx, function () {
            return dispatch(i + 1)
          })
        )
      }
    }
  }
}

實現完 compose() 方法之後我們繼續完善我們的代碼，首先我們需要給類在構造的時候，添加一個 middlewares，用來記錄所有需要進行組合的函數，接著在use() 方法中把我們每一次調用的回調都記錄一下，保存到middlewares 中，最後再在合適的地方調用即可：

// moa.js
// ...
class Moa {
  constructor() {
    this.middlewares = []
  }

  use(middleware) {
    this.middlewares.push(middleware)
  }

  listen(...args) {
    const server = http.createServer(async (req, res) => {
      // 創建上下文
      const ctx = this.createContext(req, res)
      const fn = this.compose(this.middlewares)
      await fn(ctx)
      // 響應
      res.end(ctx.body)
    })

    server.listen(...args)
  }
  // ...
}

我們加一小段代碼測試一下:

// index.js
//...
const delay = () => new Promise(resolve => setTimeout(() => resolve()
  , 2000))
app.use(async (ctx, next) => {
  ctx.body = "1"
  await next()
  ctx.body += "5"
})
app.use(async (ctx, next) => {
  ctx.body += "2"
  await delay()
  await next()
  ctx.body += "4"
})
app.use(async (ctx, next) => {
  ctx.body += "3"
})

運行命令 node index.js 啟動伺服器後，我們訪問頁面 localhost:3000 查看一下，發現頁面顯示 12345 ！

到此，我們簡版的 Koa 就已經完成實現了。讓我們慶祝一下先！！！

Router

Koa 還有一個很重要的路由功能，感覺缺少路由就缺少了他的完整性，所以我們簡單介紹下如何實現路由功能。

其實，路由的原理就是根據地址和方法，調用相對應的函數即可，其核心就是要利用一張表，記錄下註冊的路由和方法，原理圖如下所示：

路由原理

使用方式如下：

// index.js
// ...
const Router = require('./router')
const router = new Router()

router.get('/', async ctx => { ctx.body = 'index page' })
router.get('/home', async ctx => { ctx.body = 'home page' })
router.post('/', async ctx => { ctx.body = 'post index' })
app.use(router.routes())

// ...

我們來實現下 router 這個類，先在根目錄創建一個 router.js 文件，然後根據路由的原理，我們實現下代碼:

// router.js
class Router {
  constructor() {
    this.stacks = []
  }

  register(path, method, middleware) {
    this.stacks.push({
      path, method, middleware
    })
  }

  get(path, middleware) {
    this.register(path, 'get', middleware)
  }

  post(path, middleware) {
    this.register(path, 'post', middleware)
  }

  routes() {
    return async (ctx, next) => {
      let url = ctx.url === '/index' ? '/' : ctx.url
      let method = ctx.method
      let route
      for (let i = 0; i < this.stacks.length; i++) {
        let item = this.stacks[i]
        if (item.path === url && item.method === method) {
          route = item.middleware
          break
        }
      }

      if (typeof route === 'function') {
        await route(ctx, next)
        return
      }

      await next()
    }
  }
}

module.exports = Router

啟動伺服器後，測試下 loacalhost:3000, 返回頁面上 index page 表示路由實現成功！

本文源碼地址： https://github.com/marklin2012/moa/

歡迎關註凹凸實驗室博客：aotu.io

或者關註凹凸實驗室公眾號（AOTULabs），不定時推送文章：

歡迎關註凹凸實驗室公眾號


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【2020Python修煉記】前端開發之 jQuery實戰— jQuery簡易版網頁
    1、完整代碼 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" c ...
  • js 實現簡易時鐘效果
    1 <!-- 參考教程：https://www.cnblogs.com/carekee/articles/1678041.html --> 2 <div id="time"></div> 3 <script> 4 time(); 5 setInterval(time,1000) 6 function ...
  • Web前端開發小白的學習建議和路線圖
    對於新手小白來說學習Web前端開發，可能不知道從哪開始，總感覺無從下手，下麵給Web開發者整理了一份學習建議及路線圖，想要學習前端開發的東西可以借鑒學習一下。 其實想要學習Web前端開發的門檻還是挺低的， Web前端開發入門門檻低體現在HTML和CSS上，前者只是結構標簽，後者是樣式配置，入門是非常 ...
  • vue.config.js配置優化
    vue.config.js完整代碼如下： 'use strict'; // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require( ...
  • html中點擊a鏈接不跳轉
    有些情況下，希望點擊a鏈接不跳轉，可將href屬性設置為“javascript:;”，一般就可以了。 但下麵這種寫法： 仍然可點擊，會打開一個空白頁新鏈接，最後試了下，是因為target屬性導致的，將 去掉就可以了。 ...
  • 【教程乾貨】markdown 語法小技巧
    使用編輯器：Typora 下載官網：https://www.typora.io/ 學習教程：https://www.markdown.xyz/ 1、代碼塊 （1）源代碼模式 （2）菜單欄設置 菜單欄——【段落】—— 【代碼塊】 可自行選擇代碼語言 （3）快捷方式 英文輸入法狀態下，點擊三次 鍵盤數字 ...
  • 【前端】--單頁面應用
    單頁面應用 概念 什麼是單頁應用呢？單頁應用的全稱是 single-page application，簡稱 SPA，它是一種網站應用的模型，它可以動態重寫當前的頁面來與用戶交互，而不需要重新載入整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對於傳統的 Web 應用， ...
  • 解決JQuery中click裡面包含click事件，出現重覆執行的問題
    解決方法： $('#sub').unbind('click').click(function () { ... }); 每次綁定前先取消上次的綁定。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類