javaScript 디자인 모드: Observer (관찰자) 모드 실천 (1)

원본 링크:https://juejin.im/post/5b5eb3da6fb9a04fbd1b37c9
디자인 모델 은 소프트웨어 디자인 에서 흔히 볼 수 있 는 문 제 를 해결 하 는 재 활용 방안 으로서 우리 가 소프트웨어 개발 에서 흔히 볼 수 있 는 문 제 를 해결 하 는 데 매우 중요 한 참고 가 되 었 다. 전단 개발 에서 자주 사용 하 는 디자인 모델 을 이해 하고 파악 하 는 것 은 우리 의 일상적인 개발 에 도움 이 될 것 이다.
Oberver 모드 가 무엇 입 니까?
라 는 책 에서 관찰자 모델 에 대해 다음 과 같이 설명 했다. 한 명 또는 여러 명의 관찰자 가 목표 의 상태 에 관심 이 있다. 그들 은 자신 을 목표 대상 에 의존 하여 관심 이 있 는 모든 내용 을 등록 하고 목표 상태 가 바 뀌 며 관찰자 가 이러한 관심 변경 에 관심 이 있 을 수 있다.모든 관찰자 의 업데이트 방법 을 호출 하 는 알림 메 시 지 를 보 냅 니 다.관찰자 가 내용 에 흥 미 를 느끼 지 않 으 면 그 는 간단하게 그 중에서 분리 할 수 있다.
개념 적 인 것 은 사람 을 귀 찮 게 하 는 작은 요정 이다. 딱딱 한 말 을 많이 했 지만 아직도 어리둥절 한 상태 다....................................................좋아, 정리 해 보 자.
쉽게 말 하면 Observer (관찰자) 모델 은 대상 간 의 다 중 의존 관 계 를 정의 한다.대상 의 상태 가 바 뀌 었 을 때, 그 대상 에 의존 하 는 모든 대상 이 알림 을 받 고 자동 으로 업데이트 되 거나 삭 제 됩 니 다.이런 의존 통 지 는 본질 적 으로 연동 이 촉발 한 결과 이다.
응...아마도 당신 은 "말 이 일리 가 있 습 니 다. 무슨 말 을 했 는 지 모 르 겠 지만..." 라 고 말 할 것 입 니 다.
좋아, talk is cheap, let me show you the code 이 말 을 코드 로 바 꿔 볼 게...
Observe (관찰자) 추상 적 서비스의 간단 한 실현
관찰자 가 있 는 이상 반드시 피 관찰자 가 있 을 것 이다. 앞에서 우리 가 언급 한 바 와 같이 관찰자 와 피 관찰자 간 의 정보 방송 체 제 는 본질 적 으로 연동 촉발 의 결과 이 고 관찰자 와 피 관찰자 간 은 한 쌍 의 다 중 관계 이다. 이런 관 계 를 실현 하기 위해 우 리 는 먼저 몇 개의 명 사 를 알 아야 한다.

Subject (관찰 대상 집합) 는 일련의 관찰 자 를 유지 하고 추가, 삭제 또는 관찰자 에 게 업데이트

를 알 리 는 데 편리 합 니 다.

Observer (관찰자) 는 목표 상태 가 바 뀌 면 알림 을 받 아야 하 는 대상 에 게 업 데 이 트 된 인 터 페 이 스 를 제공 합 니 다

ConcreateSubject (단일 관찰 대상) 상태 가 바 뀌 었 을 때 Observer 에 알림 을 보 내 고 현재 대상 의 상태

를 저장 합 니 다.

ConcreateObserver (구체 적 인 관찰자) 는 ConcreateSubject 를 가리 키 는 인용 을 저장 하고 observer 의 업데이트 인 터 페 이 스 를 구체 적 으로 실현 하여 자신의 상태 와 목표 상태의 일치

를 실현 합 니 다.
우선, 저 희 는 Subject 류 를 실현 합 니 다. 이 는 세 가지 방법 을 제공 합 니 다. 각각 관찰 자 를 추가 하고 관찰 자 를 삭제 하 며 등 록 된 관찰자 에 게 업 데 이 트 를 알 리 는 것 입 니 다.

