Javascript 디자인 패턴의 다양한 구현 예 관찰자 패턴_javascript 기술

소개

관찰자 모드는 게시/구독 모드(Publish/Subscribe)라고도 합니다. 이는 일대다 관계를 정의하여 여러 관찰자 개체가 특정 주제 개체의 상태를 동시에 모니터링할 수 있도록 합니다. 토픽 객체 변경, 모든 관찰자 객체는 자동으로 업데이트될 수 있도록 알림을 받습니다.

관찰자 패턴 사용의 이점:

1. 간단한 브로드캐스트 통신을 지원하고 구독한 모든 개체에 자동으로 알림을 보냅니다.
2. 페이지가 로드된 후 대상 개체는 관찰자와 쉽게 동적 관계를 가질 수 있으므로 유연성이 향상됩니다.
3. 대상 객체와 관찰자 간의 추상 결합 관계는 독립적으로 확장 및 재사용이 가능합니다.

텍스트(버전 1)

JS에서 관찰자 패턴의 구현은 콜백을 통해 달성됩니다. 먼저 구독, 구독 취소 및 게시의 3가지 메소드가 포함된 pubsub 객체를 정의하겠습니다.

코드 복사 코드는 다음과 같습니다.

var pubsub = {};
(함수(q) {

var topic = {}, // 콜백 함수에 저장된 배열
        subUid = -1;
//게시방법
​ q.publish = 함수(주제, 인수) {

           if (!topics[topic]) {
              false를 반환합니다.
}

setTimeout(함수 () {
               var 구독자 = 주제[주제],
                len = 구독자 ? 구독자.길이 : 0;

              동안 (len--) {
                  구독자[len].func(topic, args);
            }
         }, 0);

        true를 반환합니다.

};
//구독방법
​ q.subscribe = 함수(주제, func) {

           if (!topics[topic]) {
주제[주제] = [];
}

      var token = ( subUid).toString();
주제[주제].push({
토큰: 토큰,
               기능: 기능
        });
         토큰 반환
};
//구독 취소 방법
​ q.unsubscribe = 함수(토큰) {
for (주제의 var m) {
                if (주제[m]) {
for (var i = 0, j = topic[m].length; i If (topics[m][i].token === 토큰) {
주제[m].splice(i, 1);
                                      반환 토큰
                 }
                }
            }
}
         false를 반환합니다.
};
} (pubsub));

다음과 같이 사용하세요.

코드 복사 코드는 다음과 같습니다.

//오셔서 구독하세요
pubsub.subscribe('example1', 함수(주제, 데이터) {
console.log(topics ": " 데이터);
});

//공지 게시
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

어때요? 활용하기 참 좋지 않나요? 하지만 이 방법에는 문제가 있습니다. 즉, 구독을 취소할 방법이 없다는 것입니다. 구독을 취소하려면 구독 취소 이름을 지정해야 하므로 다른 버전을 생각해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

//구독을 취소할 변수에 구독을 할당합니다
var testSubscription = pubsub.subscribe('example1', function (주제, 데이터) {
console.log(topics ": " 데이터);
});

//공지 게시
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

//구독취소
setTimeout(함수 () {
pubsub.unsubscribe(testSubscription);
}, 0);

//정보를 계속 출력할 수 있는지 확인하기 위해 다시 게시하세요
pubsub.publish('example1', '안녕하세요! (이것은 실패합니다)');

버전 2

