Javascript 디자인 모드 의 관찰자 모드 (추천)

추천 읽 기: JavaScript 관찰자 모드 (고전)
1. 관찰자 모드 란 무엇 인가
관찰자 모드 는 게시 - 구독 모드 라 고도 부 르 는데 관찰자 모드 에서 한 관찰자 가 모든 목 표를 관리 하고 상태 가 바 뀔 때 알림 을 보 낼 수 있다.(사실 sql server 의 게시 구독 도 이 렇 습 니 다)
2. 통속 적 인 해석
만약 에 예전 에 마을 의 방송 이 관찰자 라면 모든 마을 사람들 이 관찰 대상 이 었 다. 만약 에 마을 에 통지 가 있 으 면 정책 이 바 뀌 었 을 때 방송 을 통 해 이 소식 을 발표 해 야 한다. 직접 한 집 이 달 려 가서 통 지 를 하지 않 아 도 된다.
3. 코드

 
 
 
 
 
 
 
 
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('       ！！！');*/ 
 
 
 

여기까지 썼 습 니 다. 관찰자 모드 가 실현 되 었 지만 여러 마을 이 이런 모델 을 필요 로 할 수도 있 습 니 다. 그러면 우 리 는 observer 를 구조 함수 로 개조 하 는 방식 입 니 다.

 
 
 
 
 
 
 
 
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('       ！！！'); 
 
 
 

자 바스 크 립 트 디자인 모델 에 대한 관찰자 모델 소 편 은 여기까지 소개 해 드 리 겠 습 니 다. 도움 이 되 셨 으 면 좋 겠 습 니 다!