Proxy 實現觀察者模式
阿新 • • 發佈:2018-11-28
以下參考阮老師的《ECMAScript 6 入門》
需求:給定一個物件,當物件的屬性發生賦值時,列印最新的值。
思路: observable 函式返回一個原始物件的 Proxy 代理,攔截賦值操作,觸發充當觀察者的各個函式。
//初始化觀察者佇列
const uniqueObserveList = new Set();
//將監聽回撥加入佇列
const observe = fn => uniqueObserveList.add(fn);
//設定Proxy代理,攔截賦值操作
const observable = obj => new Proxy(obj, {set});
//用來攔截屬性的賦值操作
function set(target, key, value, receiver){
//內部呼叫對應的 Reflect 方法
const result = Reflect.set(target, key, value, receiver);
//額外執行觀察者佇列
uniqueObserveList.forEach( item => item() );
return result;
}
let data = {
name:'hello',
age:30
};
//對data屬性進行監聽
const person = observable (data);
function print(){
console.log( `${person.name}, ${person.age}` );
}
//print作為監聽觸發的回撥函式
observe(print);
person.name = 'world';
結果觸發2次觀察者模式,列印為
world, 30
world, 20