快捷導(dǎo)航

Javascript設(shè)計(jì)模式之觀察者模式(推薦)

更新時(shí)間：2016年03月29日 09:33:01 作者：cangowu

觀察者模式有時(shí)也稱為發(fā)布--訂閱模式，在觀察者模式中，有一個(gè)觀察者可以管理所有的目標(biāo)，等到有狀態(tài)發(fā)生改變的時(shí)候發(fā)出通知

1.什么是觀察者模式

觀察者模式有時(shí)也稱為發(fā)布--訂閱模式，在觀察者模式中，有一個(gè)觀察者可以管理所有的目標(biāo)，等到有狀態(tài)發(fā)生改變的時(shí)候發(fā)出通知。（其實(shí)sql server中的發(fā)布訂閱也是這個(gè)道理）

2.通俗解釋

假如以前村里的廣播是一個(gè)觀察者，那么每個(gè)村民就是被觀察對(duì)象，如果村子里有通知，政策發(fā)生改變的時(shí)候，就需要通過(guò)廣播把這個(gè)消息發(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) {//這里將村子建一個(gè)這種廣播方式 
for (var i in this) { 
o[i] = this[i]; 
} 
} 
}; 
var village1 = {}; 
observer.make(village1);//將村子1建立這種觀察者模式 
var villager11 = { 
read: function (what) { 
console.log('我是第一個(gè)村子的第一個(gè)村名：' + what); 
} 
}; 
var villager12 = { 
read: function (what) { 
console.log('我是第一個(gè)村子的第二個(gè)村名：'+what); 
} 
}; 
village1.addVillager(villager11.read); 
village1.addVillager(villager12.read); 
village1.publish('大家來(lái)開會(huì)呀！?。?); 
village1.removeVillager(villager11.read); 
village1.publish('大家來(lái)開會(huì)呀?。?！'); 
/* 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('我是第二個(gè)村子的第一個(gè)村名：' + what); 
} 
}; 
var villager22 = { 
read: function (what) { 
console.log('我是第二個(gè)村子的第二個(gè)村名：'+what); 
} 
}; 
village2.myAddVillager(villager21.read); 
village2.myAddVillager(villager22.read); 
village2.myPublish('大家來(lái)領(lǐng)豬肉了！??！');*/ 
</script> 
</body> 
</html>

寫到這里觀察者模式實(shí)現(xiàn)了，但是可能會(huì)有多個(gè)村子需要這種模式，那我們這里將observer改造成構(gòu)造函數(shù)的方式

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>觀察者模式</title> 
</head> 
<body> 
<script> 
function Observer(){//觀察者，這里采用構(gòu)造函數(shù)，可以對(duì)不同村落進(jìn)行使用 
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) {//這里將村子建一個(gè)這種廣播方式 
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('我是第一個(gè)村子的第一個(gè)村名：' + what); 
} 
}; 
var villager12 = { 
read: function (what) { 
console.log('我是第一個(gè)村子的第二個(gè)村名：'+what); 
} 
}; 
village1.addVillager(villager11.read); 
village1.addVillager(villager12.read); 
village1.publish('大家來(lái)開會(huì)呀?。?！'); 
village1.removeVillager(villager11.read); 
village1.publish('大家來(lái)開會(huì)呀?。。?); 
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('我是第二個(gè)村子的第一個(gè)村名：' + what); 
} 
}; 
var villager22 = { 
read: function (what) { 
console.log('我是第二個(gè)村子的第二個(gè)村名：'+what); 
} 
}; 
village2.myAddVillager(villager21.read); 
village2.myAddVillager(villager22.read); 
village2.myPublish('大家來(lái)領(lǐng)豬肉了?。。?); 
</script> 
</body> 
</html>

有關(guān)Javascript設(shè)計(jì)模式之觀察者模式小編就給大家介紹到這里，希望對(duì)大家有所幫助！

您可能感興趣的文章: