§ compose(…functions)

先说这个 API 的原因是它没有依赖，是一个纯函数

⊙ 源码分析

  1. /**
  2.  * 看起来逼格很高，实际运用其实是这样子的：
  3.  * compose(f, g, h)(...arg) => f(g(h(...args)))
  4.  *
  5.  * 值得注意的是，它用到了 reduceRight，因此执行顺序是从右到左
  6.  *
  7.  * @param  {多个函数，用逗号隔开}
  8.  * @return {函数}
  9.  */
  11. export default function compose(...funcs) {
  12.   if (funcs.length === 0) {
  13.     return arg => arg
  14.   }
  16.   if (funcs.length === 1) {
  17.     return funcs[0]
  18.   }
  20.   const last = funcs[funcs.length - 1]
  21.   const rest = funcs.slice(0, -1)
  22.   return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
  23. }

这里的关键点在于，reduceRight 可传入初始值：

  1. // 由于 reduce / reduceRight 仅仅是方向的不同，因此下面用 reduce 说明即可
  2. var arr = [1, 2, 3, 4, 5]
  4. var re1 = arr.reduce(function(total, i) {
  5.   return total + i
  6. })
  7. console.log(re1) // 15
  9. var re2 = arr.reduce(function(total, i) {
  10.   return total + i
  11. }, 100) // <---------------传入一个初始值
  12. console.log(re2) // 115

下面是 compose 的实例（在线演示）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src="//cdn.bootcss.com/redux/3.5.2/redux.min.js"></script>
  5. </head>
  6. <body>
  7. <script>
  8. function func1(num) {
  9.   console.log('func1 获得参数 ' + num);
  10.   return num + 1;
  11. }
  13. function func2(num) {
  14.   console.log('func2 获得参数 ' + num);
  15.   return num + 2;
  16. }
  18. function func3(num) {
  19.   console.log('func3 获得参数 ' + num);
  20.   return num + 3;
  21. }
  23. // 有点难看（如果函数名再长一点，那屏幕就不够宽了）
  24. var re1 = func3(func2(func1(0)));
  25. console.log('re1：' + re1);
  27. console.log('===============');
  29. // 很优雅
  30. var re2 = Redux.compose(func3, func2, func1)(0);
  31. console.log('re2：' + re2);
  32. </script>
  33. </body>
  34. </html>

控制台输出：

  1. func1 获得参数 0
  2. func2 获得参数 1
  3. func3 获得参数 3
  4. re1：6
  5. ===============
  6. func1 获得参数 0
  7. func2 获得参数 1
  8. func3 获得参数 3
  9. re2：6