var Subject = function () {
          //             
          this.observers = [];
    };

Subject.prototype = {

    //        
    add: function (observer) {
        this.observers.push(observer);
    },

    //        
    remove: function (observer) {
        for (var i = 0, len = this.observers.length; i < len; i++) {
            if (observer = this.observers[i]) {
                this.observers.splice(i, 1);
                return true;
            }
        }

        return false;
    },

    //             
    update: function () {
        var observer;
        for (var i = 0, len = this.observers.length; i < len; i++) {
            observer = this.observers[i];
            observer.update(this);
        }
    }
};

다음은 observer 클래스 를 실현 합 니 다. update 업데이트 방법 을 제공 합 니 다.

var Observer = function () {};

Observer.prototype.update = function (data) {
    //          
    console.log(`observer update ${data}`)
};

이렇게 해서 우 리 는 추상 적 인 차원 에서 관찰자 모델 의 초기 형 태 를 간단하게 실현 했다. 바 우 트, 이것 이 무슨 소 용이 있 을 까? 마치 우 리 는 그것 이 실제 코드 에서 어떻게 나타 나 는 지 모 르 는 것 같다.
Observer (관찰자) 구체 적 인 사례 실현
우 리 는 신문 을 구독 하 는 전형 적 인 사례 로 관찰자 모델 의 코드 응용 을 실천 한다.
이 사례 에서 출판 사 는 피 관찰자 에 해당 하고 목표 대상 에 속 하 며 독 자 는 신문 을 구독 하고 신문사 신문 이 업 데 이 트 된 후에 신문 을 구독 하 는 독자 에 게 업데이트 내용 을 자동 으로 알려 야 한다.
우선 테마 대상 구현:

 function Subject() {
        this.readers = [];
    }

Subject.prototype = {
    //             ，    
    add: function (reader) {
        this.readers.push(reader);
    },
    remove: function (reader) {
        for (var i = 0, len = this.readers.length; i < len; i++) {
            if (reader === this.readers[i]) {
                this.readers.splice(i, 1);
                return;
            }
        }
    },

    update: function (content) {
        for (var i = 0, len = this.readers.length; i < len; i++) {
            this.readers[i].update(content);
        }
    }
};

//     ，       
function Paper() {
    Paper.super.constructor.call(this);
    this.content = '';
}

Object.assign(Paper, Subject);

//          
Paper.prototype.getContent = function () {
    return this.content;
};

//          
Paper.prototype.setContent = function (content) {
    this.content = content;

    //        
    this.update(content);
};

다음, observer 관련 실현:

    //    
    function Observer() {}

    Observer.prototype.update = function () {};


    function Reader() {
        this.name = '';
    }

    Object.assign(Reader, Observer);

    Reader.prototype.update = function (content) {
        //                    ，            
        console.log(this.name + 'update：' + content);
    };

마지막 으로 신문 업 데 이 트 를 촉발 합 니 다.

//   
var subject = new Paper();

var reader1 = new Reader();
reader1.name = 'zhangsan';

var reader2 = new Reader();
reader2.name = 'lisi';

subject.add(reader1);
subject.add(reader2);

subject.setContent('    ');

코드 에서 먼저 저 희 는 Subject 류 를 정 의 했 습 니 다. 이 는 독자 (관찰자) 에 대한 등록, 삭제 와 업데이트 이 벤트 를 제공 하고 구체 적 인 주제 인 ConcreateSubject 모델 Paper 를 정 의 했 습 니 다. Subject 를 실현 하 는 방법 외 에 자신의 setContent 와 getContent 두 가지 사용자 정의 방법 을 정의 하여 구체 적 인 목표 의 변경 을 촉발 합 니 다.
그 다음 에 우 리 는 관찰자 Observer 와 독자 Reader 류 를 정 의 했 고 Reaer 는 Observer 의 업데이트 방법 Update 를 실 현 했 으 며 자신의 name 속성 을 제외 하고 독자 가 자신의 방법 이나 속성 치 를 정의 하 는 데 편리 하도록 노출 했다.
코드 실행 단계 에서 우 리 는 먼저 paper 대상 과 독자 집 을 예화 시 켰 고 독 자 를 subject 에 등록 시 켜 독자 의 구독 을 표시 했다. 그러면 구체 적 인 신문 내용 이 업 데 이 트 된 후에 subject.setContent(' '), 즉 신문 이 업 데 이 트 된 후에 신문 을 구독 하 는 두 독 자 는 자동 으로 업 데 이 트 된 내용 을 받 게 된다.
관찰자 모드 의 장단 점

