js 디자인 모드: 관찰자 및 게시 구독 모드

1442 단어
항상 이 두 가 지 를 같은 모델 로 생각 하지만 사실은 다르다. 지금 다시 한 번 복습 해 보 자.
관찰자 모드
관찰자 가 목 표를 직접 구독 하고 목표 가 사건 을 촉발 할 때 관찰자 에 게 업 데 이 트 를 통지 합 니 다.
단순 실현
class Observer {
  constructor(name) {
    this.name = name;
  }

  update() {
    console.log(`${this.name} update`)
  }
}

class subject {
  constructor() {
    this.subs = [];
  }

  add(observer) {
    this.subs.push(observer);
  }

  notify() {
    this.subs.forEach(item => {
      item.update();
    });
  }
}

const sub = new subject();
const ob1 = new Observer('ob1');
const ob2 = new Observer('ob2');

//        
sub.add(ob1);
sub.add(ob2);

//       
sub.notify();

게시 구독 모드
게시 구독 모드 는 예약 센터 를 통 해 처리 되 어 구독 자 와 게시 자 를 분리 시 키 고 서로 간섭 하지 않 습 니 다.
단순 실현
class Event {
  constructor() {
    this.lists = new Map();
  }

  on(type, fn) {
    if (!this.lists.get(type)) {
      this.lists.set(type, []);
    }

    this.lists.get(type).push(fn);
  }

  emit(type, ...args) {
    const arr = this.lists.get(type);
    arr && arr.forEach(fn => {
      fn.apply(null, args);
    });
  }
}

const ev = new Event();

//   
ev.on('msg', (msg) => console.log(msg));

//   
ev.emit('msg', '  ');

차이 점
사실 이 두 모델 은 같은 디자인 모델 의 서로 다른 실현 이 라 고 할 수 있다.
관찰자 모드 는 관찰자 와 목표 가 직접 상호작용 을 하고 결합 성 이 있 으 며 게시 구독 모드 는 하나의 예약 센터 를 통 해 처리 되 고 구독 자 와 게시 자 는 서로 간섭 하지 않 으 며 디 결합 을 했다.
자 바스 크 립 트 고급 화제
SpringCloud 의 분포 식 설정 센터 구성 요소 Config 는 로 컬 에서 설정 파일 을 읽 습 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage