[[356759]]

本文轉載自微信公眾號「前端陽光」，作者事業(yè)有成的張啦啦。轉載本文請聯系前端陽光公眾號。事業(yè)有成的張啦啦  

前言：為什么要學習這個方法

• compose簡介
• compose的實現
  • 最容易理解的實現方式
  • 手寫javascript中reduce方法
  • redux中compose的實現
• 參考文章

前言：為什么要學習這個方法

遇到這個方法主要是最近在閱讀redux，koa 原理 等多次遇到這個方法，為了更好地理解框架原理，于是深入學習了一下compose的實現。

然后也發(fā)現這屬于函數式編程的東西，發(fā)現函數式編程是進擊前端進階的必經之路，因為像其中的純函數的概念在redux的reducer中也展示得淋漓盡致，而保留函數計算結果的思想無論是在vue，還是react等其他框架也多處見到。

所以建議有時間可以去看下函數試編程。

接下來，就讓我們學習下其中的compose函數吧!

compose簡介

compose就是執(zhí)行一系列的任務(函數)，比如有以下任務隊列

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

每一個step都是一個步驟，按照步驟一步一步的執(zhí)行到結尾，這就是一個compose

compose在函數式編程中是一個很重要的工具函數，在這里實現的compose有三點說明

• 第一個函數是多元的(接受多個參數)，后面的函數都是單元的(接受一個參數)
• 執(zhí)行順序的自右向左的
• 所有函數的執(zhí)行都是同步的

還是用一個例子來說，比如有以下幾個函數

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組合這個隊列并執(zhí)行

let composeFunc = compose(...steps) 
 
console.log(composeFunc(1, 2, 3)) 

執(zhí)行過程

6 -> 6 + 2 = 8 -> 8 + 3 = 11 -> 11 + 4 = 15 

所以流程就是從init自右到左依次執(zhí)行，下一個任務的參數是上一個任務的返回結果，并且任務都是同步的，這樣就能保證任務可以按照有序的方向和有序的時間執(zhí)行。

compose的實現

好了，我們現在已經知道compose是什么東西了，現在就來實現它吧!

最容易理解的實現方式

思路就是使用遞歸的過程思想，不斷的檢測隊列中是否還有任務，如果有任務就執(zhí)行，并把執(zhí)行結果往后傳遞，這里是一個局部的思維，無法預知任務何時結束。直觀上最容易理解。

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

刪繁就簡來看下，去掉args1參數

const compose = function(...funcs) { 
  let length = funcs.length 
  let count = length - 1 
  let result 
  return function f1 () { 
    result = funcs[count]() 
    if (count <= 0) { 
      count = length - 1 
      return result 
    } 
    count-- 
    return f1(result) 
  } 
} 

這就好看很多，我們假設有三個方法，aa，bb，cc

 function aa() { 
    console.log(11); 
} 
 
function bb() { 
    console.log(22); 
} 
function cc() { 
    console.log(33); 
    return 33 
} 

然后傳入compose

compose(aa,bb,cc) 

此時count = 2，則下面其實是執(zhí)行cc

result = funcs[count]() 

然后count--。再遞歸執(zhí)行f1，則下面其實就是執(zhí)行bb

result = funcs[count]() 

這樣，就實現了 從funcs數組里從右往左依次拿方法出來調用，再把返回值傳遞給下一個。

后面的步驟同理。

這其實是一種面向過程的思想

手寫javascript中reduce方法

為什么要手寫?其實你要是能夠很熟練的使用reduce，我覺得不必手寫reduce，只是我覺得熟悉一下reduce內部的實現可以更好地理解后面的內容，況且 也不會太難呀!

function reduce(arr, cb, initialValue){ 
       var num = initValue == undefined? num = arr[0]: initValue; 
       var i = initValue == undefined? 1: 0 
       for (i; i< arr.length; i++){ 
           num = cb(num,arr[i],i) 
       }' 
       return num 
   } 

如代碼所示，就是先判斷有沒有傳入初始值，有的話，下面的循環(huán)直接 從i = 0開始，否則i=1開始。

如果沒有傳入初始值，num就取 數組的第一個元素。這也是說明了為什么傳入初始值，i就=1，因為第一個都被取出來了，就不能再取一次啦啦啦!

下面使用我們寫的reduce方法

function fn(result, currentValue, index){ 
       return result + currentValue 
   } 
    
   var arr = [2,3,4,5] 
   var b = reduce(arr, fn,10)  
   var c = reduce(arr, fn) 
   console.log(b)   // 24 

好了 ，沒毛病，既然我們了解了reduce原理，就看看下面的redux中compose的實現吧

redux中compose的實現

function compose(...funcs) { 
    if (funcs.length === 0) { 
        return arg => arg 
    } 
 
    if (funcs.length === 1) { 
        return funcs[0] 
    } 
    debugger 
    return funcs.reduce((a, b) => (...args) => a(b(...args))) 
} 

很簡短，非常的巧妙，但是不是很不好理解。不過沒關系。

依舊通過例子來講解。

function aa() { 
    console.log(11); 
} 
 
function bb() { 
    console.log(22); 
} 
function cc() { 
    console.log(33); 
} 

假設只有這三個方法，我們怎樣才能先執(zhí)行cc再執(zhí)行bb，再執(zhí)行aa呢?沒錯，可以直接寫

aa(bb(cc())) 

就是這樣，非常巧妙，不僅完成了執(zhí)行順序，還實現了前一個方法執(zhí)行返回的結果傳遞給了下一個即將要執(zhí)行的方法。

而下面這段代碼所做的就是將funcs數組[aa,bb,cc]，轉化成aa(bb(cc()))

funcs.reduce((a, b) => (...args) => a(b(...args))) 

怎么辦到的?

看看下面的解釋：

reduce內部第一次執(zhí)行返回的結果是 一個方法

(...args) => aa(bb(...args)) 

我們現在把這個方法簡化成dd，即

dd = (...args) => aa(bb(...args)) 

reduce內部第二次執(zhí)行的時候，此時的a 是 上一次返回的dd方法，b是cc

所以執(zhí)行結果是

(...args) => dd(cc(...args)) 

而dd(cc(...args))不就是先執(zhí)行cc再執(zhí)行dd嗎?而dd就是執(zhí)行bb再執(zhí)行aa。

我的天，!這不是俄羅斯套娃嗎!沒錯 redux中的compose的實現原理就是套娃哈哈哈!

參考文章

https://segmentfault.com/a/1190000011447164