一個學習 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 上,並且設置了 gettersetter ,從而簡化操作

// 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
更多相關文章
  • 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 ...
  • 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前端開發入門門檻低體現在HTML和CSS上,前者只是結構標簽,後者是樣式配置,入門是非常 ...
  • vue.config.js完整代碼如下: 'use strict'; // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require( ...
  • 有些情況下,希望點擊a鏈接不跳轉,可將href屬性設置為“javascript:;”,一般就可以了。 但下麵這種寫法: 仍然可點擊,會打開一個空白頁新鏈接,最後試了下,是因為target屬性導致的,將 去掉就可以了。 ...
  • 使用編輯器:Typora 下載官網:https://www.typora.io/ 學習教程:https://www.markdown.xyz/ 1、代碼塊 (1)源代碼模式 (2)菜單欄設置 菜單欄——【段落】—— 【代碼塊】 可自行選擇代碼語言 (3)快捷方式 英文輸入法狀態下,點擊三次 鍵盤數字 ...
  • 單頁面應用 概念 什麼是單頁應用呢?單頁應用的全稱是 single-page application,簡稱 SPA,它是一種網站應用的模型,它可以動態重寫當前的頁面來與用戶交互,而不需要重新載入整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對於傳統的 Web 應用, ...
  • 解決方法: $('#sub').unbind('click').click(function () { ... }); 每次綁定前先取消上次的綁定。 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...