koa-compose簡單實現及使用的方法是什么

這篇“koa-compose簡單實現及使用的方法是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“koa-compose簡單實現及使用的方法是什么”文章吧。

場景

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

面試官讓你實現一個場景：有一件衣服單價50元，買了num件，總和打了8折，然后運費是12元，算出買這num件衣服加上運費算上折扣需要多少錢？

首先需要實現三個函數

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

TShirtNum代表num件衣服需要的費用，discount表示打了8折之后的費用，express表示算上運費的費用。

現在要求實現一個compose函數，然后調用這個函數，并把上面三個函數傳入compose函數中，最后計算出結果。比如

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

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

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

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

很顯然compose需要返回一個函數

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

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

koa-compose實現

現在面試官將這三個方法改造了一下。

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
};

要求按照順序打印結果。同時會看到每個函數中都多了一個next方法。仔細觀察你會發現，next其實就是調用下一個方法。我們用一個圖來表示：

下面我們用代碼實現一下

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));

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

以上就是關于“koa-compose簡單實現及使用的方法是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。