当前位置: 首页 > Web前端 > vue.js

前端JS高频面试题---一、发布订阅模式

时间:2023-04-01 01:11:50 vue.js

一、概念1、定义发布订阅模式其实就是对象之间的一种一对多的依赖关系。当一个对象的状态发生变化时,所有依赖它的对象都会收到状态变化的通知。订阅者(Subscriber)向调度中心(EventChannel)注册(Subscribe)他要订阅的事件,当发布者(Publisher)向调度中心发布事件(PublishEvent),即事件被触发时、调度中心统一调度(FireEvent)订阅者注册到调度中心处理代码。二.实现1.实现思路创建一个对象,在对象上创建缓存列表(调度中心EventChannel)on方法用于将函数添加到缓存列表(订阅者注册事件到调度中心)emit方法进入argument第一个视为事件,根据事件值执行相应缓存列表中的函数(发布者将事件发布到调度中心,调度中心处理代码)。off方法可以根据事件值取消订阅(unsubscribe)。once方法只监听一次。调用后删除缓存函数(订阅一次)2.SimpledemoclassEventEmitter{constructor(){//缓存列表this.listener={}}//subscribeon(eventName,fn){//如果里面没有对应的事件对象值,表示没有订阅,为事件创建缓存列表//如果对象中有对应的事件值,则将fn添加到对应的事件缓存列表中if(!this.listener[eventName]){这个.listener[eventName]=[];}this.listener[eventName].push(fn);}//取消订阅off(eventName,fn){letcallbacks=this.listener[eventName];//缓存列表中没有对应的fn,returnfalseif(!callbacks){returnfalse;}if(!fn){//如果没有传入fn,则清除缓存列表中所有对应的fncallbacks&&(callbacks.length=0);}else{让cb;//遍历对应的fn,判断和那个fn相同,如果相同则删除for(leti=0,cbLen=回调。长度;我{this.off(eventName,on);fn.apply(这个,参数);}on.fn=fn;this.on(eventName,on);}//发出emit(eventName,data){constcallbacks=this.listener[eventName];if(callbacks){callbacks.forEach((c)=>{c(data);})}}}leta=newEventEmitter();functionaa(x){console.log(x);}a.on("kak",aa)a.on("kak",(data)=>{console.log("1",data);})a.emit('kak','hahahah');a.off('kak',aa);a.emit('kak','hahahah');3.vue中的eventBusfunctioneventsMixin(Vue){varhookRE=/^hook:/;Vue.prototype.$on=function(event,fn){varthis$1=this;varvm=这个;//event为数组时,循环执行$onif(Array.isArray(event)){for(vari=0,l=event.length;i1?toArray(cbs):cbs;//只取回调函数,不取事件varargs=toArray(arguments,1);for(vari=0,l=cbs.length;i