中间件源码实现过程分析对比

概述

作为一枚前端开发，经常会接触到中间件，今天咱们就来分析分析，中间件是怎么转起来的。

我们经常接触的中间件其实主要就是express、koa和redux，前面两个是服务端的中间件。

要实现一套middleware,分为三步：

  1. 搜集middleware
  2. 组合middleware
  3. 调用执行

中间件使用对比

直接上代码：

express:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var express = require('express');
var app = express();
app.listen(3000, function() {
    console.log('请打开: http://127.0.0.1:3000');
});

app.use(function(req, res, next){
    console.log('before1');
    next();
    console.log('after1');
})

app.use(function(req, res, next){
  console.log('before2');
  next();
  console.log('after2');
})

app.use(function(req, res, next){
  console.log('before3');
  res.end('hello express');
  console.log('after3');
})

koa:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var Koa = require('koa');
var app = new Koa();
app.listen(3000, function() {
  console.log('请打开: http://127.0.0.1:3000');
});

app.use(async function(ctx, next) {
  console.log('before1');
  await next();
  console.log('after1');
})
app.use(async function(ctx, next) {
  console.log('before2');
  next();
  console.log('after2');
})
app.use(function(ctx, next) {
  console.log('before3');
  ctx.body = 'hello koa';
  console.log('after3');
})

redux:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var redux = require('redux')
var { createStore, applyMiddleware } = redux;

const middleware1 = store => next => action => {
  console.log('before1');
  next(action);
  console.log('after1');
}

const middleware2 = store => next => action => {
  console.log('before2');
  next(action);
  console.log('after2');
}

function reducer(state, action) {
    if(action.type === '1' || action.type === '2') {
        return {
            ...state,
            name: state.name + action.payload
        };
    }
    return state;
}

// store = applyMiddleware(middleware1, middleware2)(createStore)(reducer, {name: 'xu'})

// 另一种用法, 因为createStore内部有enhancer判断，applyMiddleware 返回的就是一个enhancer

const enhancer = applyMiddleware(middleware1, middleware2);
store = createStore(reducer, { name: 'xu' }, enhancer);
// 等价于上一条语句，可读性更好, 这就是函数柯里化的好处

store.dispatch({
    type: '1',
    payload: '-1'
});

console.log(store.getState());

store.dispatch({
    type: '2',
    payload: '-2'
})
console.log(store.getState());

中间件源码实现对比

express

1、收集middleware

express全局维护一个stack数组用来存储所有中间件，app.use进行收集。

1
2
3
4
5
6
// application.js
app.stack = [];
// app.use
app.use = function(fn) {
    this.stack.push(fn);
}

2、组合middleware

express通过app.handle 即对 stack 数组进行处理，next 方法不断的取出stack中的“中间件”函数进行调用，同时把next 本身传递给“中间件”作为第三个参数，形成尾递归调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// application.js
app.handle = function(req, res, callback) {
    var stack = this.stack;
    var idx = 0;
    function next(err) {
        if (idx >= stack.length) {
            callback('err');
            return;
        }
        var mid;
        while(idx < stack.length) {
            mid = stack[idx++];
            mid(req, res, next);
        }
    }
    next();
}

3、调用执行

整个 web server的入口处理程序是 express.js 文件中的 app，引入的express方法就是createApplication，用于创建 express 实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// express.js

var proto = require('./application');
var mixin = require('merge-descriptors');

exports = module.exports = createApplication;

function createApplication() {
    var app = function(req, res, next) {
        app.handle(req, res, next);
    }

    mixin(app, proto, false);
    return app;
}

返回值 app 既是实例对象，上面挂载了很多方法，同时也是一个方法，作为 http.createServer的回调处理函数

1
2
3
4
5
6
7
8
// application.js
var http = require('http');
var app = exports = module.exports = {}

app.listen = function listen() {
  var server = http.createServer(this)
  return server.listen.apply(server, arguments)
}

这里 app.listen 调用 nodejs 的http.createServer 创建web服务，可以看到这里 var server = http.createServer(this) 其中 this 即 app 本身, 然后真正的处理程序即 app.handle;

整个express实现就到此揭开面纱了。

koa

1、收集middleware

koa也是通过use进行收集。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// application.js
module.exports = class Application extends Emitter {
    constructor() {
        super()
        this.middleware = []
        this.context = Object.create(context)
    }

    use(fn) {
        if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
        if (isGeneratorFunction(fn)) {
            deprecate('Support for generators will be removed in v3. ' +
                    'See the documentation for examples of how to convert old middleware ' +
                    'https://github.com/koajs/koa/blob/master/docs/migration.md');
            fn = convert(fn);
        }
        debug('use %s', fn._name || fn.name || '-');
        this.middleware.push(fn);
        return this;
    }
}

不难看出，构造函数 constructor 中维护全局中间件数组 this.middleware和全局的this.context 实例; use就做了一件事：把fn push到Koa的middleware数组中。

2、组合middleware

