手寫Compose方法的有哪些

本篇內(nèi)容主要講解“手寫Compose方法的有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“手寫Compose方法的有哪些”吧!

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

• compose簡介

• compose的實現(xiàn)

• 最容易理解的實現(xiàn)方式

• 手寫javascript中reduce方法

• redux中compose的實現(xiàn)

• 參考文章

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

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

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

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

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

compose簡介

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

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

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

compose在函數(shù)式編程中是一個很重要的工具函數(shù)，在這里實現(xiàn)的compose有三點說明

• 第一個函數(shù)是多元的(接受多個參數(shù))，后面的函數(shù)都是單元的(接受一個參數(shù))

• 執(zhí)行順序的自右向左的

• 所有函數(shù)的執(zhí)行都是同步的

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

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

這幾個函數(shù)組成一個任務隊列

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í)行，下一個任務的參數(shù)是上一個任務的返回結(jié)果，并且任務都是同步的，這樣就能保證任務可以按照有序的方向和有序的時間執(zhí)行。

compose的實現(xiàn)

好了，我們現(xiàn)在已經(jīng)知道compose是什么東西了，現(xiàn)在就來實現(xiàn)它吧!

最容易理解的實現(xiàn)方式

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

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參數(shù)

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]()

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

后面的步驟同理。

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

手寫javascript中reduce方法

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

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就取 數(shù)組的第一個元素。這也是說明了為什么傳入初始值，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的實現(xiàn)吧

redux中compose的實現(xiàn)

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í)行順序，還實現(xiàn)了前一個方法執(zhí)行返回的結(jié)果傳遞給了下一個即將要執(zhí)行的方法。

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

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

怎么辦到的?

看看下面的解釋：

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

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

我們現(xiàn)在把這個方法簡化成dd，即

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

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

所以執(zhí)行結(jié)果是

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

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

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

到此，相信大家對“手寫Compose方法的有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！