JavaScript 게시-구독 모드 사용법에 대한 자세한 설명

巴扎黑
풀어 주다: 2017-09-11 09:44:20
원래의
2787명이 탐색했습니다.

아래 편집기는 js 게시 및 구독 모델에 대한 예제 설명을 제공합니다. 편집자님이 꽤 괜찮다고 하셔서 이제라도 전해드리고 참고용으로 드리고 싶습니다. 에디터 따라가서 살펴볼까요

더이상 헛소리는 그만하고 코드대로 가세요


//发布订阅模式
class EventEmiter{
  constructor(){
    //维护一个对象
    this._events={

    }
  }
  on(eventName,callback){
    if( this._events[eventName]){
      //如果有就放一个新的
      this._events[eventName].push(callback);
    }else{
      //如果没有就创建一个数组
      this._events[eventName]=[callback]
    }
  }
  emit(eventName,...rest){
    if(this._events[eventName]){ //循环一次执行
      this._events[eventName].forEach((item)=>{
        item.apply(this,rest)
      });
    }
  }
  removeListener(eventName,callback){
    if(this._events[eventName]){
      //当前数组和传递过来的callback相等则移除掉
      this._events[eventName]=
        this._events[eventName].filter(item=>item!==callback);
    }
  }
  once(eventName,callback){
    function one(){
      //在one函数运行原来的函数,只有将one清空
      callback.apply(this,arguments);
      //先绑定 执行后再删除
      this.removeListener(eventName,one);
    }
    this.on(eventName,one);
      //此时emit触发会执行此函数,会给这个函数传递rest参数
  }
}
class Man extends EventEmiter{}
let man=new Man()
function findGirl() {
  console.log('找新的女朋友')
}
function saveMoney() {
  console.log('省钱')
}
man.once('失恋',findGirl);
//man.on('失恋',findGirl) //失恋 ,绑定一个函数方法
man.on('失恋',saveMoney)//失恋 ,绑定一个函数方法
man.removeListener('失恋',saveMoney); //移除一个函数方法
man.emit('失恋');
//绑定一次,触发多次,也只执行一次。触发后一次将数组中的哪一项删除掉下次触发就不会执行
로그인 후 복사

위 내용은 JavaScript 게시-구독 모드 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