koa-compose简单实现及使用的妙处

 更新时间:2023年04月11日 10:00:04   作者:翰玥  
这篇文章主要为大家介绍了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的源码基本上也就是这样。

以上就是koa-compose简单实现及使用的妙处的详细内容,更多关于koa-compose简单实现的资料请关注脚本之家其它相关文章!

相关文章

  • node.js中的fs.fchown方法使用说明

    node.js中的fs.fchown方法使用说明

    这篇文章主要介绍了node.js中的fs.fchown方法使用说明,本文介绍了fs.fchown方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • 基于node的cli工具开发使用详解

    基于node的cli工具开发使用详解

    这篇文章主要为大家介绍了基于node的cli工具开发使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 如何优雅地在Node应用中进行错误异常处理

    如何优雅地在Node应用中进行错误异常处理

    这篇文章主要介绍了如何优雅地在Node应用中进行错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Node.js中的模块系统介绍

    Node.js中的模块系统介绍

    这篇文章介绍了Node.js中的模块系统,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • npm配置国内镜像资源+淘宝镜像的方法

    npm配置国内镜像资源+淘宝镜像的方法

    这篇文章主要介绍了npm配置国内镜像资源+淘宝镜像的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • nvm版本导致npm install报错Unexpected token '.'的解决办法

    nvm版本导致npm install报错Unexpected token '.'的解决办法

    最近做项目遇到npm install 的问题,下面这篇文章主要给大家介绍了关于nvm版本导致npm install报错Unexpected token '.'的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 使用nodejs爬取前程无忧前端技能排行

    使用nodejs爬取前程无忧前端技能排行

    这篇文章主要介绍了使用nodejs爬前程无忧前端技能排行,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • express中static中间件的具体使用方法

    express中static中间件的具体使用方法

    这篇文章主要介绍了express中static中间件的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Node.js 使用流实现读写同步边读边写功能

    Node.js 使用流实现读写同步边读边写功能

    本文通过代码给大家介绍了Node.js 使用流实现读写同步边读边写功能,非常不错,具有参考借鉴价值,需要的额朋友参考下吧
    2017-09-09
  • Node.Js中实现端口重用原理详解

    Node.Js中实现端口重用原理详解

    这篇文章主要介绍了Node.Js中实现端口重用原理详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论