一个有味道的函数

一个有味道的函数

最近想到了一个自认为很有意思的面试题 如何实现一个compose函数。 函数接收数个参数,参数均为Function类型,右侧函数的执行结果将作为左侧函数执行的参数来调用。

compose(arg => `${arg}%`, arg => arg.toFixed(2), arg => arg + 10)(5) // 15.00%
compose(arg => arg.toFixed(2), arg => arg + 10)(5) // 15.00
compose(arg => arg + 10)(5) // 15

执行结果如上述代码,有兴趣的同学可以先自己实现一下再来看后续的。

1.0实现方案

大致的思路为:

  1. 获取所有的参数
  2. 调用最后一个函数,并接收返回值
  3. 如果没有后续的函数,返回数据,如果有,将返回值放入下一个函数中执行

所以这种情况用递归来实现会比较清晰一些

function compose (...funcs) {
  return function exec (arg) {
    let func = funcs.pop()
    let result = func(arg) // 执行函数,获取返回值

    // 如果后续还有函数,将返回值放入下一个函数执行
    // 如果后续没有了,直接返回
    return funcs.length ? exec(result) : result
  }
}

这样,我们就实现了上述的compose函数。 真是可喜可贺,可喜可贺。

本文完。


好了,如果现实生活中开发做需求也是如此爽快不做作就好了,但是,产品总是会来的,需求总是会改的。

2.0需求变更

我们现在有如下要求,函数需要支持Promise对象,而且要兼容普通函数的方式。 示例代码如下:

// 为方便阅读修改的排版
compose(
  arg => new Promise((resolve, reject) =>
    setTimeout(_ =>
      resolve(arg.toFixed(2)),
      1000
    )
  ),
  arg => arg + 10
)(5).then(data => {
  console.log(data) // 15.00
})

我们有如下代码调用,对toFixed函数的调用添加1000ms的延迟。让用户觉得这个函数执行很慢,方便下次优化

所以,我们就需要去修改compose函数了。 我们之前的代码只能支持普通函数的处理,现在因为添加了Promise对象的原因,所以我们要进行如下修改:

首先,异步函数改为同步函数是不存在的readFile/readFileSync这类除外。 所以,最简单的方式就是,我们将普通函数改为异步函数,也就是在普通函数外包一层Promise

function compose (...funcs) {
  return function exec (arg) {
    return new Promise((resolve, reject) => {
      let func = funcs.pop()

      let result = promiseify(func(arg)) // 执行函数,获取返回值,并将返回值转换为`Promise`对象

      // 注册`Promise`的`then`事件,并在里边进行下一次函数执行的准备
      // 判断后续是否还存在函数,如果有,继续执行
      // 如果没有,直接返回结果
      result.then(data => funcs.length ?
        exec(data).then(resolve).catch(reject) :
        resolve(data)
      ).catch(reject)
    })
  }
}

// 判断参数是否为`Promise`
function isPromise (pro) {
  return pro instanceof Promise
}

// 将参数转换为`Promise`
function promiseify (pro) {
  // 如果结果为`Promise`,直接返回
  if (isPromise(pro)) return pro
  // 如果结果为这些基本类型,说明是普通函数
  // 我们给他包一层`Promise.resolve`
  if (['string', 'number', 'regexp', 'object'].includes(typeof pro)) return Promise.resolve(pro)
}

我们针对compose代码的改动主要是集中在这几处:

  1. compose的返回值改为了Promise对象,这个是必然的,因为内部可能会包含Promise参数,所以我们一定要返回一个Promise对象
  2. 将各个函数执行的返回值包装为了Promise对象,为了统一返回值。
  3. 处理函数返回值,监听thencatch、并将resolvereject传递了过去。

3.0终极版

现在,我们又得到了一个新的需求,我们想要在其中某些函数执行中跳过部分代码,先执行后续的函数,等到后续函数执行完后,再拿到返回值执行剩余的代码:

