observe

Posted 2020-12-03 chennanxiangbei

 1 //存放所有事件的对象
 2 const eventMap = {};
 3 
 4 /*
 5     事假绑定  一个事件对应这个多个回调函数  
 6     key:[]  key值代表事件名称  回调函数都存放在[]里面
 7 */
 8 let $on = function(eventName,callback){
 9     /*
10         eventName:事件名称
11         callback:回调函数
12 
13         一个事件名称可能会对应多个回调函数  
14     */
15 
16     //判断当前对象里面的事件是否存在  如果没有存在我就赋值一个空的数组
17     //然后在将这个回调push这个数组里面
18     if(!eventMap[eventName]){
19         eventMap[eventName] = [];
20     }
21     eventMap[eventName].push(callback);
22 }
23 
24 
25 //触发的时候要知道一个事件是对应着多个函数 所以所有的事件都要触发
26 //但是如果用户传递的这个事件在eventMap中根本不存在的话我就什么也不干，
27 //如果存在则拿到所以的回调函数然后执行
28 let $emit = function(eventName,val){
29     let newList = eventMap[eventName];
30     if(!eventMap[eventName]){
31         return;
32     }
33     newList.map(cb=>{
34         cb(val);
35     })
36 }
37 
38 /*
39     如果用户没有传递callback 那么就解绑所有的事件
40     如果用户传递了callback那么就解绑对应的函数
41 */
42 let $off = function(eventName,callback){
43     let newList = eventMap[eventName];
44     if(!callback){
45         eventMap[eventName] = null;
46     }
47     eventMap[eventName] = newList.filter(cb=>{
48         return cb != callback
49     })
50 }
51 
52 export default {
53     $on,
54     $emit,
55     $off
56 }