设计模式:观察者模式:
定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使它们能够自动更新自己,当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。
特点
发布 & 订阅
一对多
/**
* 订阅
*/
class Subject{
constructor(){
this.observerList=[];
this.handleDataChange=this.handleDataChange.bind(this);
}
/**
* 初始化代理数据
* @param {*} obj
*/
initData(obj){
let that=this;
const handler = {
set(target, key, value) {
const rets = Reflect.set(target, key, value);
that.handleDataChange(key,value);
return rets;
}
};
let data = new Proxy(obj, handler);
return data;
}
/**
* 数据发生改变 通知
* @param {*} key
* @param {*} value
*/
handleDataChange(key,value){
//遍历 观察者对应的key
this.observerList.map((observer)=>{
if(observer.key===key)
{
observer.update(key,value)
}
})
}
attach(observer){
this.observerList.push(observer);
}
}
/**
* 观察者
*/
class Observer{
/**
*
* @param {*} node dom节点
* @param {*} key
*/
constructor(node,key){
this.key=key;
this.node=node;
}
/**
* 更新
* @param {*} key
* @param {*} value
*/
update(key,value){
console.log(`key${key}发生变化:变化值为${value}`);
//更新dom节点
for(let item of this.node)
{
item.innerHTML=value;
}
}
}
let data={
a:1,
b:2
}
var s=new Subject();
//创建观察者
var ao=new Observer(document.getElementsByTagName('span'),'a');
var bo=new Observer(document.getElementsByTagName('p'),'b');
//被代理的数据
let proxyData=s.initData(data);
//添加观察者
s.attach(ao);
s.attach(bo);
proxyData.a=6;
proxyData.b=7;
在控制台

页面效果

网友评论