장점

결합 을 해제 하고 관찰자 모델 은 피 관찰자 와 관찰자 사이 에 추상 적 인 결합 을 구축한다.피 관찰자 역할 이 알 고 있 는 것 은 구체 적 인 관찰자 목록 일 뿐 모든 구체 적 인 관찰 자 는 추상 적 인 관찰자 의 인터페이스 에 부합된다.피 관찰 자 는 구체 적 인 관찰 자 를 알 지 못 하고 모두 공 통 된 인터페이스 가 있다 는 것 만 안다.

피 관찰자 와 관찰자 가 밀접 하 게 결합 되 지 않 았 기 때문에 서로 다른 추상 화 차원 에 속 할 수 있다.피 관찰자 와 관찰자 가 함께 버 려 진다 면 이 대상 은 추상 화 와 구체화 차원 을 뛰 어 넘 을 수 밖 에 없다.

관찰자 모드 는 방송 통신 을 지원 한다.피 관찰 자 는 등 록 된 모든 관찰자 에 게 통 지 를 보 낼 것 이다.

단점

운행 효율 이 비교적 낮 고 피 관찰자, 여러 관찰자 가 있 을 때 개발 코드 와 디 버 깅 이 비교적 복잡 하 다. 만약 에 한 관찰자 가 케이스 에 걸 리 면 이 관찰자 뒤의 관찰자 의 집행 에 영향 을 주 고 전체적인 집행 에 영향 을 줄 수 있다.

피 관찰자 간 에 순환 의존 이 있 으 면 피 관찰자 가 순환 호출 을 촉발 하여 시스템 이 붕 괴 될 수 있다.

관찰자 에 대한 통지 가 다른 라인 을 통 해 비동기 배달 을 한다 면 시스템 은 배달 이 적절 한 방식 으로 진행 되 는 것 을 보증 해 야 한다.

관찰자 모델 은 관찰자 로 하여 금 관찰 하 는 대상 에 변화 가 생 겼 다 는 것 을 수시로 알 게 할 수 있 지만 관찰자 모델 은 해당 하 는 메커니즘 이 없어 관찰자 로 하여 금 관찰 하 는 대상 이 어떻게 변화 하 는 지 알 게 한다.

최종 총화
디자인 모델 은 소프트웨어 디자인 에서 흔히 볼 수 있 는 문 제 를 해결 하 는 재 활용 방안 으로 많은 개발 자 들 이 정리 한 경험 이다. 우 리 는 이런 모델 을 참고 하여 개발 에서 까다 로 운 문 제 를 해결 할 수 있다.
본 장 에서 우 리 는 코드 의 측면 에서 간단 한 관찰자 모델 을 실현 하 는 데 중심 을 두 었 다. 그러나 이것 은 완전 하지 않다. 실제로 관찰자 모델 의 모델 은 밀 당, 당 김 두 가지 모델 로 나 눌 수 있다. 본 고 에서 우 리 는 밀 당 모델 만 가지 고 관찰자 모델 을 이해 하 는 사례 로 삼 는 다.
다음 절 은 관찰자 의 또 다른 '당 김 모델' 의 실현 에 중심 을 두 고 소개 할 것 이다.
이 시대 에 우 리 는 거인 의 어깨 위 에 서서 절차 세계 의 웅장 한 장관 을 엿 볼 수 있 게 해 주 셔 서 감사합니다. 나 는 적자 심 으로 절차 세계 의 수많은 산 과 물 을 밟 고 싶 습 니 다!프로그램 세 계 를 걷 는 모든 동인 들 이 마음속 으로 원 하 는 모습 으로 살 기 를 바 랍 니 다. 화 이 팅!