觀察者模式有時也稱為發(fā)布--訂閱模式，在觀察者模式中，有一個觀察者可以管理所有的目標，等到有狀態(tài)發(fā)生改變的時候發(fā)出通知
1.什么是觀察者模式
觀察者模式有時也稱為發(fā)布--訂閱模式，在觀察者模式中，有一個觀察者可以管理所有的目標，等到有狀態(tài)發(fā)生改變的時候發(fā)出通知。（其實sql server中的發(fā)布訂閱也是這個道理）
2.通俗解釋
假如以前村里的廣播是一個觀察者，那么每個村民就是被觀察對象，如果村子里有通知，政策發(fā)生改變的時候，就需要通過廣播把這個消息發(fā)布出去，而不用直接一家家的跑去發(fā)通知。
3.代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>觀察者模式</title>
</head>
<body>
<script>
var observer = {//觀察者
villagers: [],//村名
addVillager: function (callback) {//增加村名
this.villagers[this.villagers.length] = callback;
},
removeVillager: function (callback) {//移除村名
for (var i = 0; i < this.villagers.length; i++) {
if (this.villagers[i] === callback) {
delete this.villagers[i];
}
}
},
publish: function (info) {//發(fā)布信息
for (var i = 0; i < this.villagers.length; i++) {
if (typeof this.villagers[i] === 'function') {
this.villagers[i](info);
}
}
},
make: function (o) {//這里將村子建一個這種廣播方式
for (var i in this) {
o[i] = this[i];
}
}
};
var village1 = {};
observer.make(village1);//將村子1建立這種觀察者模式
var villager11 = {
read: function (what) {
console.log('我是第一個村子的第一個村名：' + what);
}
};
var villager12 = {
read: function (what) {
console.log('我是第一個村子的第二個村名：'+what);
}
};
village1.addVillager(villager11.read);
village1.addVillager(villager12.read);
village1.publish('大家來開會呀?。。?);
village1.removeVillager(villager11.read);
village1.publish('大家來開會呀?。。?);
/* var village2 = {
myAddVillager:function(callback){
this.addVillager(callback);
},
myRemoveVillager:function(callback){
this.removeVillager(callback);
},
myPublish:function(info){
this.publish(info);
}
};
observer.make(village2);//將村子1建立這種觀察者模式
var villager21 = {
read: function (what) {
console.log('我是第二個村子的第一個村名：' + what);
}
};
var villager22 = {
read: function (what) {
console.log('我是第二個村子的第二個村名：'+what);
}
};
village2.myAddVillager(villager21.read);
village2.myAddVillager(villager22.read);
village2.myPublish('大家來領豬肉了?。。?);*/
</script>
</body>
</html>
寫到這里觀察者模式實現(xiàn)了，但是可能會有多個村子需要這種模式，那我們這里將observer改造成構造函數(shù)的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>觀察者模式</title>
</head>
<body>
<script>
function Observer(){//觀察者，這里采用構造函數(shù)，可以對不同村落進行使用
if(!(this instanceof Observer)){
return new Observer();
}
this.villagers = [];
};
Observer.prototype = {
// villagers: [],//村名
addVillager: function (callback) {//增加村名
this.villagers[this.villagers.length] = callback;
},
removeVillager: function (callback) {//移除村名
for (var i = 0; i < this.villagers.length; i++) {
if (this.villagers[i] === callback) {
delete this.villagers[i];
}
}
},
publish: function (info) {//發(fā)布信息
for (var i = 0; i < this.villagers.length; i++) {
if (typeof this.villagers[i] === 'function') {
this.villagers[i](info);
}
}
},
make: function (o) {//這里將村子建一個這種廣播方式
for (var i in this) {
o[i] = this[i];
}
}
}
var village1 = {};
var observer1 = new Observer();
observer1.make(village1);//將村子1建立這種觀察者模式
var villager11 = {
read: function (what) {
console.log('我是第一個村子的第一個村名：' + what);
}
};
var villager12 = {
read: function (what) {
console.log('我是第一個村子的第二個村名：'+what);
}
};
village1.addVillager(villager11.read);
village1.addVillager(villager12.read);
village1.publish('大家來開會呀?。?！');
village1.removeVillager(villager11.read);
village1.publish('大家來開會呀?。?！');
var village2 = {
myAddVillager:function(callback){
this.addVillager(callback);
},
myRemoveVillager:function(callback){
this.removeVillager(callback);
},
myPublish:function(info){
this.publish(info);
}
};
var observer2 = new Observer();
observer2.make(village2);//將村子1建立這種觀察者模式
var villager21 = {
read: function (what) {
console.log('我是第二個村子的第一個村名：' + what);
}
};
var villager22 = {
read: function (what) {
console.log('我是第二個村子的第二個村名：'+what);
}
};
village2.myAddVillager(villager21.read);
village2.myAddVillager(villager22.read);
village2.myPublish('大家來領豬肉了！?。?);
</script>
</body>
</html>
有關Javascript設計模式之觀察者模式小編就給大家介紹到這里，希望對大家有所幫助！