第六章 effect.scheduler功能实现

effect.scheduler功能实现

主要先了解scheduler需要实现什么样的需求，有一下四点：

1 通过 effect 的第二个参数给定一个 scheduler 的 fn

2 effect 第一次执行的时候 还会执行 fn

3 当 响应式对象 set update 不执行fn 而是执行 scheduler

4 如果说当执行 runner 的时候 会再次执行 fn

清楚了scheduler需求后，照旧先来看测试案例，通过测试案例来驱动代码开发：

it("scheduler",()=>{
        // 1 通过 effect 的第二个参数给定一个 scheduler 的 fn
        // 2 effect 第一次执行的时候 还会执行 fn
        // 3 当 响应式对象 set update 不执行fn 而是执行 scheduler
        // 4 如果说当执行 runner 的时候 会再次执行 fn
        let dummy
        let run:any
        const scheduler = jest.fn(()=>{
           run = runner
        })
        const obj = reactive({foo:1})
        const runner = effect(()=>{
            dummy = obj.foo
        },
        { scheduler })
        expect(scheduler).not.toHaveBeenCalled()
        expect(dummy).toBe(1)
        obj.foo++
        expect(scheduler).toHaveBeenCalledTimes(1)
        run()
        expect(dummy).toBe(2)
    })

在测试用例中我们就可以看到，我们往effect中传入了第二个参数options，并且在options中有scheduler函数，所以我们就可以在effect中接受到我们传入的options：

接下来我分别一截图的方式展示增加的代码并且附上解释：

effect实例中存储scheduler：

当 响应式对象 set update 执行 scheduler

最后

附上trigger完整代码：

export function trigger(target,key){
    const depsMap = targetMap.get(target)
    const dep = depsMap.get(key)
    for (const effect of dep) {
        if(effect.scheduler){
            effect.scheduler()
        } else {
            effect.run()
        }
    }

}

附上effect完整代码：

export function effect(fn,options:any = {}){
    const _effect = new ReactiveEffect(fn,options.scheduler)

    _effect.run()

    return _effect.run.bind(_effect)
}