借助 Proxy 实现回调函数执行计数
发布在luobo 技术笔记2016年12月4日view:2105前端开发BrettBatBetti
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

背景

最近在做一个简化版的 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 中的回调函数也尽可能少地被调用,可以看下统计出的回调函数的调用次数:

Paste_Image.png

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 * 2i => 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,就无法计数。不过这些相对于我要介绍的东西而言,不是那么重要,咱们且得鱼忘筌吧。^_^

最后的最后,感谢阅读!

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
luobo 技术笔记

日常学习、思考记录

友情链接 大搜车前端团队博客
我的收藏