프로토타입의 특성을 활용하여 관찰자 패턴을 구현할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 관찰자() {
This.fns = [];
}
Observer.prototype = {
구독: 기능(fn) {
This.fns.push(fn);
},
구독 취소: 기능(fn) {
This.fns = this.fns.filter(
함수(el) {
If (el !== fn) {
>                                                      | | );
},
업데이트: 함수(o, thisObj) {
        var 범위 = thisObj || 창;
This.fns.forEach(
                              기능(el) {
                          el.call(scope, o);
| );
}
};

//테스트
var o = 새로운 관찰자;
var f1 = 함수(데이터) {
console.log('로빈: ' data ', 빨리 ​​작업하세요!');
};

var f2 = 함수(데이터) {
console.log('Randall: ' data ', 급여를 올려달라고 요청하세요!');
};

o.subscribe(f1);
o.구독(f2);

o.update("톰이 돌아왔습니다!")

//f1 구독 취소
o.구독 취소(f1);
//다시 확인
o.update("톰이 돌아왔습니다!");

필터 또는 forEach 기능을 찾을 수 없다는 메시지가 표시되면 브라우저가 충분히 새롭지 않고 현재 새로운 표준 기능을 지원하지 않기 때문일 수 있습니다. 다음 방법을 사용하여 직접 정의할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

if (!Array.prototype.forEach) {
Array.prototype.forEach = 함수(fn, thisObj) {
        var 범위 = thisObj || 창;
for (var i = 0, j = this.length; i                    fn.call(scope, this[i], i, this);
}
};
}
if (!Array.prototype.filter) {
Array.prototype.filter = 함수(fn, thisObj) {
        var 범위 = thisObj || 창;
      var a = [];
for (var i = 0, j = this.length; i If (!fn.call(scope, this[i], i, this)) {
                        계속;
            }
            a.push(this[i]);
}
         반환;
};
}

버전 3

여러 객체에 관찰자 게시 및 구독 기능을 적용하려면 일반 함수를 정의한 후 관찰자 기능이 필요한 객체에 이 함수의 기능을 적용하면 됩니다.

코드 복사 코드는 다음과 같습니다.

//일반 코드
var 관찰자 = {
//구독
AddSubscriber: 함수(콜백) {
This.subscribers[this.subscribers.length] = 콜백;
},
//구독취소
​ RemoveSubscriber: 함수(콜백) {
for (var i = 0; i If (this.subscribers[i] === 콜백) {
                    삭제(this.subscribers[i]);
            }
}
},
//게시
게시: 기능(무엇) {
for (var i = 0; i If (typeof this.subscribers[i] === '함수') {
This.subscribers[i](what);
            }
}
},
// 객체에 관찰자 기능이 있도록 만듭니다
Make: 함수(o) {
for (var i in this) {
            o[i] = this[i];
               o.subscribers = [];
}
}
};

그런 다음 두 개체 blogger와 user를 구독하고 관찰자.make 메소드를 사용하여 이 두 개체가 관찰자 기능을 갖도록 만듭니다.

코드 복사 코드는 다음과 같습니다.

var 블로거 = {
추천: 함수(id) {
        var msg = '두두가 추천하는 게시물:' id;
This.publish(msg);
}
};

var 사용자 = {
vote: 함수(id) {
        var msg = '투표한 사람 ID=' id;
This.publish(msg);
}
};

관찰자.make(블로거);
관찰자.make(사용자);

사용 방법은 비교적 간단하므로 다양한 관찰자 개체에 등록할 수 있습니다. (동시에 여러 관찰자 개체에 등록할 수도 있습니다.)

코드 복사 코드는 다음과 같습니다.

바르 톰 = {
읽기: 함수(무엇) {
console.log('Tom이 다음 메시지를 보았습니다: ' what)
}
};

var mm = {
표시: 기능(무엇) {
console.log('mm이 다음 정보를 봤습니다: ' 무엇)
}
};
//구독
blogger.addSubscriber(tom.read);
blogger.addSubscriber(mm.show);
blogger.recommend(123); //게시 호출

//구독취소
blogger.removeSubscriber(mm.show);
blogger.recommend(456); //게시 호출

//다른 객체 구독
user.addSubscriber(mm.show);
user.vote(789); //게시 호출

jQuery 버전

jQuery 버전 1.7의 새로운 on/off 기능에 따라 jQuery 버전의 관찰자를 정의할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

(함수($) {

var o = $({});

$.subscribe = 함수() {
o.on.apply(o, 인수);
};

$.unsubscribe = 함수 () {
o.off.apply(o, 인수);
};

$.publish = 함수 () {
o.trigger.apply(o, 인수);
};

} (jQuery));

위의 세 가지 버전보다 호출 방법이 더 간단합니다.

코드 복사 코드는 다음과 같습니다.

//콜백 함수
함수 핸들(e, a, b, c) {
// `e`는 이벤트 객체이므로 주의할 필요가 없습니다
console.log(ab c);
};

//구독
$.subscribe("/some/topic", 핸들);
//게시
$.publish("/some/topic", ["a", "b", "c"]) // abc 출력
                             

$.unsubscribe("/some/topic", 핸들) // 구독 취소

//구독
$.subscribe("/some/topic", 함수(e, a, b, c) {
console.log(ab c);
});

$.publish("/some/topic", ["a", "b", "c"]) // abc 출력

//구독 취소(구독 취소는 콜백 함수 대신 /some/topic 이름을 사용하는데, 이는 버전 1의 예시와 다릅니다.
$.unsubscribe("/some/topic");

보시다시피 그의 구독 및 구독 취소는 콜백 함수 이름 대신 문자열 이름을 사용하므로 익명 함수가 전달되더라도 구독 취소가 가능합니다.

요약

관찰자의 사용 사례는 다음과 같습니다. 한 객체를 변경하려면 동시에 다른 객체를 변경해야 하고 얼마나 많은 객체를 변경해야 하는지 알 수 없는 경우 관찰자 패턴 사용을 고려해야 합니다.

일반적으로 관찰자 패턴의 역할은 분리이며, 결합의 양측이 구체성보다는 추상화에 의존하도록 만듭니다. 따라서 양쪽의 변경 사항은 다른 쪽의 변경 사항에 영향을 미치지 않습니다.