詳解express與koa中間件模式對(duì)比
起因
最近在學(xué)習(xí)koa的使用, 由于koa是相當(dāng)基礎(chǔ)的web框架,所以一個(gè)完整的web應(yīng)用所需要的東西大都以中間件的形式引入,比如koa-router, koa-view等。在koa的文檔里有提到:koa的中間件模式與express的是不一樣的,koa是洋蔥型,express是直線(xiàn)型,至于為什么這樣,網(wǎng)上很多文章并沒(méi)有具體分析。或者簡(jiǎn)單的說(shuō)是async/await的特性之類(lèi)。先不說(shuō)這種說(shuō)法的對(duì)錯(cuò),對(duì)于我來(lái)說(shuō)這種說(shuō)法還是太模糊了。所以我決定通過(guò)源碼來(lái)分析二者中間件實(shí)現(xiàn)的原理以及用法的異同。
為了簡(jiǎn)單起見(jiàn)這里的express用connect代替(實(shí)現(xiàn)原理是一致的)
用法
二者都以官網(wǎng)(github)文檔為準(zhǔn)
connect
下面是官網(wǎng)的用法:
var connect = require('connect');
var http = require('http');
var app = connect();
// gzip/deflate outgoing responses
var compression = require('compression');
app.use(compression());
// store session state in browser cookie
var cookieSession = require('cookie-session');
app.use(cookieSession({
keys: ['secret1', 'secret2']
}));
// parse urlencoded request bodies into req.body
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));
// respond to all requests
app.use(function(req, res){
res.end('Hello from Connect!\n');
});
//create node.js http server and listen on port
http.createServer(app).listen(3000);
根據(jù)文檔我們可以看到,connect是提供簡(jiǎn)單的路由功能的:
app.use('/foo', function fooMiddleware(req, res, next) {
// req.url starts with "/foo"
next();
});
app.use('/bar', function barMiddleware(req, res, next) {
// req.url starts with "/bar"
next();
});
connect的中間件是線(xiàn)性的,next過(guò)后繼續(xù)尋找下一個(gè)中間件,這種模式直覺(jué)上也很好理解,中間件就是一系列數(shù)組,通過(guò)路由匹配來(lái)尋找相應(yīng)路由的處理方法也就是中間件。事實(shí)上connect也是這么實(shí)現(xiàn)的。
app.use 就是往中間件數(shù)組中塞入新的中間件。中間件的執(zhí)行則依靠私有方法 app.handle 進(jìn)行處理,express也是相同的道理。
koa
相對(duì)connect,koa的中間件模式就不那么直觀(guān)了,借用網(wǎng)上的圖表示:

