当前位置：网站首页>Track and trigger

Track and trigger

2022-04-21 22:44:00 【hamimelon2020】 

<!DOCTYPE html>
<html>
    <head>
        <title>document.write() Example</title>
    </head>
    <body>
        <script type="text/javascript">       
const data = {
    ok:true, text:'hello world'}
const bucket = new WeakMap()

let activeEffect
function effect(fn) {
    
    const effectFn = () => {
    
        activeEffect = effectFn
        fn()
    }
    effectFn.deps = []
    effectFn()
}

const obj = new Proxy(data, {
    
    get(target, key) {
    
        //  Collect side effect functions 
        track(target, key);
        console.log(target[key])
        return target[key]
    },
    set(target, key, newVal) {
    
        target[key] = newVal;
        //  Remove side effects and perform 
        trigger(target, key);
    }
})

//  encapsulation track function , Tracking changes 
function track(target, key) {
    
    if (!activeEffect) return
    let depsMap = bucket.get(target)
    //console.log(depsMap)
    console.log(bucket)
    if (!depsMap) {
    
        bucket.set(target, (depsMap = new Map()))
    }
    let deps = depsMap.get(key)
    if (!deps) {
    
        depsMap.set(key, (deps = new Set()))
    }
    deps.add(activeEffect)
    activeEffect.deps.push(deps)
}

//  encapsulation trigger function , Trigger the deputy general manager to re execute with the function 
function trigger(target, key) {
     
    const depsMap = bucket.get(target)
    if (!depsMap) return
    const effects = depsMap.get(key)
    console.log(effects)
    effects && effects.forEach(fn => fn())
}

effect(function effectFn(){
    
   // console.log('effectFn');
    document.body.innerText = obj.ok ? obj.text : 'not'
})


setTimeout(() => {
    
    obj.ok = false //  Print  effectFn
},2000)

console.log(effects)



             </script> 
    </body>

</html>

版权声明
本文为[hamimelon2020]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204212037094183.html

边栏推荐

猜你喜欢

随机推荐