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 函数式编程指南

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 支持函数式编程的特性,这意味着你可以在 Vue 组件中使用一些函数式编程的概念和技术。下面是一些与函数式编程相关的特性和用法: 1. 纯函数:函数式编程鼓励使用纯函数,这意味着函数的输出只依赖于输入,不会对外部环境产生副作用。在 Vue 组件中,你可以将计算属性、过滤器和方法尽量设计成纯函数,以便更好地进行单元测试和调试。 2. 函数组合:Vue 3 提供了 `compose` 函数,它可以将多个函数组合起来,形成一个新的函数。你可以使用 `compose` 来简化复杂的逻辑处理,提高代码的可读性和可维护性。 3. 高阶组件 (Higher-Order Components):在 Vue 3 中,你可以使用函数式组件 (Functional Components) 来定义高阶组件。函数式组件是一种纯函数,接收一个 props 对象作为参数,并返回一个 VNode。通过使用函数式组件,你可以轻松地将一些常见的逻辑和功能封装成可复用的高阶组件。 4. 不可变数据:函数式编程鼓励使用不可变的数据结构,这意味着数据一旦创建就不能被修改。在 Vue 3 中,你可以使用 `ref` 和 `reactive` 来创建响应式的数据,但是不能直接修改它们的值。如果需要修改数据,应该通过使用特定的方法或函数来产生新的数据。 5. 组件复用:函数式编程鼓励组件的复用性,你可以将一些通用的功能封装成可复用的函数或组件,并在不同的地方进行使用。Vue 3 中的函数式组件和高阶组件是实现组件复用的一种方式。 这些是 Vue 3 中支持函数式编程的一些特性和用法,希望对你有所帮助!如果还有其他问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值