Javascript设计模式之观察者模式(推荐)
推荐阅读：JavaScript观察者模式(经典)
1.什么是观察者模式
观察者模式有时也称为发布--订阅模式，在观察者模式中，有一个观察者可以管理所有的目标，等到有状态发生改变的时候发出通知。（其实sqlserver中的发布订阅也是这个道理）
2.通俗解释
假如以前村里的广播是一个观察者，那么每个村民就是被观察对象，如果村子里有通知，政策发生改变的时候，就需要通过广播把这个消息发布出去，而不用直接一家家的跑去发通知。
3.代码
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>观察者模式</title>
</head>
<body>
<script>
varobserver={//观察者
villagers:[],//村名
addVillager:function(callback){//增加村名
this.villagers[this.villagers.length]=callback;
},
removeVillager:function(callback){//移除村名
for(vari=0;i<this.villagers.length;i++){
if(this.villagers[i]===callback){
deletethis.villagers[i];
}
}
},
publish:function(info){//发布信息
for(vari=0;i<this.villagers.length;i++){
if(typeofthis.villagers[i]==='function'){
this.villagers[i](info);
}
}
},
make:function(o){//这里将村子建一个这种广播方式
for(variinthis){
o[i]=this[i];
}
}
};
varvillage1={};
observer.make(village1);//将村子1建立这种观察者模式
varvillager11={
read:function(what){
console.log('我是第一个村子的第一个村名：'+what);
}
};
varvillager12={
read:function(what){
console.log('我是第一个村子的第二个村名：'+what);
}
};
village1.addVillager(villager11.read);
village1.addVillager(villager12.read);
village1.publish('大家来开会呀！！！');
village1.removeVillager(villager11.read);
village1.publish('大家来开会呀！！！');
/*varvillage2={
myAddVillager:function(callback){
this.addVillager(callback);
},
myRemoveVillager:function(callback){
this.removeVillager(callback);
},
myPublish:function(info){
this.publish(info);
}
};
observer.make(village2);//将村子1建立这种观察者模式
varvillager21={
read:function(what){
console.log('我是第二个村子的第一个村名：'+what);
}
};
varvillager22={
read:function(what){
console.log('我是第二个村子的第二个村名：'+what);
}
};
village2.myAddVillager(villager21.read);
village2.myAddVillager(villager22.read);
village2.myPublish('大家来领猪肉了！！！');*/
</script>
</body>
</html>
写到这里观察者模式实现了，但是可能会有多个村子需要这种模式，那我们这里将observer改造成构造函数的方式
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>观察者模式</title>
</head>
<body>
<script>
functionObserver(){//观察者，这里采用构造函数，可以对不同村落进行使用
if(!(thisinstanceofObserver)){
returnnewObserver();
}
this.villagers=[];
};
Observer.prototype={
//villagers:[],//村名
addVillager:function(callback){//增加村名
this.villagers[this.villagers.length]=callback;
},
removeVillager:function(callback){//移除村名
for(vari=0;i<this.villagers.length;i++){
if(this.villagers[i]===callback){
deletethis.villagers[i];
}
}
},
publish:function(info){//发布信息
for(vari=0;i<this.villagers.length;i++){
if(typeofthis.villagers[i]==='function'){
this.villagers[i](info);
}
}
},
make:function(o){//这里将村子建一个这种广播方式
for(variinthis){
o[i]=this[i];
}
}
}
varvillage1={};
varobserver1=newObserver();
observer1.make(village1);//将村子1建立这种观察者模式
varvillager11={
read:function(what){
console.log('我是第一个村子的第一个村名：'+what);
}
};
varvillager12={
read:function(what){
console.log('我是第一个村子的第二个村名：'+what);
}
};
village1.addVillager(villager11.read);
village1.addVillager(villager12.read);
village1.publish('大家来开会呀！！！');
village1.removeVillager(villager11.read);
village1.publish('大家来开会呀！！！');
varvillage2={
myAddVillager:function(callback){
this.addVillager(callback);
},
myRemoveVillager:function(callback){
this.removeVillager(callback);
},
myPublish:function(info){
this.publish(info);
}
};
varobserver2=newObserver();
observer2.make(village2);//将村子1建立这种观察者模式
varvillager21={
read:function(what){
console.log('我是第二个村子的第一个村名：'+what);
}
};
varvillager22={
read:function(what){
console.log('我是第二个村子的第二个村名：'+what);
}
};
village2.myAddVillager(villager21.read);
village2.myAddVillager(villager22.read);
village2.myPublish('大家来领猪肉了！！！');
</script>
</body>
</html>
有关Javascript设计模式之观察者模式小编就给大家介绍到这里，希望对大家有所帮助！