这个文章介绍如何实现 vue的$on $emit $once $off 。 不懂$on $emit $once $off都是干什么的 直接 去看VUEapi 传送门 https://cn.vuejs.org/v2/api/#vm-on
当前vue的$on $emit $once $off 具体是什么实现的,我没读vue源码,只是前段时间 上班实在没活干,就看设计模式,突然发现订阅模式,很适合写这个,就自己写了一个。
以下实现代码 均在 (function(win){// ...})(window)里面。为了避免作用域咯。
let eventList = {} // 这个对象是保存事件。
可以看一下实现的时候eventList对象里面就是这样的
思路是 当我们$on('aaa', argu => {xxxxx}) 的时候 先在eventList对象里面看有没有属性名为aaa的数组,没有的话 就创建一个,然后吧$on第二个参数的函数 保存在aaa数组里面,如果有aaa数组,那么我们就直接吧第二参数的函数,push进去。
当我们$emit('aaa', 'argument')的时候 我们去在eventList对象里面去找属性名为aaa的数组,如果没找到就直接退出终止执行,如果找到了aaa数组,那么就循环里面的函数,然后吧第二参数,放在数组里面的每一项函数里面执行一遍。
大概思路就是上面那样,其实自定义事件也是这么玩的。 下面我就截图以下具体实现代码
记住哈,我们需要先定义一个 let eventList = {} 的对象 用来保存
80行的for循环看不懂 你就 onFunction.forEach(fn, () => {fn.apply(this, arguments)})
别问我为什么不这么写,我也不知道当初为什么脑抽 装了一个逼,非用for循环写了
还记得吗?我们以上的代码都在 (function(win){// ...})(window)里面
所以 还需要win.$on = $on win.$emit = $emit win.$once = $once win.$off = $off 把这些东西暴露在window上
好了,你可以测试一下 以上代码
这个是我自己测试的,你可以随便测试哈