js 發(fā)布訂閱模式的實(shí)例講解
更新時(shí)間:2017年09月10日 08:19:24 作者:八bug哥哥
下面小編就為大家?guī)硪黄猨s 發(fā)布訂閱模式的實(shí)例講解。小編覺得挺不錯(cuò)的,現(xiàn)在就想給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
廢話不多說,直接上代碼
//發(fā)布訂閱模式
class EventEmiter{
constructor(){
//維護(hù)一個(gè)對(duì)象
this._events={
}
}
on(eventName,callback){
if( this._events[eventName]){
//如果有就放一個(gè)新的
this._events[eventName].push(callback);
}else{
//如果沒有就創(chuàng)建一個(gè)數(shù)組
this._events[eventName]=[callback]
}
}
emit(eventName,...rest){
if(this._events[eventName]){ //循環(huán)一次執(zhí)行
this._events[eventName].forEach((item)=>{
item.apply(this,rest)
});
}
}
removeListener(eventName,callback){
if(this._events[eventName]){
//當(dāng)前數(shù)組和傳遞過來的callback相等則移除掉
this._events[eventName]=
this._events[eventName].filter(item=>item!==callback);
}
}
once(eventName,callback){
function one(){
//在one函數(shù)運(yùn)行原來的函數(shù),只有將one清空
callback.apply(this,arguments);
//先綁定 執(zhí)行后再刪除
this.removeListener(eventName,one);
}
this.on(eventName,one);
//此時(shí)emit觸發(fā)會(huì)執(zhí)行此函數(shù),會(huì)給這個(gè)函數(shù)傳遞rest參數(shù)
}
}
class Man extends EventEmiter{}
let man=new Man()
function findGirl() {
console.log('找新的女朋友')
}
function saveMoney() {
console.log('省錢')
}
man.once('失戀',findGirl);
//man.on('失戀',findGirl) //失戀 ,綁定一個(gè)函數(shù)方法
man.on('失戀',saveMoney)//失戀 ,綁定一個(gè)函數(shù)方法
man.removeListener('失戀',saveMoney); //移除一個(gè)函數(shù)方法
man.emit('失戀');
//綁定一次,觸發(fā)多次,也只執(zhí)行一次。觸發(fā)后一次將數(shù)組中的哪一項(xiàng)刪除掉下次觸發(fā)就不會(huì)執(zhí)行
以上這篇js 發(fā)布訂閱模式的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript事件發(fā)布/訂閱模式原理與用法分析
- JavaScript實(shí)現(xiàn)與使用發(fā)布/訂閱模式詳解
- JavaScript中發(fā)布/訂閱模式的簡(jiǎn)單實(shí)例
- JS前端設(shè)計(jì)模式之發(fā)布訂閱模式詳解
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布訂閱模式)原理與實(shí)現(xiàn)方法示例
- JavaScript設(shè)計(jì)模式之觀察者模式與發(fā)布訂閱模式詳解
- 詳解JavaScript設(shè)計(jì)模式中的享元模式
- JavaScript設(shè)計(jì)模式之單例模式應(yīng)用場(chǎng)景案例詳解
- JavaScript 設(shè)計(jì)模式 安全沙箱模式
- JavaScript設(shè)計(jì)模式之觀察者模式(發(fā)布者-訂閱者模式)
- javascript 發(fā)布-訂閱模式 實(shí)例詳解
相關(guān)文章
javascript 實(shí)現(xiàn) 秒殺,團(tuán)購(gòu) 倒計(jì)時(shí)展示的記錄 分享
這篇文章介紹了javascript 實(shí)現(xiàn) 秒殺,團(tuán)購(gòu) 倒計(jì)時(shí)展示的記錄方法,有需要的朋友可以參考一下2013-07-07
JavaScript中實(shí)現(xiàn)繼承的三種方式和實(shí)例
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)繼承的三種方式和實(shí)例,本文講解了類式繼承、原型式繼承、使用擴(kuò)充方法實(shí)現(xiàn)多重繼承三種方式,需要的朋友可以參考下2015-01-01
webpack3升級(jí)到webpack4遇到問題總結(jié)
這篇文章主要介紹了webpack3升級(jí)到webpack4遇到問題總結(jié),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09

