이 글에서는 게시-구독 및 관찰자 패턴을 소개하고 둘 사이의 차이점에 대해 설명합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

얼마 전에 Promise를 구독 퍼블리싱 모델로 쓴 적이 있습니다. 제가 직장에서 개발하는 mobx도 관찰자 모델입니다. 둘 사이의 차이점에 대해 생각했습니다. 온라인의 차이점 분석은 혼란스럽습니다. 내 자신의 요약과 가장 간단한 구현(간단하기 때문에 이해하기 쉽습니다)을 모아서 두 가지에 대한 이해를 공유하고 심화해 보겠습니다.
1. 구현 아이디어
arr 구독된 이벤트에 대한 캐시 센터 역할을 합니다
on- 이벤트가 트리거될 때까지 기다릴 때 실행 이벤트를 순차적으로 발생시킵니다
-
- 2. 코드 구현.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | interface eventHub {
arr: Array<Function>;
on(fn: Function): void;
emit(): void;
}
interface Person {
age: number;
name: string;
}
let eventHub: eventHub = {
arr: [] as Array<Function>,
on(fn: Function) {
this.arr.push(fn);
},
emit() {
this.arr.forEach((fn) => fn());
},
};
let person: Person = {} as Person;
eventHub.on(() => {
if (Object.keys(person).length == 2) {
console.log(person);
}
});
setTimeout( function () {
person.age = 27;
eventHub.emit();
}, 10);
setTimeout( function () {
person.name = "Zoe" ;
eventHub.emit();
}, 20);
|
로그인 후 복사
3. 결과
두 번이나 퍼블리싱했지만 결국 외부 조건으로 인해 on에 있는 콘솔은 한 번만 실행되었습니다
관찰자 모드
1.
관찰자 모드와 유사하지만 필요합니다. 관찰자를 관찰자로 나누어 관찰자와 관계를 맺습니다.
관찰자와 관찰자가 관련되어 있습니다. (내부적으로 게시 및 구독 모델 기반)
2. 코드 구현1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | class Subject {
name: string;
state: string;
observers: any[];
constructor(name:string) {
this.name = name;
this.observers = [];
this.state = "" ;
}
attach(o) {
this.observers.push(o);
}
setState(newState) {
this.state = newState;
this.observers.forEach((o) => o.update(this));
}
}
class Observer {
name: string;
constructor(name) {
this.name = name;
}
update(interviewee) {
console.log(`${interviewee.name} say to: ${this.name} ZOE的${interviewee.state}`);
}
}
let hr = new Subject( "HR" );
let observer1 = new Observer( "内推者" );
let observer2 = new Observer( "面试者" );
hr.attach(observer1);
hr.attach(observer2);
hr.setState( "面试通过了" );
|
로그인 후 복사
3. 구현 결과
둘의 차이점
eventHub 게시와 구독
on(구독)과 게시(발송) 사이에는 직접적인 관련이 없습니다. . 그들은 중간에 있는 arr을 사용하여 한 번의 푸시를 arr에 연결하고 순차적으로 방출합니다. arr
관찰자와 관찰자 사이에 연관성이 있습니다(내부적으로 게시-구독 기반). mode)Observer의 인스턴스를 Observed의 Attach 메소드에 매개변수로 전달하고 캐시합니다. Observer 배열에서
Observer가 setState일 때 캐시 배열 Observer의 업데이트 메소드가 호출됩니다. 시퀀스-
- 더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 비디오- 를 방문하세요! !
위 내용은 게시, 구독 및 관찰자 패턴에 대해 간략하게 설명하고 둘 사이의 차이점에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!