借助 Proxy 实现回调函数执行计数

背景

最近在做一个简化版的 Lazy.js:simply-lazy,目的是深入分析 Lazy.js 中惰性求值的实现,同时由于简化了实现过程,便于在分享(计划近期分享)时作为 demo 展示。

惰性求值的一个重要特性是延迟了计算过程,从而能够提升性能,例如:

注:为了书写方便,回调函数使用了 ES 的“=>”来定义。

这里对原始数据执行 map、filter 后只取前 3 个结果值,Lazy.js 的实现策略是 map、filter 中的回调函数也尽可能少地被调用,可以看下统计出的回调函数的调用次数:

37341-a1860fef16e47906

Paste_Image.png

demo 地址:http://www.luobotang.cn/simply-lazy/demo.html
注意:需要浏览器环境支持 ES6 特性,建议使用较新版本的 Chrome 打开。

从上面的 demo 中可以看到,第三种情况下,虽然仍旧要执行与前面相同的 map、filter 的过程,但是由于最终只需要返回前 3 个结果值,此时 map、filter 的回调函数执行次数是减少了的。

本文不深入分析 Lazy.js 惰性计算的内部原理(后面打算单独做一次分享),而是介绍下我是如何实现上面的回调函数执行计数。

问题

明确下需求或者说要解决的问题,针对如下的代码:

能够统计代码执行过程中 map、filter 传入的回调函数(i => i * 2i => i <= 10)的实际执行次数。

实现这个需求,可以采用粗暴的模式,例如:

不过这样写的话我的 demo 页面展示的代码不久太丑了吗,计数的过程其实是额外的工作,写到 demo 代码里面也影响其他人阅读不是吗。

所以,我想实现不修改 demo 代码的计数。

设计

其实在考虑需求的时候,就已经琢磨过要实现的话得采用哪些技术了。比较自然的想法,就是用“假”的 Lazy 函数来替换原有的 Lazy 函数,这样后续的调用过程就可以进行任意的 hack 的了。例如:

貌似是可以的,也应该是可以的,因为后续的调用实际上是被“劫持”了,我可以把计数的代码添加到回调函数被调用的时候执行,例如:

对于 filter 也要执行类似的处理,而 take、each 则直接调用原有的 seq 对象上的方法就好了。

另外,由于每次调用后都会产生一个新的序列对象(sequence),为了能够正常链接后续的调用,还要继续返回一个新的劫持的序列对象。有点麻烦,不过也能实现。

可以看到,这种“劫持”对象的过程,比较繁琐,不仅要劫持到关心的方法,还得保证对象其他的方法也能正常调用。而在 ES6/ES2015 中,有更好的技术可以采用:Proxy – MDN

Proxy 这样使用:

这样可以得到一个代理对象 proxy,与前面的“劫持”对象类似,在程序中直接使用 proxy 来替代原始的 target 对象。不过 Proxy 对象的强大之处在于,对于该代理对象的各种“请求”,会调用相应的 handler 中传入的回调函数。这样就不需要代理对象实现原始对象的所有功能,只需要处理那些关心的情况。

对于前面的情况,使用 Proxy 可以大致这样处理:

返回的代理对象在被访问任何属性或方法时,都会被拦截,首先调用 handler 中的 get() 方法,这样除了要特殊处理的 map 和 filter,其他的直接返回原有属性或方法。

实现

思路有了,然后就是具体的实现工作了。

首先看下页面处理逻辑,每个 demo 代码块我都包装在一个函数中的,然后将执行代码、执行结果、回调计数结果分别输出到页面上,也就是前面图中的那样。

基本过程为:

看到这里,已经不耐烦的同学可以直接去 demo 页面上扒代码来看了,相较于我枯燥的描述,代码可能看起来更简单些。

(1)获取执行代码

通过 demoFn.toString() 就可以了,不过需要额外去除函数定义的头尾部分,只在页面展示执行代码。

(2)获取执行结果

通过传入的 print() 来收集执行结果,也不复杂:

然后将 print 函数传入 demoFn 函数,这样代码执行后输出的结果会被收集到 output 中,然后渲染到页面就可以了。

(3)获取回调计数结果

这个是比较复杂的部分,对应的实现思路就是前面讲的了。不过由于 Lazy.js 中每次方法调用返回的是新的序列对象,要多次生成代理,所以我将生成代理序列对象的代码单独抽出:

通过 proxySeq() 来实现一个 FakeLazy:

和前面的 print 函数一起作为参数来调用 demoFn 函数从而执行代码:

执行过程中可以收集执行结果和回调函数执行次数,这是借助一个个代理对象来“劫持” map、filter 实现的。

渲染的过程的就是字符串拼接了,不再赘述。

小结

代码胜过万语千言,感兴趣的同学可以去读一下 demo 页面的源码。

最后感叹一下,Lazy.js 的实现还是蛮有意思的,之后我会结合 simply-lazy 分享下惰性求值的实现原理。对了,demo 页面使用的其实是 simply-lazy,而非 Lazy.js。

其实无论是 simply-lazy 还是这里 demo 页面的实现,都有一些不足,例如 demo 页面中其实没有处理 take(),这样后续如果再调用 map 或 filter,就无法计数。不过这些相对于我要介绍的东西而言,不是那么重要,咱们且得鱼忘筌吧。^_^

 

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 收藏 评论

关于作者:luobotang

前端工程师@网易 个人主页 · 我的文章 · 4 ·  

可能感兴趣的话题



直接登录
跳到底部
返回顶部