JavaScript 디자인 모드 (6): 관찰자 모드 와 게시 구독 모드

관찰자 모드 (Observer)
관찰자 모드: 대상 간 의 다 중 의존 관 계 를 정의 합 니 다. 대상 Subject 의 상태 가 바 뀌 면 모든 의존 대상 Observer 가 알림 을 받 습 니 다.
간단하게: 여신 에 게 남자친구 가 생 겼 어 요. 친구 들 이 사진 을 찍 고 달콤 한 선언 을 했 어 요. "할머니 가 성공 적 으로 옷 을 벗 었 으 니 기 쁘 시 길 바 랍 니 다."여러분, 스페어 타이어 가 줄줄 이 실연 을 당 해 자신 을 위로 할 수 밖 에 없습니다. 당신 은 유일한 사람 이 아 닙 니 다.
패턴 특징

한 대상 Subject, 소유 방법: 추가 / 삭제 / 알림 Observer;

여러 관찰자 대상 Observer, 보유 방법: 수신 Subject 상태 변경 통지 및 처리;

대상 Subject 상태 변경 시 모든 Observer 에 게 알 립 니 다.

Subject 일련의 Observer 를 추가 하고 Subject 는 이들 Observer 과 의 관 계 를 유지 하 는 일 을 맡 았 다. "당신 이 나 에 게 관심 이 있 으 면 업데이트 하면 알려 줄 게 요."
코드 구현

//     
class Subject {
  constructor() {
    this.observers = [];  //      
  }
  //   
  add(observer) {
    this.observers.push(observer);
  }
  //   
  remove(observer) {
    let idx = this.observers.findIndex(item => item === observer);
    idx > -1 && this.observers.splice(idx, 1);
  }
  //   
  notify() {
    for (let observer of this.observers) {
      observer.update();
    }
  }
}

//     
class Observer {
  constructor(name) {
    this.name = name;
  }
  //             
  update() {
    console.log(`         ，  ：${this.name}`);
  }
}

//       
let subject = new Subject();

//         
let obs1 = new Observer('     ');
let obs2 = new Observer('     ');

//          
subject.add(obs1);
subject.add(obs2);

//        
subject.notify();  
//   ：
//          ，       
//          ，       

우세 하 다.

목표 자 와 관찰자, 기능 결합 도가 낮 아 지고 자신의 기능 논리 에 집중 합 니 다.

관찰자 가 수 동적 으로 업 데 이 트 를 받 고 시간 적 으로 결합 을 해제 하 며 실시 간 으로 목표 자의 업데이트 상 태 를 받는다.

불완전
관찰자 모드 는 대상 간 의존 관계 의 낮은 결합 을 실현 하지만 이벤트 알림 을 세분 화 할 수 없습니다. 예 를 들 어 '선별 알림', '테마 이벤트 알림 지정' 등 입 니 다.
예 를 들 어 위의 예 는 '전단 개발 자' 에 게 만 알려 줍 니까?관찰자 대상 은 어떻게 자신 이 필요 로 하 는 업데이트 알림 만 받 습 니까?상례 에서 두 관찰 자 는 목표 자의 상태 변경 통 지 를 받 은 후 모두 update() 실 행 했 고 구분 되 지 않 았 다.
"00 이후 개성 을 추구 하 는 시대 인 데 내 가 좀 다 를 수 있 을 까?" 라 고 우리 의 다음 모델 을 이 끌 어 냈 다.진급 판 관찰자 모드.'구독 모드 게시' 일부 글 은 둘 다 똑 같은 지 에 대해 논란 이 있다.
개인 적 인 관점 만 대표 합 니 다. 두 가지 모델 은 매우 유사 하지만 약간 다 릅 니 다. 바로 제3자 가 많 습 니 다. 자바 스 크 립 트 가 비정 규 직 대상 언어 를 대상 으로 하고 함수 리 셋 프로 그래 밍 의 특징 으로 인해 '구독 모드 발표' 가 자바 스 크 립 트 에서 코드 를 실현 하 는 것 은 '관찰 모드' 와 같 습 니 다.
게시 구독 모드 (게시 자 & 구독 자)
게시 구독 모드: 이벤트 (테마) 채널 을 기반 으로 알림 을 받 고자 하 는 대상 Subscriber 는 사용자 정의 이벤트 구독 테 마 를 통 해 이벤트 가 활성 화 된 대상 Publisher 는 테마 이 벤트 를 발표 하 는 방식 으로 각 테 마 를 구독 하 는 Subscriber 대상 에 게 알 립 니 다.
게시 구독 모드 는 관찰자 모드 와 달리 '제3자' (이벤트 센터) 가 나타난다.목표 대상 은 관찰자 에 게 직접 알 리 지 않 고 사건 센터 를 통 해 알 리 는 것 이다.
코드 구현

