面向切面编程—koa、redux框架中间件原理解析

做者：曦舒 方凳雅集出品

用过express、koa或者redux的同窗应该都知道它们都有“中间件”这样一个概念(前端意义上的中间件，不是指平台与应用之间的通用服务)，在redux中咱们能够经过中间件的方式使用redux-thunk和loger的功能，在koa中咱们能够经过中间件对请求上下文context进行处理。

经过中间件，咱们能够在一些方法执行前添加统一的处理（如登陆校验，打印操做日志等），中间件的设计思想都是面向切面编程的思想，把一些跟业务无关的逻辑进行抽离，在须要使用的场景中再切入，下降耦合度，提升可重用性，并且使代码更简洁。

下面咱们经过源码分析redux和koa是如何实现中间件的，最后详细介绍面向切面编程解决的一些问题。

1、redux中间件
咱们先来看下redux中间件的用法。redux暴露了applyMiddleware方法，接受一个函数数组做为参数，applyMiddleware方法的返回值做为第二参数传入createStore方法。

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'
import reducer from './reducers'

const middleware = [ thunk ]
if (process.env.NODE_ENV !== 'production') {
middleware.push(createLogger())
}

const store = createStore(
reducer,
applyMiddleware(...middleware)
)
接下来看redux中间件是怎么实现的，下面是applyMiddleware的源码，其中对dispatch方法进行了compose处理，处理后的dispatch在每次调用时都会链式调用中间件函数。

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
}

}
}
compose的源码以下，其主要做用是依次调用函数数组中的中间件函数，并将前一个函数的返回结果做为后一个函数的入参，从而实现了在调用dispath时调用其余方法的需求。

export default function compose(...funcs) {
if (funcs.length === 0) {

return arg => arg

}

if (funcs.length === 1) {

return funcs[0]

}

return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
2、koa中间件
一样的，咱们来看下koa中间件的用法。首先实例化一个Koa对象，而后经过对象中的use方法添加中间件函数，最后调用listen方法启动node服务器

const app = new Koa();
const logger = async function(ctx, next) {
let res = ctx.res;

// 拦截操做请求 request
console.log(<-- ${ctx.method} ${ctx.url});

await next();

// 拦截操做响应 request
res.on('finish', () => {

console.log(`--> ${ctx.method} ${ctx.url}`);

});
};

app.use(logger)

app.use((ctx, next) => {
ctx.cookies.set('name', 'jon');
ctx.status = 204;

await next();
});

app.use(async(ctx, next) => {
ctx.body = 'hello world';
})

const server = app.listen();
咱们来看下koa中间件的实现，咱们经过实例的use方法添加中间件，在调用实例的listen方法后，在callback中会对中间件进行compose处理，最后在handleRequest中调用处理过的中间件。

listen(...args) {
const server = http.createServer(this.callback());
return server.listen(...args);
}

use(fn) {
if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
if (isGeneratorFunction(fn)) {

fn = convert(fn);

}
this.middleware.push(fn);
return this;
}

callback() {
const fn = compose(this.middleware);

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

const handleRequest = (req, res) => {

const ctx = this.createContext(req, res);
return this.handleRequest(ctx, fn);

};

return handleRequest;
}

handleRequest(ctx, fnMiddleware) {
const res = ctx.res;
res.statusCode = 404;
const onerror = err => ctx.onerror(err);
const handleResponse = () => respond(ctx);
onFinished(res, onerror);
return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}
koa中的compose方法和redux中的compose方法原理是同样的，都是用洋葱模型的方式依次调用中间件函数，可是koa-compose是经过Promise的方式实现的。咱们来看下koa中compose方法的实现。

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!')

}

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, dispatch.bind(null, i + 1)));
  } catch (err) {
    return Promise.reject(err)
  }
}

}
}
3、面向切面编程
经过对redux和koa中间件实现的简单分析，你们应该对面向切面编程有了一个简单的理解，下面一部份内容就是详细介绍面向切面编程，以及若是不用面向切面编程的方式，咱们还能用什么方式来知足需求，以及这些方式有什么问题。

面向切面编程(Aspect Oriented Programming，也叫面向方面编程)是一种非侵入式扩充对象、方法和函数行为的技术。
核心思想是经过对方法的拦截，在预编译或运行时进行动态代理，实如今方法被调用时能够以对业务代码无侵入的方式添加功能。

好比像日志、事务等这些功能，和核心业务逻辑没有直接关联，经过切面的方式和核心业务逻辑进行剥离，让业务同窗只需关心业务逻辑的开发，当须要用到这些功能的时候就把切面插拔到业务流程的某些节点上，作到了切面和业务的分离。

咱们举个例子，来帮助理解面向切面编程的使用场景。

农场的水果包装流水线一开始只有采摘-清洗-贴标签三步。

