JavaScript 관찰자 모드 원리 와 용법 실례 상세 설명

5671 단어 JavaScript관찰자 모드
본 고의 실례 는 자 바스 크 립 트 관찰자 의 모델 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
관찰자 모드
관찰자 모드 는 게시 구독 모드(Publish/Subscribe)라 고도 부 릅 니 다.한 쌍 의 다 중 관 계 를 정의 하여 여러 관찰자 대상 이 특정한 주제 대상 을 동시에 감청 하도록 합 니 다.이 주제 대상 의 상태 가 변 하면 모든 관찰자 대상 에 게 알 리 고 자신 을 자동 으로 업데이트 할 수 있 습 니 다.
*그것 은 두 가지 역할 로 나 뉜 다.(1)관찰자(2)피 관찰자
*관찰자 모델 의 목적:프로그램의 내재 적 변 화 를 관찰 하고 변화 가 있 을 때 알 수 있 으 며 이에 상응하는 반응 을 할 수 있다.
현재 우 리 는 하나의 수 요 를 통 해 이 모델 을 배운다.구독 자 와 신문사 간 의 관 계 를 모 의 하 는 것 이다.
이 과정 에서 실제 조작 은(푸 시 모드,가 져 오기 모드)로 나 뉜 다.
(1)푸 시-->긴 연결 기술
(2)모드 가 져 오기->정시 에 백 스테이지 로 가서 가 져 오기
코드 사용 은 다음 과 같 습 니 다:
(1)발표 클래스

//   
function BusinessOne(name){
  this.name=name;
  //     
  this.subscribers=new Array();
}
(2)게시 자의 발표 메 시 지 를 확장 하 는 방법(푸 시 모드)

//           (   )
BusinessOne.prototype.delive=function (news) {
  var self=this;
  //           
  this.subscribers.forEach(function (fn) {
    //            
         fn(news,self);
  })
}
(3)공공 구독 을 확장 하 는 함수 와 구독 을 취소 하 는 함수
구독 함수:

Function.prototype.subscribe=function (publisher) {
  var that=this;
  //some      i                
  //          true  some  true
  var alreadyExists=publisher.subscribers.some(function (el) {
    if(el==that){
      //           
      return ;
    }
  });
  //          
  if(!alreadyExists){
    publisher.subscribers.push(that);
  }
  return this;
}
취 소 된 함수:

Function.prototype.unsubscribe =function (publisher) {
  var that = this;
  publisher.subscribers=publisher.subscribers.filter(function (el) {//                           
    if(el!==that){
      return el;
    }
  });
  return this;
}
(4)발 표 된 인 스 턴 스 만 들 기

//        
var b1 = new BusinessOne("CCTV");
var b2 = new BusinessOne("       ");
(5)발표 부분
(5.1)외관 모드 사용-브 라 우 저 별 이벤트 바 인 딩 호 환 문제

function addEventFacade(el,type,fn) {
  if(window.addEventListener){
    //firefox
    el.addEventListener(type,fn);
  }else if(window.attachEvent){
    //   IE
    el.attachEvent("on"+type,fn);
  }else {
    el["on"+type] = fn;
  }
}
(5.2)주 응용 함수 만 들 기

var inint=function () {
  //     
  var pageOne=function (news) {
    document.getElementById("info").value="    ： "+"["+arguments[1].name+"]     --->"+news
  };
  //  1
  pageOne.subscribe(b1).subscribe(b2);
  addEventFacade(document.getElementById("cctv"),"click",function () {
    b1.delive(document.getElementById("cctvText").value);
  })
  //  2
  addEventFacade(document.getElementById("gfb"),"click",function () {
    b2.delive(document.getElementById("gfbText").value);
  })
}
마지막,구독 자 인터페이스

<body onload="inint()">
<div id="div01"></div>
<script type="text/javascript" src="observer.js"></script>
<input type="button" value="CCTV  " id="cctv">
<input type="text" id="cctvText">
<br><br><br>
<input type="button" value="       " id="gfb">
<input type="text" id="gfbText">
<br><br><br>
<textarea id="info" cols="60" rows="20"></textarea>
<script src="Js/        /     /lib.js"></script>
<script src="Js/        /     /     .js"></script>
</body>
효과:
(1)cctv 모듈 의

 （2)gfb 의 효 과 는:

보충:위 에서 사용 한 foreach 방법 과 filter 방법 코드 는:

  Function.prototype.method = function(name, fn) {
   this.prototype[name] = fn;
   return this;
  };
  if (!Array.prototype.forEach) { 
   Array.method('forEach', function(fn, thisObj) {
    var scope = thisObj || window;
    for ( var i = 0;len < this.length; ++i ) {
      //            ,          this    
      fn.call(scope, this[i], i, this);
    }
   });
  }
  //Array   
  if (!Array.prototype.filter ) {
   Array.method('filter', function(fn, thisObj) {
    var scope = thisObj || window;
    var a = [];
    for ( var i = 0;i < this.length; ++i ) {
       //      ,    ,    
       if ( !fn.call(scope, this[i], i, this) ) {//                           
          continue;
       }
       a.push(this[i]);
    }
    //      
    return a;
   });
  }
요약:

1.간단 한 방송 통신 을 지원 하고 모든 감청 자 에 게 자동 으로 알 립 니 다.
2.페이지 를 불 러 온 후에 피 관찰 대상 은 관찰자 와 동태 적 인 관 계 를 가지 기 쉬 워 유연성 을 높 인 다.
3.피 관찰 대상 과 관찰자 간 의 추상 적 결합 관 계 는 단독 적 으로 확장 되 고 재 활용 할 수 있다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 전단 코드 디 버 깅 실행 도 구 를 사용 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
vue 간단 한 폭포 흐름 구조 실현
Linux 환경 에서 XFS 파일 시스템 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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