Javascript-Entwurfsmuster Beobachtermuster (empfohlen)_Javascript-Kenntnisse-js-Tutorial-php.cn

Javascript-Entwurfsmuster Beobachtermuster (empfohlen)_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:07:51

Original

1408 Leute haben es durchsucht

Empfohlene Lektüre: JavaScript Observer Pattern (klassisch)

1. Was ist das Beobachtermuster

Das Beobachtermuster wird manchmal als Publish-Subscribe-Muster bezeichnet. Im Beobachtermuster gibt es einen Beobachter, der alle Ziele verwalten und Benachrichtigungen ausgeben kann, wenn sich der Status ändert. (Tatsächlich gilt das gleiche Prinzip für das Veröffentlichen und Abonnieren in SQL Server)

2. Beliebte Erklärung

Wenn die Dorfübertragung in der Vergangenheit ein Beobachter war, wäre jeder Dorfbewohner Gegenstand der Beobachtung. Wenn es im Dorf eine Ankündigung gibt und sich die Richtlinien ändern, müssen die Nachrichten über die Übertragung bekannt gegeben werden, anstatt direkt zu gehen an jedes Haus. Führen Sie es aus, um eine Benachrichtigung zu senden.

3. Code

<!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) {//发布信息 
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>

Nach dem Login kopieren

Während ich dies schreibe, wurde das Beobachtermuster implementiert, aber es kann mehrere Dörfer geben, die dieses Muster benötigen, daher werden wir hier den Beobachter in einen Konstruktor umwandeln

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>观察者模式</title> 
</head> 
<body> 
<script> 
function Observer(){//观察者，这里采用构造函数，可以对不同村落进行使用 
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) {//发布信息 
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>

Nach dem Login kopieren

Der Herausgeber wird Ihnen hier den Beobachtermodus des Javascript-Designmusters vorstellen. Ich hoffe, er wird Ihnen hilfreich sein!