effect返回runner单测实现示例详解
作者:IamZJT_
这篇文章主要为大家介绍了effect返回runner单测实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
一、 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单测的资料请关注脚本之家其它相关文章!