집 > 기사 > 웹 프론트엔드 > Node.js 디자인 패턴: 관찰자 패턴(게시-구독 패턴)이란 무엇입니까? JS 관찰자 패턴 소개

Node.js 디자인 패턴: 관찰자 패턴(게시-구독 패턴)이란 무엇입니까? JS 관찰자 패턴 소개

不言원래의: 2018-08-17 16:22:531805검색

이 기사에서는 js 디자인 패턴에 대한 내용을 제공합니다. 관찰자 패턴(게시-구독 패턴)이란 무엇입니까? js 관찰자 모드의 도입에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

옵저버 패턴(게시-구독 패턴)이란 무엇인가요?

Definition: 객체 간의 일대다 종속 관계를 정의합니다. 객체의 상태가 변경되면 해당 객체에 종속된 모든 객체가 모두 종속됩니다. 자동으로 통보되고 업데이트됩니다.

주로 해결하는 문제: 한 개체의 상태 변경을 다른 개체에 알리는 문제를 해결하고 사용 편의성과 낮은 결합도를 고려하여 높은 수준의 협업을 보장합니다.

사용 시기: 객체(대상 객체)의 상태가 변경되면 모든 종속 객체(관찰자 객체)에 알림이 전송되고 브로드캐스트 알림이 발생합니다.

해결 방법: 객체 지향 기술을 사용하면 이러한 종속성이 약화될 수 있습니다.

키 코드: 특정 topci의 경우 배열을 사용하여 구독자를 저장합니다.

적용 예: 1. 경매 진행 중 경매인은 최고 입찰가를 관찰한 후 다른 입찰자에게 입찰을 알립니다. 2. 서유기에서 오공은 보살에게 붉은 소년을 내놓으라고 요청했는데, 보살은 땅에 물을 뿌리고 늙은 거북이를 끌어당겼습니다. 그는 보살이 물을 뿌리는 행위를 관찰했습니다.

관찰자 패턴의 장점: 1. 관찰자와 관찰 대상이 추상적으로 결합됩니다. 2. 트리거 메커니즘을 설정합니다.

관찰자 패턴의 단점: 1. 관찰된 개체에 직접 및 간접 관찰자가 많은 경우 모든 관찰자가 알림을 보내는 데 많은 시간이 걸립니다. . 2. 관찰자와 관찰 대상 사이에 순환 종속성이 있는 경우 관찰 대상은 둘 사이의 순환 호출을 트리거하여 시스템 충돌을 일으킬 수 있습니다. 3. 관찰자 모드에는 관찰 대상 개체가 어떻게 변경되었는지 관찰자가 알 수 있도록 하는 해당 메커니즘이 없고 관찰 대상이 변경되었다는 것만 알 수 있습니다.

관찰자 패턴 사용 시나리오:

추상 모델에는 두 가지 측면이 있으며, 그 중 하나는 또 다른 측면. 이러한 측면을 별도의 개체에 캡슐화하면 독립적으로 변경하고 재사용할 수 있습니다.
한 객체가 변경되면 하나 이상의 다른 객체도 변경될 수 있으므로 얼마나 많은 객체가 변경될지는 알 수 없으므로 객체 간의 결합이 줄어들 수 있습니다. 경비.
객체는 해당 객체가 누구인지 모른 채 다른 객체에게 알려야 합니다.
객체 A의 동작은 객체 B에 영향을 미치고 객체 B의 동작은 객체 C에 영향을 미치게 됩니다. 관찰자 패턴을 사용하여 체인 트리거 메커니즘을 만들 수 있습니다.

참고: 1. 순환 참조를 피하세요. 2. 순차적으로 실행할 경우 관찰자 오류로 인해 시스템이 정지되는 현상이 발생하며 일반적으로 비동기식 방식을 사용합니다.

관찰자 패턴 코드 구현

/*
     *发布-订阅模式（观察者模式）
     */
function pubsub() {
    var _pubsub = {},//全局对象，即发布订阅对象
        _topics = {}, // 回调函数存放的数组
        _subUid = 0;

    // 发布方法
    _pubsub.publish = function (topic) {
        if (!_topics[topic]) {
            return false;
        }
        var args = [].slice.call(arguments, 1);
        setTimeout(function () {
            var subscribers = _topics[topic];
            for (var i = 0, j = subscribers.length; i < j; i++) {
                subscribers[i].callback.apply(null, args);
            }
        }, 0);
        return true;
    };
    //订阅方法
    _pubsub.subscribe = function (topic, callback) {
        if (!_topics[topic]) {
            _topics[topic] = [];
        }
        var token = (++_subUid).toString();
        _topics[topic].push({
            token: token,
            callback: callback
        });
        return token;
    };
    //退订方法
    _pubsub.unsubscribe = function (token) {
        for (var m in _topics) {
            if (_topics[m]) {
                for (var i = 0, j = _topics[m].length; i < j; i++) {
                    if (_topics[m][i].token === token) {
                        _topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };

    return {
        subscribe: _pubsub.subscribe,
        publish: _pubsub.publish,
        unsubscribe: _pubsub.unsubscribe
    }
}

Node.js 디자인 패턴: 관찰자 패턴(게시-구독 패턴)이란 무엇입니까? JS 관찰자 패턴 소개

옵저버 패턴(게시-구독 패턴)이란 무엇인가요?

관찰자 패턴 코드 구현

관련 기사