前端设计模式之观察者模式

Posted 2022-01-10 cq1715584439

　　所谓的观察者模式我所认为的就是订阅发布。其中中间关于调度方法还有一点区别，这里就不多做叙述了

　　接下来给大家分享下我对所谓的发布订阅的理解吧，其实这种设计理念在react体现在了跨组件通信中，

原理就是订阅者写一个函数然后不执行，接着把其储存在某一个地方，等待着发布者去触发这个函数，然后

达到触发函数进行函数传参，从而能够达到组件之中的跨组件通信

 

　　接下来给大家分享下一个简单的封装

 1 //第一种方式利用数组是比较啰嗦的
 2 // const Observer=
 3 //     arr:[],
 4 //     $on(event,cb)
 5 //         this.arr.push([event]:cb)
 6 //     ,
 7 //     $emit(event,msg)
 8 //         //console.log(this.arr)
 9 //         this.arr.forEach(item=>
10 //             //console.log(Object.keys(item))
11 //             if(Object.keys(item)[0]===event)
12 //                 item[Object.keys(item)[0]](msg)
13 //             
14 //         )
15 //     
16 // 
17 
18 
19 //第二种方式利用对象
20 
21 //这种方式只能监听一次  假如我们想要监听多次可以看下下面第三种方法
22 // const Observer=
23 //     arr:,
24 //     $on(event,cb)
25 //         this.arr[event]=cb
26 //     ,
27 //     $emit(event,msg)
28 //         this.arr[event](msg)
29 //     
30 // 
31 
32 
33 //第三种方式 多次监听的订阅者
34 const Observer=
35     arr:,
36     //订阅者监听函数
37     $on(event,cb)
38         if(this.arr[event])
39             this.arr[event].push(cb)
40         else
41             this.arr[event]=[cb]
42         
43         
44     ,
45     //发布者触发函数
46     $emit(event,msg)
47         this.arr[event]&&this.arr[event].forEach(cb=>
48             cb(msg)
49         )
50     ,
51     //销毁阶段
52     $delete(event)
53         delete this.arr[event]
54     
55 
56 
57 
58 
59 //以下为封装检验过程
60 
61 
62 Observer.$on("up",(msg)=>
63     //订阅者监听函数
64     console.log(msg)
65 )
66 Observer.$on("up",(msg)=>
67     //订阅者监听函数
68     console.log(msg)
69 )
70 
71 Observer.$delete("up")
72 
73 Observer.$on("down",(msg)=>
74     //订阅者监听函数
75     console.log(msg)
76 )
77 
78 
79 
80 Observer.$emit("up",123)//发布者 做函数的触发
81 
82 
83 Observer.$emit("down",456)//发布者
84 
85 
86 //这样功能就可以实现了然后抛出使用了

 

　　所谓的发布订阅在react中不受限制生命周期限制，比如上一边博客说的在componentDidMount这个生命周期中明明只执行一遍但是里面因为订阅者存在

所以他不受生命周期的影响只会被发布者控制