快捷導(dǎo)航

koa-compose簡(jiǎn)單實(shí)現(xiàn)及使用的妙處

更新時(shí)間：2023年04月11日 10:00:04 作者：翰玥

這篇文章主要為大家介紹了koa-compose簡(jiǎn)單實(shí)現(xiàn)及使用的妙處詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

場(chǎng)景

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

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

首先需要實(shí)現(xiàn)三個(gè)函數(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)一個(gè)compose函數(shù)，然后調(diào)用這個(gè)函數(shù)，并把上面三個(gè)函數(shù)傳入compose函數(shù)中，最后計(jì)算出結(jié)果。比如

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

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

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

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

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

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

一行代碼解決。startNum表示我們需要購(gòu)買的數(shù)量，當(dāng)做reduce的初始值，然后將上一次計(jì)算的結(jié)果傳給下一個(gè)函數(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)在面試官將這三個(gè)方法改造了一下。

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í)會(huì)看到每個(gè)函數(shù)中都多了一個(gè)next方法。仔細(xì)觀察你會(huì)發(fā)現(xiàn)，next其實(shí)就是調(diào)用下一個(gè)方法。我們用一個(gè)圖來表示：

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