js - 事件订阅模式
事件订阅模式的本质: 就是一个公共的 js 对象,一个事件队列的数组。发布事件就是遍历事件队列,通过发布事件的参数,获得那个方法要执行。监听就是往事件队列里 push。
var Events = function () { var obj = {} var that = this // 监听 var listen = function (key, eventfn) { var stack, _ref stack = (_ref = obj[key]) != null ? _ref : obj[ key ] = [] return stack.push(eventfn) } var one = function (key, eventfn) { remove(key) return listen(key, eventfn) } var remove = function (key) { var _ref return (_ref = obj[key]) != null ? _ref.length = 0 : void 0 } // 发布事件的方法 var trigger = function () { var fn, stack, _i, _len, _ref, key key = Array.prototype.shift.call(arguments) stack = (_ref = obj[ key ]) != null ? _ref : obj[ key ] = [] // 遍历,通过参数找到要执行的方法 for (_i = 0, _len = stack.length; _i < _len; _i++) { fn = stack[ _i ] if (fn.apply(that, arguments) === false) { return false } } } return { listen: listen, one: one, remove: remove, trigger: trigger } } export default Events
发布订阅的代码如下:
// 发布 const EventsCenter = Events() EventsCenter .trigger('closeTab', {name: name}) // 订阅 EventsCenter.listen('closeTab', function (data) { console.log(data, '关闭菜单') })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)