compose(
  data => new Promise((resolve, reject) => resolve(data + 2.5)),
  data => new Promise((resolve, reject) => resolve(data + 2.5)),
  async function c (data, next) { // async/await为Promise语法糖,不赘述
    data += 10 // 数值 + 10
    let result = await next(data) // 先执行后续的代码

    result -= 5  // 数值 - 5

    return result
  },
  (data, next) => new Promise((resolve, reject) => {
    next(data).then(data => {
      data = data / 100 // 将数值除以100限制百分比
      resolve(`${data}%`)
    }).catch(reject) // 先执行后续的代码
  }),
  function d (data) { return data + 20 }
)(15).then(console.log) // 0.45%

拿到需求后,陷入沉思。。。 好好地顺序执行代码,突然就变成了这个鸟样,随时可能会跳到后边的函数去。 所以我们分析这个新需求的效果:

我们在函数执行到一半时,执行了nextnext的返回值为后续函数的执行返回值。 也就是说,我们在next中处理,直接调用队列中的下一个函数即可; 然后监听thencatch回调,即可在当前函数中获取到返回值; 拿到返回值后就可以执行我们后续的代码。

然后他的实现呢,也是非常的简单,我们只需要修改如下代码即可完成操作:

// 在这里会强行调用`exec`并传入参数
// 而`exec`的执行,则意味着`funcs`集合中又一个函数被从队列中取出来
promiseify(func(arg, arg => exec(arg)))

也就是说,我们会提前执行下一个函数,而且下一个函数的then事件注册是在我们当前函数内部的,当我们拿到返回值后,就可以进行后续的处理了。 而我们所有的函数是存放在一个队列里的,在我们提前执行完毕该函数后,后续的执行也就不会再出现了。避免了一个函数被重复执行的问题。

如果看到这里已经很明白了,那么恭喜,你已经了解了实现koajs最核心的代码: 中间件的实现方式洋葱模型

想必现在整个函数周遭散发着洋葱的味道。

参考资料

koa-compose

相关示例代码仓库

1.0,普通函数 2.0,Promise函数 3.0,支持洋葱模型

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

Java字符串之性能优化

在程序中你可能时常会需要将别的类型转化成String,有时候可能是一些基础类型的值。在拼接字符串的时候,如果你有两个或者多个基础类型的值需要放到前面,你需要显式...

9420
来自专栏Java编程技术

诡异的类型转换

最近在做应用迁移时候遇到了一个诡异的类型转换问题,感觉比较有意思,就记录下来和大家分享下。

10220
来自专栏大数据挖掘DT机器学习

Python一些基础面试题目总结

1 Python是如何进行内存管理的? 答:从三个方面来说,一对象的引用计数机制,二垃圾回收机制,三内存池机制 一、对象的引用计数机制 pytho...

39160
来自专栏大前端_Web

详解javascript作用域和闭包

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/deta...

12640
来自专栏小灰灰

Shell学习笔记

1. 变量 声明变量 以 a-zA-Z 开头,不包含特殊字符 等号两边没有空格 不与保留字符重名 PATH="/user/yihui" 使用 变量前加 $ 符号...

204100
来自专栏java一日一条

Java字符串之性能优化

在程序中你可能时常会需要将别的类型转化成String,有时候可能是一些基础类型的值。在拼接字符串的时候,如果你有两个或者多个基础类型的值需要放到前面,你需要显式...

10820
来自专栏Jerry的SAP技术分享

使用javap深入理解Java整型常量和整型变量的区别

下面我们就用javap将.class文件反编译出来然后深入研究Java里整型变量和整型常量的区别。

15530
来自专栏Java成神之路

PHP中 对象自动调用的方法:__set()、__get()、__tostring()

 (1)__get($property_name):获取私有属性$name值时,此对象会自动调用该方法,将属性name值传给参数$property_name,通...

12840
来自专栏mukekeheart的iOS之旅

OC学习10——内存管理

1、对于面向对象的语言,程序需要不断地创建对象。这些对象都是保存在堆内存中,而我们的指针变量中保存的是这些对象在堆内存中的地址,当该对象使用结束之后,指针变量指...

23850
来自专栏前端儿

理解运用JS的闭包、高阶函数、柯里化

JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性。

30730

扫码关注云+社区

领取腾讯云代金券