什么是函数组合?

函数式组合能够了解为将一系列简略根底函数组合成能实现简单工作函数的过程;
这些根底函数都须要承受一个参数并且返回数据,这数据应该是另一个尚未可知的程序的输出;

利用compose 函数

先来看一个只接管两个参数的compose 函数, 前面再欠缺compose函数

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

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

咱们能够通过组合函数使之产出一个簇新的函数:

var toUpperCase = function(str) { return str.toUpperCase(); };var exclaim = function(str) { return str + '!'; };var shout = compose(exclaim, toUpperCase); shout('hello world');// HELLO WORLD!

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

// 取列表中的第一个元素var head = function(arr) { return arr[0]; };// 反转列表var reverse = function (arr) {    return arr.reduce(function(cur, next){ return [next].concat(cur); }, []);}var last = compose(head, reverse); last(['apple', 'banana', 'orange']); // orange

能够看出compose的数据流是从右往左的,且从右向左执行更加可能反映数学上组合的含意;

组合满足结合律

// 结合律(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);

如何应用组合

假如咱们有这样一个需要:给你一个数组,实现扁平化,并且去重

var arr = [1, 2, [2, 10, 0, [5, 6, 4, [7, 1]]]];var flattenAndUnique = function (arr) {    while(arr.some(Array.isArray)){        arr = [].concat(...arr)    }    return Array.from(new Set(arr));}flattenAndUnique(arr); // [1, 2, 10, 0, 5, 6, 4, 7]

这段代码实现起来没什么问题,但当初加了新需要,须要排序
为了实现这个指标,咱们须要更改咱们之前封装的函数,这其实就毁坏了设计模式中的开闭准则。

开闭准则:软件中的对象(类,模块,函数等等)应该对于扩大是凋谢的,然而对于批改是关闭的。

那么在需要未变更,仍然是数组扁平化且去重,利用组合的思维来怎么写呢?

原需要,咱们能够这样实现:

var arr = [1, 2, [2, 10, 0, [5, 6, 4, [7, 1]]]];var flatten = function (arr) {    while(arr.some(Array.isArray)){        arr = [].concat(...arr)    }    return arr;};var unique = function (arr) { return Array.from(new Set(arr)); };var flattenAndUnique = compose(unique, flatten);var result = flattenAndUnique(arr) // [1, 2, 10, 0, 5, 6, 4, 7]

那么当咱们新增需要排序时,咱们基本不须要批改之前封装过的函数:

// ...// 新增一个数组排序办法var sort = function (arr) { return arr.sort(function(a, b) {    return  a - b;}) };var flattenAndUniqueAndSort = compose(sort, unique, flatten);var result = flattenAndUniqueAndSort(arr) //  [0, 1, 2, 4, 5, 6, 7, 10]

能够看到当变更需要的时候,咱们没有突破以前封装的代码,只是新增了函数性能,而后把函数进行重新组合。
咱们假如,当初又变更了需要,须要求和,那么咱们能够这样实现:

// 新增var getSum = function (arr){ return arr.reduce(function (cur, next) {    return cur + next}, 0); };var flattenAndUniqueAndSum = compose(getSum, unique, flatten);var result = flattenAndUniqueAndSum(arr) // 35

从这个例子,咱们能够看出,通过将一些繁多性能的函数通过组合起来,而后再组成简单性能,不仅代码逻辑更加清晰,也给保护带来微小的不便。

实现组合

从以上能够看出compose就是接管若干个函数作为参数,返回一个新函数。新函数执行时,依照由右向左的程序顺次执行传入compose中的函数,每个函数的执行后果作为为下一个函数的输出,直至最初一个函数的输入作为最终的输入后果

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

这个只能承受两个参数

但显然咱们须要思考的是compose接管的参数个数是不确定的,所以咱们能够利用reduceRight写一个通用版的

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

如果咱们要让最左侧的函数最先执行,那咱们须要扭转数据流的方向;从左至右解决数据流的过程称为管道(pipeline)序列(sequence)

实现管道

const pipe = (...fns) => (value) => fns.reduce((acc, fn) => fn(acc), value)

compose理论用例

lodash

lodash/flowRight.js at master · lodash/lodash (github.com)

function flowRight(...funcs) {  return flow(...funcs.reverse());}// flow.jsfunction flow(...funcs) {  const length = funcs.length  let index = length  while (index--) {    if (typeof funcs[index] !== 'function') {      throw new TypeError('Expected a function')    }  }  return function(...args) {    let index = 0    let result = length ? funcs[index].apply(this, args) : args[0]    while (++index < length) {      result = funcs[index].call(this, result)    }    return result  }}

underscore.js

underscore/underscore.js at master · jashkenas/underscore · GitHub

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;    }  }

Koa2中间件

koa2 应用的异步计划是 async/await

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://127.0.0.1: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;}
  1. 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 函数式编程指南

https://juejin.cn/post/684490...