观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。这里,我们是使用es6的proxy及reflect来实现这个效果。
实现效果
业务分析
- 源数据
const object2 = {name: "张三",age: 20,
};
- 包装源数据的方法
function observable(object) {return new Proxy(object, {get(object, key) {console.log(`你访问了${key}`);return Reflect.get(object, key);},set(object, key, value) {const result = Reflect.set(object, key, value);// 触发更新for (const observer of queuedObservers) {observer();}return result;},});
}
- 包装数据
// 数据监听
const person = observable(object2);
- 收集依赖,哪里在使用这个数据
const queuedObservers = new Set();const observe = (callback) => {queuedObservers.add(callback);
};//这里就是依赖
function print() {console.log(`${person.name}今年${person.age}岁`);
}
// 收集依赖
observe(print);
- 改变数据,触发更新即可
person.age= 400