返回顶部
首页 > 资讯 > 前端开发 > JavaScript >effect返回runner单测实现示例详解
  • 770
分享到

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

effect返回runner单测effect runner 2022-12-08 20:12:45 770人浏览 八月长安
摘要

目录一、 runner 单测二、 核心逻辑实现一、 runner 单测 首先介绍一下runner的功能,分以下几点: effect(fn)执行会返回一个runner函数;执行run

一、 runner 单测

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

  • effect(fn)执行会返回一个runner函数;
  • 执行runner,相当于重新执行一遍effect里面传入的fn(原始依赖);
  • 最后runner的返回值就是fn的返回值。

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

  • 一方面是为了可以手动调用触发依赖;
  • 另一方面,也是为了和stop结合使用,来手动控制响应式的生效与失效;
    具体点就是:使用者可以手动执行runner()来控制副作用函数的生效 和 执行stop(runner)也就是runner.effect.stop()使之失效,具体stop的实现实现后面再说。

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

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单测的资料请关注编程网其它相关文章!

--结束END--

本文标题: effect返回runner单测实现示例详解

本文链接: https://lsjlt.com/news/174422.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作