最新博客
最新资源下载
借助 Proxy 实现回调函数执行计数
把生命浪费在美好事物上2018-06-29 18:54背景
最近在做一个简化版的 Lazy.js：simply-lazy，目的是深入分析 Lazy.js 中惰性求值的实现，同时由于简化了实现过程，便于在分享（计划近期分享）时作为 demo 展示。
惰性求值的一个重要特性是延迟了计算过程，从而能够提升性能，例如：
Lazy([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
.map(i => i * 2)
.filter(i => i <= 10)
.take(3)
.each(i => print(i))
注：为了书写方便，回调函数使用了 ES 的“=>”来定义。
这里对原始数据执行 map、filter 后只取前 3 个结果值，Lazy.js 的实现策略是 map、filter 中的回调函数也尽可能少地被调用，可以看下统计出的回调函数的调用次数，demo 地址：http://www.luobotang.cn/simply-lazy/demo.html注意：需要浏览器环境支持 ES6 特性，建议使用较新版本的 Chrome 打开。
从上面的 demo 中可以看到，第三种情况下，虽然仍旧要执行与前面相同的 map、filter 的过程，但是由于最终只需要返回前 3 个结果值，此时 map、filter 的回调函数执行次数是减少了的。
本文不深入分析 Lazy.js 惰性计算的内部原理（后面打算单独做一次分享），而是介绍下我是如何实现上面的回调函数执行计数。
问题
明确下需求或者说要解决的问题，针对如下的代码：
Lazy([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
.map(i => i * 2)
.filter(i => i <= 10)
.take(3)
.each(i => print(i))
能够统计代码执行过程中 map、filter 传入的回调函数（i => i * 2 和 i => i <= 10）的实际执行次数。
实现这个需求，可以采用粗暴的模式，例如：
var mapCount = 0
var filterCount = 0
Lazy([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
.map(i => { mapCount++; return i * 2 })
.filter(i => { filterCount++; return i <= 10 })
.take(3)
.each(i => print(i))
console.log('map: ' + mapCount)
console.log('filter: ' + filterCount)
不过这样写的话我的 demo 页面展示的代码不久太丑了吗，计数的过程其实是额外的工作，写到 demo 代码里面也影响其他人阅读不是吗。
所以，我想实现不修改 demo 代码的计数。
设计
其实在考虑需求的时候，就已经琢磨过要实现的话得采用哪些技术了。比较自然的想法，就是用“假”的 Lazy 函数来替换原有的 Lazy 函数，这样后续的调用过程就可以进行任意的 hack 的了。例如：
function FakeLazy(list) {
var seq = Lazy(list)
return {
map() { /* ... */ },
filter() { /* ... */ },
take() { /* ... */ },
each() { /* ... */ }
}
}
貌似是可以的，也应该是可以的，因为后续的调用实际上是被“劫持”了，我可以把计数的代码添加到回调函数被调用的时候执行，例如：
map(fn) {
var subSeq = seq.map(function(e, i){
mapCount++
return fn(e, i)
})
// ...
}
对于 filter 也要执行类似的处理，而 take、each 则直接调用原有的 seq 对象上的方法就好了。
另外，由于每次调用后都会产生一个新的序列对象（sequence），为了能够正常链接后续的调用，还要继续返回一个新的劫持的序列对象。有点麻烦，不过也能实现。
可以看到，这种“劫持”对象的过程，比较繁琐，不仅要劫持到关心的方法，还得保证对象其他的方法也能正常调用。而在 ES6/ES2015 中，有更好的技术可以采用：Proxy - MDN。
Proxy 这样使用：
var proxy = new Proxy(target, handler);
这样可以得到一个代理对象 proxy，与前面的“劫持”对象类似，在程序中直接使用 proxy 来替代原始的 target 对象。不过 Proxy 对象的强大之处在于，对于该代理对象的各种“请求”，会调用相应的 handler 中传入的回调函数。这样就不需要代理对象实现原始对象的所有功能，只需要处理那些关心的情况。
对于前面的情况，使用 Proxy 可以大致这样处理：
function FakeLazy(list) {
var seq = Lazy(list)
return Proxy(seq, {
get(target, name) {
if (name === 'map' || name === 'filter') {
// 执行处理...
} else {
return target[name] // 不需要处理的情况直接返回原始对象的属性或方法
}
}
})
}
返回的代理对象在被访问任何属性或方法时，都会被拦截，首先调用 handler 中的 get() 方法，这样除了要特殊处理的 map 和 filter，其他的直接返回原有属性或方法。
实现
思路有了，然后就是具体的实现工作了。
首先看下页面处理逻辑，每个 demo 代码块我都包装在一个函数中的，然后将执行代码、执行结果、回调计数结果分别输出到页面上，也就是前面图中的那样。
基本过程为：
var demos = [(Lazy, print) => {
Lazy([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
.map(i => i * 2)
.filter(i => i <= 10)
.take(3)
.each(i => print(i))
}, (Lazy, print) => {
// ...
}/*, ...*/]
demos.forEach(demoFn => {
var el = document.createElement('div')
var soure // 获取执行代码...
var result // 获取执行结果...
var count // 获取回调计数结果...
el.innerHTML = (
renderSource(soure) +
renderResult(result) +
renderCount(count)
)
document.body.appendChild(el)
})
看到这里，已经不耐烦的同学可以直接去 demo 页面上扒代码来看了，相较于我枯燥的描述，代码可能看起来更简单些。
（1）获取执行代码
通过 demoFn.toString() 就可以了，不过需要额外去除函数定义的头尾部分，只在页面展示执行代码。
（2）获取执行结果
通过传入的 print() 来收集执行结果，也不复杂：
var output = []
var print = msg => output.push(msg)
然后将 print 函数传入 demoFn 函数，这样代码执行后输出的结果会被收集到 output 中，然后渲染到页面就可以了。
（3）获取回调计数结果
这个是比较复杂的部分，对应的实现思路就是前面讲的了。不过由于 Lazy.js 中每次方法调用返回的是新的序列对象，要多次生成代理，所以我将生成代理序列对象的代码单独抽出：
// 计数对象
var count = {map: 0, filter: 0}
function proxySeq(seq) {
var handler = {
get(target, name) {
// 特别处理 `map` 和 `filter`
if (name === 'map' || name === 'filter') {
// 返回一个可以实现计数的函数
return fn => {
// 这个 fn 是返回的函数被调用时传入的回调函数，把这个回调
// 函数包装一下再传给原始序列对象的 map 或 filter 方法，
// 从而实现调用计数
var _fn = (v, i) => {
count[name]++ // 计数
return fn(v, i) // 调用回调函数
}
// 仍旧返回一个新的代理对象
return proxySeq(target[name](_fn))
}
} else {
return target[name]
}
}
}
return new Proxy(seq, handler)
}
通过 proxySeq() 来实现一个 FakeLazy：
var _lazy = list => proxySeq(Lazy(list))
和前面的 print 函数一起作为参数来调用 demoFn 函数从而执行代码：
demoFn(_lazy, print)
执行过程中可以收集执行结果和回调函数执行次数，这是借助一个个代理对象来“劫持” map、filter 实现的。
渲染的过程的就是字符串拼接了，不再赘述。
小结
代码胜过万语千言，感兴趣的同学可以去读一下 demo 页面的源码。
最后感叹一下，Lazy.js 的实现还是蛮有意思的，之后我会结合 simply-lazy 分享下惰性求值的实现原理。对了，demo 页面使用的其实是 simply-lazy，而非 Lazy.js。
其实无论是 simply-lazy 还是这里 demo 页面的实现，都有一些不足，例如 demo 页面中其实没有处理 take()，这样后续如果再调用 map 或 filter，就无法计数。不过这些相对于我要介绍的东西而言，不是那么重要，咱们且得鱼忘筌吧。^_^
最后的最后，感谢阅读！
本文来自网易实践者社区，经作者汤康兴授权发布。