//     
let pubSub = {
  list: {},
  subscribe: function (key, fn) {   //   
    if (!this.list[key]) {
      this.list[key] = [];
    }
    this.list[key].push(fn);
  },
  publish: function(key, ...arg) {  //   
    for(let fn of this.list[key]) {
      fn.call(this, ...arg);
    }
  },
  unSubscribe: function (key, fn) {     //     
    let fnList = this.list[key];
    if (!fnList) return false;

    if (!fn) {
      //             ，     key    
      fnList && (fnList.length = 0);
    } else {
      fnList.forEach((item, index) => {
        if (item === fn) {
          fnList.splice(index, 1);
        }
      })
    }
  }
}

//   
pubSub.subscribe('onwork', time => {
  console.log(`   ：${time}`);
})
pubSub.subscribe('offwork', time => {
  console.log(`   ：${time}`);
})
pubSub.subscribe('launch', time => {
  console.log(`   ：${time}`);
})

//   
pubSub.publish('offwork', '18:00:00'); 
pubSub.publish('launch', '12:00:00');

//     
pubSub.unSubscribe('onwork');

게시 구독 모드 에서 구독 자 는 각자 다른 논 리 를 실현 하고 자신 이 대응 하 는 이벤트 알림 만 받는다.당신 이 원 하 는 '다르다' 를 실현 하 세 요.
DOM 이벤트 감청 도 '구독 모드 게시' 의 응용 프로그램 입 니 다.

let loginBtn = document.getElementById('#loginBtn');

//       （    ）
function notifyClick() {
    console.log('     ');
}

//       
loginBtn.addEventListener('click', notifyClick);
//     ,           
loginBtn.click();             

//       
loginBtn.removeEventListener('click', notifyClick);

구독 발표 알림 순서:

먼저 구독 하고 발표 할 때 알림 (일반)

구독 후 이전 게시 알림 (QQ 오프라인 메시지, 접속 후 이전 정보 획득)

유행 라 이브 러 리 의 응용

jQuery 의 on 와 trigger, $.callback();

Vue 의 양 방향 데이터 바 인 딩;

Vue 의 부자 구성 요소 통신 $on/$emit

jQuery 의 $. Callback ()
jQuery 의 $. Callback () 은 관찰자 모드 의 응용 과 같 아서 더 세밀 하 게 제어 할 수 없습니다.

function notifyHim(value) {
 console.log('He say ' + value);
}

function notifyHer(value) {
 console.log('She say ' + value);
}

$cb = $.Callbacks();    //         ：     

$cb.add(notifyHim);     //          ：  
$cb.add(notifyHer);     //          ：  

$cb.fire('help');       //       ：   

Vue 의 양 방향 데이터 바 인 딩Object.defineProperty() 를 이용 하여 데 이 터 를 납치 하고 감청 기 Observer 를 설정 하여 데이터 대상 의 속성 을 감청 합 니 다. 속성 에 변화 가 생기 면 구독 자 Dep 에 게 데 이 터 를 업데이트 하 라 고 알 리 고 마지막 으로 명령 해석 기 Watcher 는 해당 하 는 명령 을 해석 하여 해당 하 는 업데이트 함 수 를 실행 하여 보 기 를 업데이트 합 니 다.쌍방 향 귀속 을 실현 하 였 다.

