javascript 디자인 모델 C 관찰자 모델 원리 와 용법 사례 분석

본 논문 의 사례 는 자바 script 디자인 모델 C 관찰자 모델 의 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
소개:앞에서 우 리 는 시스템 내 에서 한 쌍 이 많 고 여러 쌍 이 많은 상황 에 대해 해결 방안 을 했 는데 이것 은 중개자 모델 을 사용 하여 모든 관련 관 계 를 중개자 에 게 맡 기 는 것 이다.이 절 에서 우 리 는 여러 가지 문 제 를 해결 하 는 또 다른 디자인 모델 을 소개 한다.즉,관찰자 모델 이다.
관찰자 모델 은 사용 빈도 가 가장 높 은 디자인 모델 중 하나 로 대상 과 대상 간 의 의존 관 계 를 구축 하 는 데 사용 된다.
정의:대상 간 의 다 중 의존 관 계 를 정의 하여 대상 의 상태 가 바 뀔 때마다 관련 의존 대상 이 알림 을 받 고 자동 으로 업 데 이 트 됩 니 다.관찰자 모드 의 별명 은 게시-구독 모드,모델-보기 모드,감청 모드 또는 종속 모드 를 포함한다.관찰자 모델 은 대상 행위 형 모델 이다.
장면:우 리 는 관찰자 모드 를 사용 하여 진 변환 의 작은 demo 를 만 듭 니 다.
예시:

var Subject = function(){
  var obServer = [];
  var _state;
 
  this.getState = function(){
    return _state;
  }
  this.setState = function(state){
    _state = state;
    this.notifyAllObservers();
  }
  this.attach = function(ob){
    obServer.push(ob);
  }
  this.notifyAllObservers = function(){
    obServer.map(function(item){
      item.update();
    });
  }
}
 
var BinaryObserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('Binary String:' + _subject.getState().toString(2));
  }
}
 
var OctalObserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('Octal String:' + _subject.getState().toString(8));
  }
}
 
var HexaObserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('Hex String:' + _subject.getState().toString(16));
  }
}
 
var subject = new Subject();
 
new HexaObserver(subject);
new OctalObserver(subject);
new BinaryObserver(subject);
 
subject.setState(15);
// Hex String:f
// Octal String:17
// Binary String:1111

이 예 에서 Subject 는 목표 라 고 부 릅 니 다.관찰 대상 입 니 다.한 목 표 는 여러 관찰자 가 관찰 할 수 있 습 니 다.이 관찰 자 는 obServer 의 배열 에 저장 되 어 목표 가 change 가 발생 할 때 모든 관찰자 에 게 알 립 니 다.
Binary Observer,Octal Observer,HexaObserver 등 세 가지 유형 을 관찰자 라 고 부 르 며 관찰 자 는 목표 의 변화 에 반응 할 것 이다.관찰자 중 대상 을 가리 키 는 인용 을 유지 해 야 합 니 다.
관찰자 모드 요약:
장점:
*관찰자 모드 는 표현 층 과 데이터 논리 층 의 분 리 를 실현 하고 안정 적 인 메시지 업데이트 전달 체 제 를 정의 할 수 있 습 니 다.
*관찰자 모드 는 관찰 목표 와 관찰자 사이 에 추상 적 인 결합 을 구축한다.관찰 목 표 는 추상 적 인 관찰자 의 집합 만 유지 하고 구체 적 인 관찰 자 를 이해 할 필요 가 없다.
*관찰자 모드 는 방송 통신 을 지원 하고 관찰 목 표 는 등 록 된 모든 관찰자 에 게 알림 을 보 내 다 중 시스템 의 디자인 난이 도 를 간소화 합 니 다.
단점:
*많은 관찰자 가 존재 할 때 모든 관찰자 에 대한 통지 에 많은 시간 이 걸 립 니 다.
*관찰자 와 목표 사이 에 순환 의존 이 존재 하면 시스템 붕 괴 를 초래 할 수 있 습 니 다.
적용 필드:
*시스템 에 존재 하 는 대상 의 변 화 는 하나 이상 의 다른 대상 에 게 도 변 화 를 가 져 올 수 있 습 니 다.
*시스템 에 대량의 의존 체인 이 존재 하고 A 영향 B,B 영향 C,C 영향 D
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.