Express 與 koa 中間件模式對比

原由

最近在學習koa的使用， 因爲koa是至關基礎的web框架，因此一個完整的web應用所須要的東西大都以中間件的形式引入，好比koa-router, koa-view等。在koa的文檔裏有提到：koa的中間件模式與express的是不同的，koa是洋蔥型，express是直線型，至於爲何這樣，網上不少文章並無具體分析。或者簡單的說是async/await的特性之類。先不說這種說法的對錯，對於我來講這種說法仍是太模糊了。因此我決定經過源碼來分析兩者中間件實現的原理以及用法的異同。

爲了簡單起見這裏的express用connect代替（實現原理是一致的）

用法

兩者都以官網（github）文檔爲準

connect

下面是官網的用法：

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);複製代碼

根據文檔咱們能夠看到，connect是提供簡單的路由功能的：

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的中間件是線性的，next事後繼續尋找下一個中間件，這種模式直覺上也很好理解，中間件就是一系列數組，經過路由匹配來尋找相應路由的處理方法也就是中間件。事實上connect也是這麼實現的。

app.use就是往中間件數組中塞入新的中間件。中間件的執行則依靠私有方法app.handle進行處理，express也是相同的道理。

koa

相對connect，koa的中間件模式就不那麼直觀了，借用網上的圖表示：

koa

也就是koa處理完中間件後還會回來走一趟，這就給了咱們更加大的操做空間，來看看koa的官網實例：

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);複製代碼

很明顯，當koa處理中間件遇到await next()的時候會暫停當前中間件進而處理下一個中間件，最後再回過頭來繼續處理剩下的任務，雖說起來很複雜，可是直覺上咱們會有一種隱隱熟悉的感受：不就是回調函數嗎。這裏暫且不說具體實現方法，可是確實就是回調函數。跟async/await的特性並沒有任何關係。

源碼簡析

connect與koa中間件模式區別的核心就在於next的實現，讓咱們簡單看下兩者next的實現。

connect

connect的源碼至關少加上註釋也就200來行，看起來也很清楚，connect中間件處理在於proto.handle這個私有方法，一樣next也是在這裏實現的

// 中間件索引
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實現也很簡潔。一個遞歸調用順序尋找中間件。不斷的調用next。代碼至關簡單可是思路卻很值得學習。
其中done是第三方處理方法。其餘處理sub app以及路由的部分都刪除了。不是重點

koa

koa將next的實現抽離成了一個單獨的包，代碼更加簡單，可是實現了一個貌似更加複雜的功能

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)
      }
    }
  }
}複製代碼

看着上面處理過的的代碼 有些同窗可能仍是會不明覺厲。

那麼咱們繼續處理一下：

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)
      })
    }
  }
}複製代碼

這樣一來 程序更加簡單了 跟async/await也沒有任何關係了，讓咱們看下結果好了

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)()複製代碼

執行上面的程序咱們能夠發現依次輸出：

foo1
bar1
qux1
qux2
bar2
foo2複製代碼

一樣是所謂koa的洋蔥模型，到這裏咱們就能夠得出這樣一個結論：koa的中間件模型跟async或者generator並無實際聯繫，只是koa強調async優先。所謂中間件暫停也只是回調函數的緣由。

若有錯誤，但願不吝指出。

over。