Compile (데이터 납치)

Observer (구독 발표)

Dep (데이터 감청)

Watcher (모델 컴 파일)

Vue 양 방향 데이터 바 인 딩 원리 에 대해 서 는 다른 글 을 참고 하거나 본 편 을 추천 할 수 있 습 니 다.

Vue 소스 코드 전송 문

Vue 의 부자 구성 요소 통신Compile 에서 부모 구성 요 소 는 Vue 을 통 해 하위 구성 요소 에 데 이 터 를 전달 합 니 다 (위 에서 아래로 의 단 방향 데이터 흐름).부자 구성 요소 간 의 통신 은 사용자 정의 이벤트 props, $on 를 통 해 이 루어 집 니 다 (하위 구성 요소 $emit, 부모 구성 요소 $emit.
원 리 는 바로 $on 업데이트 통 지 를 발표 하고 $emit 구독 수신 통 지 를 받 는 것 이다. $on 에 서 는 Vue (한 번 감청) $once (구독 취소) 도 실현 되 었 다.

//   
vm.$on('test', function (msg) {
    console.log(msg)
})

//   
vm.$emit('test', 'hi')

Vue 소스 코드 전송 문

Vue 문서 전송 문

우세 하 다.

대상 간 기능 디 결합, 대상 간 의 인용 관 계 를 약화 시킨다.

더욱 세밀 하 게 통제 하고 지 정 된 구독 주제 알림

을 나 누 어 준다.
불완전

간 의 결합 을 해제 한 후에 코드 읽 기 가 직관 적 이지 않 고 유지 하기 어렵다.

추가 대상 생 성, 시간 과 메모리 소모 (많은 디자인 모델 의 통폐)

관찰자 모드 VS 게시 구독 모드
유사 점
한 쌍 이상 의 의존 관 계 를 정의 하고 상태 가 변 경 될 때 해당 하 는 통 지 를 수행 합 니 다.
차이 점
게시 구독 모드 가 더욱 유연 하고 진급 판 의 관찰자 모드 로 해당 하 는 배 포 를 지정 합 니 다.

관찰자 모델 은 단일 사건 에 대응 하 는 여러 개의 이 사건 에 의존 하 는 대상 관 계 를 유지 합 니 다.

구독 을 발표 하여 여러 이벤트 (주제) 와 각 이벤트 (주제) 에 의존 하 는 대상 간 의 관 계 를 유지 합 니 다.

관찰자 모드 는 목표 대상 이 직접 알림 (모든 알림) 을 촉발 하여 관찰 대상 이 통 지 를 받 도록 강요당 하 는 것 이다. 구독 모드 를 발표 하면 중간 층 (이벤트 센터) 이 많아 지고 알림 방송 을 관리 하 게 된다 (해당 이벤트 의 대상 만 알림).

관찰자 모델 대상 간 의존 관계 가 비교적 강하 고 게시 구독 모델 에서 대상 간 에 진정한 결합 을 실현 한다.

대상 속성 데이터 차단 방식:

$off 속성 설명자;

ES6 Class set ；

ES6 Object.defineProperty() 대리;

참고 글:

관찰자 모델 과 게시 구독 모델

에 대해 이야기 합 니 다.

원생 자 바스 크 립 트 구현 관찰자 모드

관찰자 모드 vs 게시 구독 모드

vue 양 방향 데이터 바 인 딩 원리

본 고 는 첫 번 째 Github, 스타 를 기대 합 니 다!https://github.com/ZengLingYong/blog
저자: 즐거움 의 이름 으로
이 글 은 오리지널 이 므 로 부당 한 부분 이 있 으 면 지적 을 환영 합 니 다. 전재 할 때 출처 를 밝 혀 주 십시오.