vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > effect返回runner单测

effect返回runner单测实现示例详解

作者:IamZJT_

这篇文章主要为大家介绍了effect返回runner单测实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一、 runner 单测

首先介绍一下runner的功能,分以下几点:

至于runner的作用,可以看做是对外暴露ReactiveEffect实例的run方法。

还是先来看一下单测吧,单测用例如下:

it('runner', function () {
  // effect(fn) -> return runner -> runner() == fn() -> return
  let foo = 10;
  const runner = effect(() => {
    foo++;
    return 'foo';
  });
  expect(foo).toBe(11);
  const r = runner();
  expect(foo).toBe(12);
  expect(r).toBe('foo');
});

二、 核心逻辑实现

// + 为新增加的代码。

class ReactiveEffect {
  private _fn: any;
  constructor(fn) {
    this._fn = fn;
  }
  run() {
    activeEffect = this;
    // + 返回fn的返回值
    return this._fn();
  }
}
export function effect(fn) {
  const _effect = new ReactiveEffect(fn);
  _effect.run();
  // + 涉及到run()中this指向的问题,所以需要bind处理一下。
  return _effect.run.bind(_effect);
}

具体实现较为简单,上述代码中也有相应注释,这里就不再赘述了。
再次完整跑一遍effect单测,保证新功能的增加对以往实现功能不造成影响。

单测结果如下:

以上就是effect返回runner单测实现示例详解的详细内容,更多关于effect返回runner单测的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文