원생 js 가 실현 하 는 관찰자 와 구독 자 모델 에 대한 간단 한 예시

본 고 는 원생 js 가 실현 한 관찰자 와 구독 자 모델 을 실례 로 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
관찰자 모드 는 게시 자-구독 자 모드,게시 자 게시 사건,구독 자 감청 사건 이 라 고도 부 르 며 반응 한다.
전통 적 인 전단 디 결합 에 있어 관찰자 모델 은 비교적 흔히 볼 수 있 는 디자인 모델 로 각종 프레임 워 크 라 이브 러 리 디자인 에 대량으로 사용 된다.
핵심 코드:

// eventProxy.js
'use strict';
const eventProxy = {
 onObj: {},
 oneObj: {},
 on: function(key, fn) {
  if(this.onObj[key] === undefined) {
   this.onObj[key] = [];
  }
 
  this.onObj[key].push(fn);
 },
 one: function(key, fn) {
  if(this.oneObj[key] === undefined) {
   this.oneObj[key] = [];
  }
 
  this.oneObj[key].push(fn);
 },
 off: function(key) {
  this.onObj[key] = [];
  this.oneObj[key] = [];
 },
 trigger: function() {
  let key, args;
  if(arguments.length == 0) {
   return false;
  }
  key = arguments[0];
  args = [].concat(Array.prototype.slice.call(arguments, 1));
 
  if(this.onObj[key] !== undefined
   && this.onObj[key].length > 0) {
   for(let i in this.onObj[key]) {
    this.onObj[key][i].apply(null, args);
   }
  }
  if(this.oneObj[key] !== undefined
   && this.oneObj[key].length > 0) {
   for(let i in this.oneObj[key]) {
    this.oneObj[key][i].apply(null, args);
    this.oneObj[key][i] = undefined;
   }
   this.oneObj[key] = [];
  }
 }
};
 
export default eventProxy;

사용:전역 이벤트 클래스 를 도입 하거나 웹 팩 설정 을 통 해 이벤트 클래스 를 전역 변수 로 설정 합 니 다.

import { eventProxy } from '@/utils'
 
class Parent extends Component{
 render() {
  return (
   <div style={{marginTop:"50px"}}>
    <Child_1/>
    <Child_2/>
   </div>
  );
 }
}
// componentDidUpdate   render        
class Child_1 extends Component{
 componentDidMount() {
  setTimeout(() => {
   //    msg   
   console.log(eventProxy)
   eventProxy.trigger('msg', 'end','lll');
  }, 5000);
 }
 render() {
  return (
   <div>     </div>
  )
 }
}
// componentDidUpdate        
class Child_2 extends Component{
 state = {
  msg: 'start'
 };
 
 componentDidMount() {
  //    msg   
  eventProxy.on('msg', (msg,mm) => {
   console.log(msg,mm)
   this.setState({
    msg:msg
   });
  });
 }
 
 render() {
  return <div>
   <p>child_2 component: {this.state.msg}</p>
  </div>
 }
}

참고:타 오 바 오 전단 팀 기술 창고
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.