实现compose的五种思路

20

好久没有更新了,最近学习的过程中一直在用联想的思维来去看问题,javascript是一门非常灵活的语言,集合了好多语言的特性和多种编程模式,对于compose的实现,就有非常多的思路,每一种思路都有自己的特点,实现之后,有种殊途同归的快感。下面就是我总结的实现compose函数的五种思路。

  • 面向过程
  • 函数组合(reduce)
  • 函数交织(AOP编程)
  • Promise(sequence)
  • Generator(yield)

什么是compose

简单回顾一下composecompose就是执行一系列的任务(函数),比如有以下任务队列,

let tasks = [step1, step2, step3, step4]

每一个step都是一个步骤,按照步骤一步一步的执行到结尾,这就是一个compose
compose在函数式编程中是一个很重要的工具函数,在这里实现的compose有三点说明

  • 第一个函数是多元的(接受多个参数),后面的函数都是单元的(接受一个参数)
  • 执行顺序的自右向左的
  • 所有函数的执行都是同步的(异步的后面文章会讲到)

还是用一个例子来说,比如有以下几个函数

let init = (...args) => args.reduce((ele1, ele2) => ele1 + ele2, 0)
let step2 = (val) => val + 2
let step3 = (val) => val + 3
let step4 = (val) => val + 4

这几个函数组成一个任务队列

steps = [step4, step3, step2, init]

使用compose组合这个队列并执行

let composeFunc = compose(...steps)

console.log(composeFunc(1, 2, 3))

执行过程
6 -> 6 + 2 = 8 -> 8 + 3 = 11 -> 11 + 4 = 15
所以流程就是从init自右到左依次执行,下一个任务的参数是上一个任务的返回结果,并且任务都是同步的,这样就能保证任务可以按照有序的方向和有序的时间执行。

实现compose的五种思路

所有思路的执行过程都是上面的例子,以下只讲compose实现

面向过程

这个思路就是使用递归的过程思想,不断的检测队列中是否还有任务,如果有任务就执行,并把执行结果往后传递,这里是一个局部的思维,无法预知任务何时结束。直观上最容易结束和理解。

const compose = function(...args) {
  let length = args.length
  let count = length - 1
  let result
  return function f1 (...arg1) {
    result = args[count].apply(this, arg1)
    if (count <= 0) {
      count = length - 1
      return result
    }
    count--
    return f1.call(null, result)
  }
}

代码地址

函数组合

这个思路是一种函数组合的思想,将函数两两组合,不断的生成新的函数,生成的新函数挟裹了函数执行的逻辑信息,然后再两两组合,不断的传递下去,这种思路可以提前遍历所有任务,将任务组合成一个可以展开的组合结构,最后执行的时候就像推导多米诺骨牌一样。

函数的组合过程

f1 = (...arg) => step2.call(null, init.apply(null, arg))
f2 = (...arg) => step3.call(null, f1.apply(null, arg))
f3 = (...arg) => step4.call(null, f2.apply(null, arg))

compose实现

const _pipe = (f, g) => (...arg) => g.call(null, f.apply(null, arg))
const compose = (...args) => args.reverse().reduce(_pipe, args.shift())

代码地址

函数交织(AOP)

这个实现的灵感来自javascript设计模式中的高阶函数,因为compose的任务在本质上就是函数执行,再加上顺序,所以可以把实现顺序执行放到函数本身,对函数的原型进行方法的绑定。方法的作用对象是函数,面向对象封装的数据,面向函数封装的是函数的行为。

需要对函数绑定两个行为 beforeafterbefore执行函数多元部分(启动),after执行函数单元部分

Function.prototype.before = function(fn) {
  const self = this
  return function(...args) {
    let result = fn.apply(null, args)
    return self.call(null, result)
  }
}

Function.prototype.after = function(fn) {
  const self = this
  return function(...args) {
    let result = self.apply(null, args)
    return fn.call(null, result)
  }
}

这里对函数进行方法的绑定,返回的是带着函数执行的规则的另外一个函数,在这里是次序的排列规则,对返回的函数依然可以进行链式调用。
compose实现

const compose = function(...args) {
  let before = args.pop()
  let start = args.pop()
  if (args.length) {
    return args.reduce(function(f1, f2) {
      return f1.after(f2)
    }, start.before(before))
  }
  return start.before(before)
}

函数执行过程

step2.before(init).after(step3).after(step4)
fn3.after(step4)
fn3 = fn2.after(step3)
fn2 = fn1.before(step1)
fn1 = init -> step2 -> step3 -> step4

代码地址

Promise

ES6引入了PromisePromise可以指定一个sequence,来规定一个执行then的过程,then函数会等到执行完成后,再执行下一个then的处理。启动sequence可以使用
Promise.resolve()这个函数。构建sequence可以使用reduce
compose实现

const compose = function(...args) {
  let init = args.pop()
  return function(...arg) {
    return args.reverse().reduce(function(sequence, func) {
      return sequence.then(function(result) {
        return func.call(null, result)
      })
    }, Promise.resolve(init.apply(null, arg)))
  }
}

代码地址

Generator

Generator主要使用yield来构建协程,采用中断,处理,再中断的流程。可以事先规定好协程的执行顺序,然后再下次处理的时候进行参数(结果)交接,有一点要注意的是,由于执行的第一个next是不能传递参数的,所以第一个函数的执行需要手动调用,再空耗一个next,后面的就可以同步执行了。
generator构建


function* iterateSteps(steps) {
  let n
  for (let i = 0; i < steps.length; i++) {
    if (n) {
      n = yield steps[i].call(null, n)
    } else {
      n = yield
    }
  }
}

compose实现

const compose = function(...steps) {
  let g = iterateSteps(steps)
  return function(...args) {
    let val = steps.pop().apply(null, args)
    // 这里是第一个值
    console.log(val)
    // 因为无法传参数 所以无所谓执行 就是空耗一个yield
    g.next()
    return steps.reverse.reduce((val, val1) => g.next(val).value, val)
  }
}

代码地址

总结

github地址

github里面针对每一种实现包含了完成的demo案例,就在test.js里面,以上就是实现同步compose的五种思路,每一种思路的出发点都不一样,但是实现的目的都是一样的,可以看出javascript是非常灵活的,借助es6PromiseGenerator也可以很优雅的实现。后面会介绍compose的异步实现,在函数式编程来看,异步的本质应该就是Monad

你可能感兴趣的

cicada23 · 2018年03月28日

可以引用吗,会注明出处

+1 回复

0

可以的,知识共享

dongzhe3917875 作者 · 2018年03月28日
vbyzc · 2018年10月26日

看到第二种就行了,再看下去就崩溃了

回复

0

思路思路,提供解题思路,项目中不一定要这么用

jackie198512 · 2月22日
0

同时也反应了对generator/promise的了解与应用

jackie198512 · 2月22日
vbyzc · 2018年10月26日

试了第二种,reduce的初始值参数: steps.shift() 去掉也可以正常运行

回复

忍者无敌 · 2018年12月03日

其实还是前两种比较合适,后面的虽然可以做到,但没什么意义,扩展原型对象方法还会造成污染,虽然是AOP,但不至于为了实现compose而去做,更多地用于装饰器模式的实现

回复

0

before/after 也可以不挂在原型链上

jackie198512 · 2月22日
载入中...