为了提升销量，想加上两道工序分类和包装但又不能干扰原有的流程，同时若是没增长收益能够随时撤销新增工序。

最后在流水线的中的空隙插上两个工人去处理，造成采摘-分类-清洗-包装-贴标签的新流程，并且工人能够随时撤回。

回到AOP的做用这个问题。

AOP就是在现有代码程序中，在不影响原有功能的基础上，在程序生命周期或者横向流程中加入/减去一个或多个功能。

咱们经过一个实际问题来分析AOP的好处。

如今有一个类Foo，类中包含了方法doSomething，我想在每次方法doSomething执行前和执行后打印一段日志，想实现的效果以下：

class Foo {
doSomething() {

let result;

// dosomething

return result

}
}

const foo = new Foo()
foo.doSomething(1, 2)

// before doSomething
// after doSomething, result: result
3.1 修改源代码
最简单粗暴的方法，就是重写doSomething方法

class Foo {
doSomething() {

console.log(`before doSomething`)
let result;

// dosomething

console.log(`after doSomething, result: ${result}`)
return result

}
}

const foo = new Foo()
foo.doSomething(1, 2)

// before doSomething
// after doSomething, result: result
这样的坏处很明显，须要改动原有的代码，是侵入性最强的一种作法。若是代码逻辑复杂，修改代码也会变得困难。若是想用相似的方法分析其余方法，一样须要修改其余方法的源代码。

3.2 继承
class Bar extends Foo {
doSomething () {

console.log(`before doSomething`)

const result = super.doSomething.apply(this, arguments)

console.log(`after doSomething, result: ${result}`)

return result

}
}

const bar = new Bar()
bar.doSomething(1, 2)

// before doSomething
// after doSomething, result: result
用继承的方式避免了修改父类的源代码，可是每一个使用new Foo的地方都要改为new Bar。

3.3 重写类方法
class Foo {
doSomething() {

let result;

// dosomething

return result

}
}

const _doSomething = Foo.prototype.doSomething
Foo.prototype.doSomething = function() {
if (_doSomething) {

console.log(`before doSomething`)

const result = _doSomething.apply(this, arguments)

console.log(`after doSomething, result: ${result}`)

return result

}
}

const foo = new Foo()
foo.doSomething(1, 2)

// before doSomething
// after doSomething, result: result
这样就多了中间变量_doSomething，也增长了开发成本。

3.4 职责链模式
咱们能够经过在Function的原型上添加before和after函数来知足咱们的需求。

Function.prototype.before = function (fn) {
var self = this;
return function () {

fn.apply(this, arguments);
self.apply(this, arguments);

}
}
Function.prototype.after = function (fn) {
var self = this;
return function () {

const result = self.apply(this, arguments);
fn.call(this, result);

}
}

class Foo {
doSomething() {

let result;

// dosomething

return result

}
}

const foo = new Foo()
foo.doSomething.after((result) => {
console.log(after doSomething, result: ${result})
}).before(() => {
console.log('before doSomething')
})()

// before doSomething
// after doSomething, result: result
从代码上已经实现了彻底解耦，也没有中间变量，可是却有一长串的链式调用，若是处理不当，代码可读性及可维护性较差。

3.5 中间件
咱们能够借用中间件思想来分解前端业务逻辑，经过next方法层层传递给下一个业务。首先要有个管理中间件的对象，咱们先建立一个名为Middleware的对象：

function Middleware(){
this.cache = [];
}
Middleware.prototype.use = function (fn) {
if (typeof fn !== 'function') {

throw 'middleware must be a function';

}
this.cache.push(fn);
return this;
}

Middleware.prototype.next = function (fn) {
if (this.middlewares && this.middlewares.length > 0) {

var ware = this.middlewares.shift();
ware.call(this, this.next.bind(this));

}
}
Middleware.prototype.handleRequest = function () {
this.middlewares = this.cache.map(function (fn) {

return fn;

});
this.next();
}
var middleware = new Middleware();
middleware.use(function (next) {
console.log(1); next(); console.log('1结束');
});
middleware.use(function (next) {
console.log(2); next(); console.log('2结束');
});
middleware.use(function (next) {
console.log(3); console.log('3结束');
});
middleware.use(function (next) {
console.log(4); next(); console.log('4结束');
});
middleware.handleRequest();

// 输出结果：
// 1
// 2
// 3
// 3结束
// 2结束
// 1结束
4、总结
本文一开始简单分析了redux及koa中间件的实现方式，而后总结介绍了面向切面编程的原理。最后用一个例子介绍不一样的方式实现对方法的扩充，经过示例咱们总结出用面向切面的编程的方式能下降代码耦合度，提升可重用性，并且使代码更简洁。

Referenceskoa-compose源代码redux中compose的实现Koa.js的AOP设计编写可维护代码之“中间件模式”使用JavaScript拦截和跟踪浏览器中的HTTP请求