compose

compose在很多地方都出现过，redux中间件实现、koa洋葱圈模型、高阶组件等等。

compose本质是一种设计模式-分层设计。compose的作用是组合函数，把函数串联执行，前函数的输入当后函数的输出。

实现

递归

const fn1 = (num) => {
  console.log(num);
  return 3;
};

const fn2 = (num) => {
  console.log(num);
  return 4;
};

const fn3 = (num) => {
  console.log(num);
  return 5;
};


const compose = (...fns) => {
  return function process(val) {
    if (fns.length > 1) {
      const processFns = [...fns];
      const fn = processFns.pop();
      const res = fn(val);
      return compose(...processFns)(res);
    } else {
      const fn = fns[0];
      if (fn) {
        return fn(val);
      }
      return val;
    }
  };
};

迭代

const compose = (...fns) => {
  return (val) => {
    return fns.reduceRight((t, c) => {
      return c(t);
    }, val);
  };
};

关于运用场景

分层设计，例如我们把定位分在一层、动画分在一层、实际渲染分在一层。这样其实就是做到了关注点分离，很好的做到了分层设计。

//根据dsl渲染
compose(animation,position)(box)