实现compose的五种思路

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

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

什么是compose

简单回顾一下compose，compose就是执行一系列的任务（函数），比如有以下任务队列，

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的任务在本质上就是函数执行，再加上顺序，所以可以把实现顺序执行放到函数本身，对函数的原型进行方法的绑定。方法的作用对象是函数，面向对象封装的数据，面向函数封装的是函数的行为。

需要对函数绑定两个行为 before 和 after，before执行函数多元部分（启动），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引入了Promise，Promise可以指定一个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是非常灵活的,借助es6的Promise和Generator也可以很优雅的实现。后面会介绍compose的异步实现，在函数式编程来看，异步的本质应该就是Monad。