关于函数式编程:理解函数组合compose及中间件实现

32次阅读

共计 5450 个字符，预计需要花费 14 分钟才能阅读完成。

什么是函数组合?

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

利用 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.js
function 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…

正文完
函数式编程
发表至： 函数式编程
2022-06-18
 0
关于函数式编程:Y-分钟速成-Lambda-Calculus
关于函数式编程:前端函数式编程浅析
关于函数式编程:理解函数组合compose及中间件实现
关于函数式编程:用JavaScript入门函数式编程刚入门趁热分享