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

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

　　接下来给大家分享下我对所谓的发布订阅的理解吧，其实这种设计理念在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这个生命周期中明明只执行一遍但是里面因为订阅者存在

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