представлять
Обычно в шаблоне наблюдателя есть две модели: наблюдатель (observer) и наблюдаемый (Observed). В буквальном смысле, то есть когда происходит наблюдаемое поведение или изменение, наблюдатель будет уведомлен, и наблюдатель будет иметь дело с поведением или изменением. Так как же это работает? Далее мы используемJavaScriptКод реализует шаблон наблюдателя, как показано на следующем рисунке 👇.
выполнить
JS-реализация паттерна Observer
let observer_ids=0;
let observed_ids=0;
//观察者类
class Observer {
constructor() {
this.id = observer_ids++;
}
//观测到变化后的处理
update(ob){
console.log("观察者" + this.id + `-检测到被观察者${ob.id}变化`);
}
}
//被观察者列
class Observed {
constructor() {
this.observers = [];
this.id=observed_ids++;
}
//添加观察者
addObserver(observer) {
this.observers.push(observer);
}
//删除观察者
removeObserver(observer) {
this.observers = this.observers.filter(o => {
return o.id != observer.id;
});
}
//通知所有的观察者
notify() {
this.observers.forEach(observer => {
observer.update(this);
});
}
}
let mObserved=new Observed();
let mObserver1=new Observer();
let mObserver2=new Observer();
mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);
mObserved.notify();
Выход
Наблюдатель 0 - Обнаружено наблюдаемое 0 изменение
Наблюдатель 1 - Обнаружено изменение Observed 0
Модифицируем код исполнения, добавляем и удаляем код наблюдателя,
let mObserved=new Observed();
let mObserver1=new Observer();
let mObserver2=new Observer();
let mObserver3=new Observer();
mObserved.addObserver(mObserver1);
mObserved.addObserver(mObserver2);
mObserved.addObserver(mObserver3);
mObserved.removeObserver(mObserver2);
mObserved.notify();
Выход
Наблюдатель 0 - Обнаружено наблюдаемое 0 изменение
расширять
class Teacher extends Observer{
constructor(name){
super();
this.name=name;
}
update(st){
// super.update(st);
console.log(st.name+`提交了${this.name}作业`);
}
}
class Student extends Observed{
constructor(name){
super();
this.name=name;
}
submitHomeWork(){
this.notify(this)
}
}
let teacher1=new Teacher("数学");
let teacher2=new Teacher("语文");
let stu1=new Student("小玲");
let stu2=new Student("小明");
let stu3=new Student("小李");
stu1.addObserver(teacher1);
stu1.addObserver(teacher2);
stu2.addObserver(teacher1);
stu2.addObserver(teacher2);
stu3.addObserver(teacher1);
stu3.addObserver(teacher2);
stu1.submitHomeWork();
stu2.submitHomeWork();
stu3.submitHomeWork();
Линка представила языковую работу
Сяо Мин отправил домашнее задание по языку
Сяо Ли отправил домашнее задание по математике
Сяо Ли отправил домашнее задание по китайскому языку
Опубликовать шаблон подписчика
注意：上面关于发布订阅者模式的描述并不正确，下面进行更正。
observedЗанятия проводятсяobserverОбъект, и поэтому не добился полного развязки двух классов. Добавив слой диспетчерского центра среднего класса, что я могу подписаться и издателями, полностью отделен, оба больше не имеют прямой корреляции, а связующим центром диспетчера. Здесь мы продолжаем достигать подписчиков режима выпуска.
//发布者
class Pub{
constructor(dispatcher){
this.dispatcher=dispatcher;
this.id=observed_ids++;
}
/**
* @description: 发布方法
* @param {type} 通知类型
*/
publish(type){
this.dispatcher.publish(type,this)
}
}
//订阅者
class Subscriber{
constructor(dispatcher){
this.dispatcher=dispatcher;
this.id=observer_ids++;
}
subscribe(type){
this.dispatcher.subscribe(type,this);
}
doUpdate(type,arg){
console.log("接受到消息"+arg)
}
}
//调度中心
class Dispatcher{
constructor(){
this.dispatcher={};
}
//订阅
subscribe(pub,subscriber){
if(!this.dispatcher[pub.id]){
this.dispatcher[pub.id]=[];
}
this.dispatcher[pub.id].push(subscriber);
}
//退订
unsubscribe(pub, subscriber) {
let subscribers = this.dispatcher[type];
if (!subscribers || !subscribers.length) return;
this.dispatcher[type] = subscribers.filter(item =>{
return item.id !== subscriber.id
});
}
//发布
publish(type, args) {
let subscribers = this.dispatcher[type];
if (!subscribers || !subscribers.length) return;
subscribers.forEach(subscriber=>{
subscriber.doUpdate(type,args);
});
}
}
class Reader extends Subscriber{
constructor(name,dispatcher){
super(dispatcher);
this.name=name;
}
doUpdate(type,st){
// super.update(st);
console.log(this.name+`阅读了--${type}--公众号的文章`);
}
}
class WeiX extends Pub{
constructor(name,dispatcher){
super(dispatcher);
this.name=name;
}
publishArticle(type){
this.publish(type)
}
}
let dispatcher=new Dispatcher();
//公众号
let wei1=new WeiX("前端",dispatcher);
let wei2=new WeiX("数据库",dispatcher);
//读者们
let reader1=new Reader("小玲",dispatcher);
let reader2=new Reader("小明",dispatcher);
let reader3=new Reader("小李",dispatcher);
//读者订阅公众号
reader1.subscribe("前端");
reader2.subscribe("数据库");
reader3.subscribe("数据库");
//公众号发布文章
wei1.publishArticle("前端");
wei1.publishArticle("数据库");
Результаты приведены ниже:
Линда прочитал - фронт - артикул номер общественности
Xiao Ming Read - База данных - Публичный номер
Сяо Ли прочитал -- базу данных -- статью общественного мнения
С помощью приведенного выше кода мы создали простую модель публикации-подписки, но обнаружилиPubЭтот класс не кажется необходимым, потому что этот класс на самом деле просто вызывает диспетчерский центр.Dispatcherизpublishметод. Таким образом, мы можем упростить приведенный выше код.
let ids=0;
let observer_ids=0;
//订阅者
class Subscriber{
constructor(dispatcher){
this.dispatcher=dispatcher;
this.id=observer_ids++;
}
subscribe(type){
this.dispatcher.subscribe(type,this);
}
doUpdate(type,arg){
console.log("接受到消息"+arg)
}
}
//调度中心
class Dispatcher{
constructor(){
this.dispatcher={};
this.id=ids++;
}
//订阅
subscribe(type,subscriber){
if(!this.dispatcher[type]){
this.dispatcher[type]=[];
}
this.dispatcher[type].push(subscriber);
}
//退订
unsubscribe(type, subscriber) {
let subscribers = this.dispatcher[type];
if (!subscribers || !subscribers.length) return;
this.dispatcher[type] = subscribers.filter(item =>{
return item.id !== subscriber.id
});
}
//发布
publish(type, args) {
let subscribers = this.dispatcher[type];
if (!subscribers || !subscribers.length) return;
subscribers.forEach(subscriber=>{
subscriber.doUpdate(type,args);
});
}
}
class Reader extends Subscriber{
constructor(name,dispatcher){
super(dispatcher);
this.name=name;
}
doUpdate(type,st){
// super.update(st);
console.log(this.name+`阅读了--${type}--公众号的文章`);
}
}
class WeiX extends Dispatcher{
constructor(name){
super();
this.name=name;
}
publishArticle(type){
this.publish(type)
}
}
//微信公众号平台
let wx1=new WeiX();
//读者们
let reader1=new Reader("小玲",wx1);
let reader2=new Reader("小明",wx1);
let reader3=new Reader("小李",wx1);
//读者订阅公众号
reader1.subscribe("前端");
reader2.subscribe("数据库");
reader3.subscribe("数据库");
//公众号发布文章
wx1.publishArticle("前端");
wx1.publishArticle("数据库");
наконец
Вышесказанное является моим собственным пониманием шаблона наблюдателя после прочтения соответствующих глав «Дзен шаблонов проектирования».Если есть что-то неуместное, пожалуйста, поправьте меня!
благодарныйfengweiПроблема в тексте, я исправлю режим наблюдателя и выпустите описания аборов абонентов!