아래 편집기는 관찰자 패턴의 JavaScript 기본 구현 예를 여러분과 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터를 따라가서 살펴볼까요
관찰자 패턴은 게시-구독 패턴이라고도 합니다. 이는 일대다 관계를 정의하여 여러 관찰자 개체가 동시에 특정 주제 개체를 모니터링할 수 있도록 하며 상태를 모니터링합니다. 주제 개체가 변경되면 모든 관찰 개체에 알림이 전송됩니다. 토픽(topic)과 옵저버(observer)라는 두 가지 유형의 객체로 구성되며, 옵저버는 이러한 이벤트를 구독하여 주체를 관찰합니다. 게시자와 구독자는 완전히 분리되어 상대방의 존재를 알 수 없습니다. . 맞춤 이벤트의 이름을 공유하세요.
Nodejs에서는 이 모드에 대한 기본 지원이 EventEmitter를 통해 구현됩니다.
JavaScript의 이벤트 청취 메커니즘은 관찰자 패턴으로 이해될 수 있습니다. onclick을 통해 이벤트를 바인딩한 다음 대화형 동작을 통해 트리거하거나 이벤트를 적극적으로 트리거합니다.
다음은 JS 맞춤형 PubSub입니다. 다음 코드를 주의 깊게 읽으면 관찰자 패턴을 이해하는 데 도움이 됩니다.
1은 옵저버 클래스 PubSub
/* Pubsub */ function Pubsub(){ //存放事件和对应的处理方法 this.handles = {}; }
2를 정의합니다. 코드 shift.call(arguments)에서 인수 객체는 함수의 내장 객체이며, 메소드를 호출할 때 전달된 실제 매개변수 그룹을 얻을 수 있습니다. shift 메소드는 배열의 첫 번째 매개변수인 유형 유형을 가져옵니다.
4. 이벤트 구독 취소 끄기 구현
//传入事件类型type和事件处理handle on: function (type, handle) { if(!this.handles[type]){ this.handles[type] = []; } this.handles[type].push(handle); }
전체 코드:
emit: function () {
//通过传入参数获取事件类型
var type = Array.prototype.shift.call(arguments);
if(!this.handles[type]){
return false;
}
for (var i = 0; i < this.handles[type].length; i++) {
var handle = this.handles[type][i];
//执行事件
handle.apply(this, arguments);
}
}
5. 테스트
off: function (type, handle) {
handles = this.handles[type];
if(handles){
if(!handle){
handles.length = 0;//清空数组
}else{
for (var i = 0; i < handles.length; i++) {
var _handle = handles[i];
if(_handle === handle){
handles.splice(i,1);
}
}
}
}
}
관련 기사: Angular에서 민감한 텍스트 프롬프트를 구현하는 방법
Angular에서 숨겨진 디스플레이를 구현하는 방법 js에서 이미지의 왼쪽 및 오른쪽 슬라이딩을 구현하는 방법위 내용은 JavaScript에서 관찰자 패턴을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!