作者： MarkLin
學習目標：
- 原生 node 封裝
- 中間件
- 路由
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），不定時推送文章：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/85287.html
標籤：JavaScript