中间件如何建立起了洋葱模型，其实就是依靠compose，Koa的compose来自于koa-compose项目，源码也比较简单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function compose (middleware) {
    if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
    for (const fn of middleware) {
        if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
    }

    /**
    * @param {Object} context
    * @return {Promise}
    * @api public
    */

    return function (context, next) {
        // last called middleware #
        let index = -1
        return dispatch(0)
        function dispatch (i) {
            if (i <= index) return Promise.reject(new Error('next() called multiple times'))
            index = i
            let fn = middleware[i]
            if (i === middleware.length) fn = next
            if (!fn) return Promise.resolve()
            try {
                return Promise.resolve(fn(context, function next () {
                    return dispatch(i + 1)
                }))
            } catch (err) {
                return Promise.reject(err)
            }
        }
    }
}

3、调用执行

首先我们只要知道下面这段callback函数就是请求到来的时候执行的回调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// application.js
module.exports = class Application extends Emitter {
    /**
     * Return a request handler callback
     * for node's native http server.
     *
     * @return {Function}
     * @api public
     */
    callback() {
        // 这里即中间件处理代码
        const fn = compose(this.middleware);

        if (!this.listeners('error').length) this.on('error', this.onerror);

        const handleRequest = (req, res) => {
            // res.statusCode = 404; ctx 是koa的精髓之一, req, res上的很多方法代理到了ctx上, 基于 ctx 很多问题处理更加方便
            const ctx = this.createContext(req, res);
            const onerror = err => ctx.onerror(err);
            const handleResponse = () => respond(ctx);
            onFinished(res, onerror);
            return fn(ctx).then(handleResponse).catch(onerror);
        };

        return handleRequest;
    }
}

请求前的中间件初始化处理部分（本质就是对中间件集合建立起一个洋葱模型） + 请求到来时的中间件运行部分（fn(ctx).then(handleResponse).catch(onerror);）

到此呢，Koa中间件的面纱就完全揭开了。

redux

1、收集middleware

看完redux的使用方法，很明显可以看出redux收集middleware是通过applyMiddleware实现，我们看看他的源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// applyMiddleware.js

import compose from './compose'

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        `Dispatching while constructing your middleware is not allowed. ` +
          `Other middleware would not be applied to this dispatch.`
      )
    }

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

可以看出它接受一系列middleware作为参数，返回一个接受createStore作为参数的高阶方法。（createStore的 enhance 方法）；内部即增加了对中间件的应用

createStore 接收一个 enhancer 参数用于自增强

1
store = createStore(reducer, initState, applyMiddleware(middleware1, middleware2))

再来看看createStore源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function createStore(reducer, preloadedState, enhancer) {
    // 是否传了state初始值的判断
    if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
        enhancer = preloadedState
        preloadedState = undefined
    }
    // 是否应用middlewares的判断
    if (typeof enhancer !== 'undefined') {
        // 如果使用了middleware, 对createStore进行增强
        return enhancer(createStore)(reducer, preloadedState)
    }

    let currentReducer = reducer
    let currentState = preloadedState

    function dispatch(action) {
        console.log('origin dispatch')
        currentState = currentReducer(currentState, action)
        return action
    }

    function getState() {
        return currentState
    }

    // 为了初始化preloadState
    dispatch({ type: 'redux-init' })

    return {
        dispatch,
        getState
    }
}

中间件形式 store => next => action => { xx }是函数柯里化作用的灵活体现，将多参数化为单参数，可以用于提前固定 store 参数，得到形式更加明确的 dispatch => dispatch

当调用dispatch的时候， 上面的中间件将会自动触发

现在在来理解 dispatch = compose(...chain)(store.dispatch) 就相对容易了，原生的 store.dispatch 传入最后一个“中间件”，返回一个新的 dispatch , 再向外传递到前一个中间件，直至返回最终的 dispatch, 当覆写后的dispatch 调用时，每个“中间件“的执行又是从外向内的”洋葱圈“模型。

总结

总体而言，express 和 koa 的实现很类似，都是next 方法传递进行递归调用，只不过 koa 是promise 形式。redux 相较前两者有些许不同，先通过递归向外覆写，形成执行时递归向里调用。

总结一下三者关键异同点（不仅限于中间件）：

1、实例创建： express 使用工厂方法, koa是类
2、koa 实现的语法更高级，使用ES6，支持async await(generator)
3、koa 没有内置router, 增加了 ctx 全局对象，整体代码更简洁，使用更方便。
4、koa 中间件的递归为 promise形式，express 使用while 循环加 next 尾递归
5、redux是柯里化中间件形式，更简洁灵活，函数式编程体现的更明显
redux 以 dispatch 覆写的方式进行中间件增强

参考： https://juejin.im/post/5b9a23a45188255c9c751b07#heading-6

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Lozoe，<br>毕业于大连皇家民族学院，目前就职于驼厂<br><br>热爱大海与冷笑话，<br/>目前是一枚前端<br/><br/>爱生活，爱健身，爱编码<br>年轻无为，卖马为生。