場景

今年的行情真的是非常的差，而且面試的時候卷的不行。前段時間，有個朋友去面了某大廠，竟然被問到了手寫一個koa-compose。那咱們今天就簡單的實(shí)現(xiàn)一個看看到底難不難。

面試官讓你實(shí)現(xiàn)一個場景：有一件衣服單價50元，買了num件，總和打了8折，然后運(yùn)費(fèi)是12元，算出買這num件衣服加上運(yùn)費(fèi)算上折扣需要多少錢？

首先需要實(shí)現(xiàn)三個函數(shù)

const express = (total) => {
  return total + 12;
};
const discount = (total) => {
  return total * 0.8;
};
const TShirtNum = (num) => {
  return 50 * num;
};

TShirtNum代表num件衣服需要的費(fèi)用，discount表示打了8折之后的費(fèi)用，express表示算上運(yùn)費(fèi)的費(fèi)用。

現(xiàn)在要求實(shí)現(xiàn)一個compose函數(shù)，然后調(diào)用這個函數(shù)，并把上面三個函數(shù)傳入compose函數(shù)中，最后計(jì)算出結(jié)果。比如

const sellTshirt = compose([TShirtNum, discount, express]);
sellTshirt(100)

sellTshirt(100)會計(jì)算出最后的結(jié)果。如果要計(jì)算出最后的結(jié)果，就需要將TShirtNum計(jì)算出的結(jié)果傳給discount，然后discount計(jì)算出的結(jié)果傳給express。

此時我們可以使用reduce實(shí)現(xiàn)。MDN介紹reduce為：reduce()  方法對數(shù)組中的每個元素按序執(zhí)行一個由您提供的 reducer 函數(shù)，每一次運(yùn)行 reducer 會將先前元素的計(jì)算結(jié)果作為參數(shù)傳入，最后將其結(jié)果匯總為單個返回值。

第一次執(zhí)行回調(diào)函數(shù)時，不存在“上一次的計(jì)算結(jié)果”。如果需要回調(diào)函數(shù)從數(shù)組索引為 0 的元素開始執(zhí)行，則需要傳遞初始值。否則，數(shù)組索引為 0 的元素將被作為初始值 initialValue，迭代器將從第二個元素開始執(zhí)行（索引為 1 而不是 0）。

很顯然compose需要返回一個函數(shù)

const compose = (funcArr) => (startNum) => funcArr.reduce((pre, cur) => cur(pre), startNum) 

一行代碼解決。startNum表示我們需要購買的數(shù)量，當(dāng)做reduce的初始值，然后將上一次計(jì)算的結(jié)果傳給下一個函數(shù)，相當(dāng)于是TShirtNum計(jì)算的結(jié)果傳給discount, 也就是我們代碼中實(shí)現(xiàn)的cur(pre)。最后即可計(jì)算出結(jié)果。redux源碼就是這樣實(shí)現(xiàn)的??

koa-compose實(shí)現(xiàn)

現(xiàn)在面試官將這三個方法改造了一下。

const express = (total, next) => {
  console.log("starting, express"); // 3
  next(total + 12);
  console.log("ending, express"); // 4
};
const discount = (total, next) => {
  console.log("starting, discount"); // 2
  next(total * 0.8); 
  console.log("ending, discount"); // 5
};
const TShirtNum = (num, next) => {
  console.log("starting, TShirtNum"); // 1
  next(15 * num); 
  console.log("ending, TShirtNum"); // 6
};

要求按照順序打印結(jié)果。同時會看到每個函數(shù)中都多了一個next方法。仔細(xì)觀察你會發(fā)現(xiàn)，next其實(shí)就是調(diào)用下一個方法。我們用一個圖來表示：

下面我們用代碼實(shí)現(xiàn)一下

function compose(arr) {
  let result;
  return function (ctx) {
    let dispatch = function (i, ctx) {
      let fn;
      if (i < arr.length) {
        fn = arr[i];
      }
      if (i === arr.length) {
        result = ctx;
        return;
      }
      return fn(ctx, dispatch.bind(null, ++i));
    };
    dispatch(0, ctx);
    return result;
  };
}
const sellTshirt = compose([TShirtNum, discount, express]);
console.log(sellTshirt(100));

由于最后執(zhí)行的是sellTshirt(100),所以需要返回一個函數(shù)。在這個函數(shù)內(nèi)部定義一個dispatch方法，然后首次執(zhí)行傳入一個i為0，代表arr中的第一個函數(shù)，執(zhí)行這個函數(shù)。在執(zhí)行這個函數(shù)的時候需要多傳入一個參數(shù)作為next, 而這個參數(shù)就是dispatch，傳入的時候，i遞增，代表arr中可以取下一個函數(shù)了。當(dāng)執(zhí)行next的時候其實(shí)就是執(zhí)行dispatch。最后執(zhí)行的結(jié)果為：

其實(shí)就是用遞歸的思想去實(shí)現(xiàn)。大家可以去看下koa-compose的源碼基本上也就是這樣。

以上就是koa-compose簡單實(shí)現(xiàn)及使用的妙處的詳細(xì)內(nèi)容，更多關(guān)于koa-compose簡單實(shí)現(xiàn)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論