题解 | #发布订阅模式#

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            class EventEmitter {
                // 补全代码
                // 同一名称事件可能有不同的执行函数体,所以定义对象来存储
                constructor(){
                    this.eventList = {} //保存订阅对象的列表
                }
                
                // on函数订阅事件,该名称事件不存在,则将其放入该名称的事件数组中
                on(key,callback){
                    if(!this.eventList[key]){
                        this.eventList[key] = [] // 
                    }
                    this.eventList[key].push(callback) //存放订阅事件的回调
                }
                
                // emit函数发布事件,取第一个参数为key,根据key带eventList中匹配函数。
                // 其他参数作为执行时的入参
                emit(){
                    let key = [].shift.call(arguments)
                    let efns = this.eventList[key]
                    if(!efns || efns.length === 0)return
                    efns.map((fn,index)=>{
                        fn.apply(this, arguments) 
                    })
                }
                
                off(key, callback){
                    let efns = this.eventList[key]
                    if(!efns)return // 事件数组不存在返回
                    // 在事件数组中找到对应的事件(可能存在同名事件,所以需要匹配到函数体)
                    for(let i = 0; i< efns.length; i++){
                        if(efns[i] === callback){
                            efns.splice(i,1)
                            break
                        }
                    }
                    // 事件数组长度为0,直接删除
                    if(efns.length === 0) delete this.eventList[key]
                }
            }
        </script>
    </body>
</html>

全部评论

相关推荐

秋盈丶:后续:我在宿舍群里和大学同学分享了这事儿,我好兄弟气不过把他挂到某脉上了,10w+阅读量几百条评论,直接干成精品贴子,爽
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务