js函数式编程之代码组合（compose）

var compose = function(f,g) {
  return function(x) {
    return f(g(x));
  };
};

这就是函数组合（compose），f 和 g 都是函数， x是在它们之间通过“管道”传输的值。

用法1：

我们可以通过组合函数使之产出一个崭新的函数：

var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + '!'; };
var shout = compose(exclaim, toUpperCase);

shout("send in the clowns");
// "SEND IN THE CLOWNS!"

让代码从右向左运行，而不是由内向外运行

// 取列表中的第一个元素
var head = function(x) { return x[0]; };
// 反转列表
var reverse = function (y) {
    return y.reduce(function(acc, x){ return [x].concat(acc); }, []);
}
var last = compose(head, reverse);

last(['jumpkick', 'roundhouse', 'uppercut']); // uppercut

从右向左执行更加能够反映数学上的含义

// 结合律（associativity）
var associative = compose(f, compose(g, h)) == compose(compose(f, g), h);
// true

这个特性就是结合律，符合结合律意味着不管你是把 g 和 h 分到一组，还是把 f 和 g 分到一组都不重要。所以，如果我们想把字符串变为大写，可以这么写：

compose(toUpperCase, compose(head, reverse));

// 或者
compose(compose(toUpperCase, head), reverse);

因为如何为 compose 的调用分组不重要，所以结果都是一样的。这也让我们有能力写一个可变的组合（variadic compose），用法如下： 

// 前面的例子中我们必须要写两个组合才行，但既然组合是符合结合律的，我们就可以只写一个，
// 而且想传给它多少个函数就传给它多少个，然后让它自己决定如何分组。

var lastUpper = compose(toUpperCase, head, reverse);

lastUpper(['jumpkick', 'roundhouse', 'uppercut']);    // 'UPPERCUT'

var loudLastUpper = compose(exclaim, toUpperCase, head, reverse)

loudLastUpper(['jumpkick', 'roundhouse', 'uppercut']);    // 'UPPERCUT!'

参考运用结合律能为我们带来强大的灵活性，任何一个函数分组都可以被拆开来，然后再以它们自己的组合方式打包在一起。让我们来重构重构前面的例子：

var loudLastUpper = compose(exclaim, toUpperCase, head, reverse);

// 或
var last = compose(head, reverse);
var loudLastUpper = compose(exclaim, toUpperCase, last);

// 或
var last = compose(head, reverse);
var angry = compose(exclaim, toUpperCase);
var loudLastUpper = compose(angry, last);

// 更多变种...

我们可以实现一个通用版的compose， 参考underscore1.11.0 

function compose(){
    var args = arguments;
    var start = args.length - 1;
    return function(){
        var i = start;
        var result = args[i].apply(this,arguments);
        while(i--) result = args[i].call(this,result);
        return result;
    }  
}

利用数组的reduceRight方法来实现：

// reduceRight实现
const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)

实际例子

koa2 洋葱模型的实现和原理 

 koa server

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx, next) => {
    ctx.body = 'Hello World';
    console.log(1);
    next();
    console.log(4);
});

app.use(async (ctx, next) => {
    console.log(2);
    next();
    console.log(3);
});

app.listen(3000);

启动服务后，访问http://localhost:3000/

// 依次输出
1
2
3
4

 

原理

1. koa通过use函数，把所有的中间件push到一个内部数组队列this.middlewares中

use(fn) {
    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
    // 判断是不是中间件函数是不是生成器 generators
    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');
      // 如果是 generators 函数，会转换成 async/await
      fn = convert(fn);
    }
    debug('use %s', fn._name || fn.name || '-');
    // 使用 middleware 数组存放中间件
    this.middleware.push(fn);
    return this;
}

2. Koa中间件的执行流程主要通过koa-compose中的compose函数完成

洋葱模型原理： 所有的中间件依次执行，每次执行一个中间件，遇到next()就会将控制权传递到下一个中间件，下一个中间件的next参数，当执行到最后一个中间件的时候，控制权发生反转，开始回头去执行之前所有中间件中剩下未执行的代码； 当最终所有中间件全部执行完后，会返回一个Promise对象，因为我们的compose函数返回的是一个async的函数，async函数执行完后会返回一个Promise，这样我们就能将所有的中间件异步执行同步化，通过then就可以执行响应函数和错误处理函数

核心代码：

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

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

redux 

redux compose

export default function compose(...funcs: Function[]) {
  if (funcs.length === 0) {
    // infer the argument type so it is usable in inference down the line
    return <T>(arg: T) => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce(
    (a, b) =>
      (...args: any) =>
        a(b(...args))
  )
}

相关系列文章：

js函数式编程之pointfree

js函数式编程之代码组合（compose）

js函数式编程之柯里化（curry）

js函数式编程之偏应用函数 （Partial Application）

参考资料： JS 函数式编程指南