也就是koa處理完中間件后還會(huì)回來(lái)走一趟,這就給了我們更加大的操作空間,來(lái)看看koa的官網(wǎng)實(shí)例:
const Koa = require('koa');
const app = new Koa();
// x-response-time
app.use(async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
ctx.set('X-Response-Time', `${ms}ms`);
});
// logger
app.use(async (ctx, next) => {
const start = Date.now();
await next();
const ms = Date.now() - start;
console.log(`${ctx.method} ${ctx.url} - ${ms}`);
});
// response
app.use(async ctx => {
ctx.body = 'Hello World';
});
app.listen(3000);
很明顯,當(dāng)koa處理中間件遇到await next()的時(shí)候會(huì)暫停當(dāng)前中間件進(jìn)而處理下一個(gè)中間件,最后再回過(guò)頭來(lái)繼續(xù)處理剩下的任務(wù),雖然說(shuō)起來(lái)很復(fù)雜,但是直覺(jué)上我們會(huì)有一種隱隱熟悉的感覺(jué):不就是回調(diào)函數(shù)嗎。這里暫且不說(shuō)具體實(shí)現(xiàn)方法,但是確實(shí)就是回調(diào)函數(shù)。跟async/await的特性并無(wú)任何關(guān)系。
源碼簡(jiǎn)析
connect與koa中間件模式區(qū)別的核心就在于next的實(shí)現(xiàn),讓我們簡(jiǎn)單看下二者next的實(shí)現(xiàn)。
connect
connect的源碼相當(dāng)少加上注釋也就200來(lái)行,看起來(lái)也很清楚,connect中間件處理在于proto.handle這個(gè)私有方法,同樣next也是在這里實(shí)現(xiàn)的
// 中間件索引
var index = 0
function next(err) {
// 遞增
var layer = stack[index++];
// 交由其他部分處理
if (!layer) {
defer(done, err);
return;
}
// route data
var path = parseUrl(req).pathname || '/';
var route = layer.route;
// 遞歸
// skip this layer if the route doesn't match
if (path.toLowerCase().substr(0, route.length) !== route.toLowerCase()) {
return next(err);
}
// call the layer handle
call(layer.handle, route, err, req, res, next);
}
刪掉混淆的代碼后 我們可以看到next實(shí)現(xiàn)也很簡(jiǎn)潔。一個(gè)遞歸調(diào)用順序?qū)ふ抑虚g件。不斷的調(diào)用next。代碼相當(dāng)簡(jiǎn)單但是思路卻很值得學(xué)習(xí)。
其中 done 是第三方處理方法。其他處理sub app以及路由的部分都刪除了。不是重點(diǎn)
koa
koa將next的實(shí)現(xiàn)抽離成了一個(gè)單獨(dú)的包,代碼更加簡(jiǎn)單,但是實(shí)現(xiàn)了一個(gè)貌似更加復(fù)雜的功能
function compose (middleware) {
return function (context, next) {
// last called middleware #
let index = -1
return dispatch(0)
function dispatch (i) {
index = i
try {
return Promise.resolve(fn(context, function next () {
return dispatch(i + 1)
}))
} catch (err) {
return Promise.reject(err)
}
}
}
}
看著上面處理過(guò)的的代碼 有些同學(xué)可能還是會(huì)不明覺(jué)厲。
那么我們繼續(xù)處理一下:
function compose (middleware) {
return function (context, next) {
// last called middleware #
let index = -1
return dispatch(0)
function dispatch (i) {
index = i
let fn = middleware[i]
if (i === middleware.length) {
fn = next
}
if (!fn) return
return fn(context, function next () {
return dispatch(i + 1)
})
}
}
}
這樣一來(lái) 程序更加簡(jiǎn)單了 跟async/await也沒(méi)有任何關(guān)系了,讓我們看下結(jié)果好了
var ms = [
function foo (ctx, next) {
console.log('foo1')
next()
console.log('foo2')
},
function bar (ctx, next) {
console.log('bar1')
next()
console.log('bar2')
},
function qux (ctx, next) {
console.log('qux1')
next()
console.log('qux2')
}
]
compose(ms)()
執(zhí)行上面的程序我們可以發(fā)現(xiàn)依次輸出:
foo1
bar1
qux1
qux2
bar2
foo2
同樣是所謂koa的洋蔥模型,到這里我們就可以得出這樣一個(gè)結(jié)論:koa的中間件模型跟async或者generator并沒(méi)有實(shí)際聯(lián)系,只是koa強(qiáng)調(diào)async優(yōu)先。所謂中間件暫停也只是回調(diào)函數(shù)的原因(在我看來(lái)promise.then與回調(diào)其實(shí)沒(méi)有什么區(qū)別,甚至async/await也是回調(diào)的一種形式)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
node.js中的fs.fchown方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.fchown方法使用說(shuō)明,本文介紹了fs.fchown方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
使用socket.io實(shí)現(xiàn)簡(jiǎn)單聊天室案例
這篇文章主要介紹了使用socket.io實(shí)現(xiàn)簡(jiǎn)單聊天室案例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01
Node.js中fs模塊實(shí)現(xiàn)配置文件的讀寫(xiě)操作
在Node.js中, fs模塊提供了對(duì)文件系統(tǒng)的訪(fǎng)問(wèn)功能,我們可以利用它來(lái)實(shí)現(xiàn)配置文件的讀取和寫(xiě)入操作,這篇文章主要介紹了Node.js中fs模塊實(shí)現(xiàn)配置文件的讀寫(xiě),需要的朋友可以參考下2024-04-04
Node.js中module.exports?和exports使用誤區(qū)
本文主要介紹了Node.js中module.exports?和exports使用誤區(qū),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
NodeJS創(chuàng)建基礎(chǔ)應(yīng)用并應(yīng)用模板引擎
這篇文章主要介紹了NodeJS創(chuàng)建基礎(chǔ)應(yīng)用并應(yīng)用模板引擎的相關(guān)資料,需要的朋友可以參考下2016-04-04

