41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
const targetMap = new WeakMap() // 用原始对象作为key，依赖映射作为value
|
||
|
||
function track(target, key) {
|
||
let depsMap = targetMap.get(target)
|
||
if(!depsMap) {
|
||
targetMap.set(target, (depsMap = new Map()))
|
||
}
|
||
let dep = depsMap.get(key)
|
||
if(!dep){
|
||
depsMap.set(key, (dep=new Set()))
|
||
}
|
||
dep.add(effect)
|
||
}
|
||
|
||
function trigger(target, key) {
|
||
const depsMap = targetMap.get(target)
|
||
if(!depsMap) return
|
||
const deps = depsMap.get(key)
|
||
deps.forEach(effect => {
|
||
effect()
|
||
});
|
||
}
|
||
|
||
|
||
// 测试
|
||
let product = {price: 5, quantity: 2}
|
||
let total = 0
|
||
let effect = ()=>{ // 副作用函数
|
||
total = product.price * product.quantity
|
||
}
|
||
track(product, 'quantity') // 跟踪这个key，并记录副作用函数
|
||
effect() // 首次执行副作用函数
|
||
|
||
console.log(total);
|
||
product.quantity = 3
|
||
trigger(product, 'quantity') // 重新触发所有副作用
|
||
console.log(total);
|
||
|
||
/* 当数量发生变化时，对应的total也要发生变化，这个计算是由副作用函数负责计算的，
|
||
只要保存这个副作用，当与之关联的数据发生变化时执行副作用就行了。
|
||
*/ |