前端设计模式之观察者模式(代码片段)

关键词：

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

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

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

设计模式之观察者模式2(代码片段)

这篇简单讲一下JDK自带的观察者模式实现代码。对于观察者模式，JDK中提供了一个Observer接口(观察者)，一个Observable类(主题对象)。注：被观察者又被称为主题对象，目标对象。具体我们来看下源码。1.观察者接口publicinterfaceObserv... 查看详情

设计模式之-观察者模式（observerpattern）(代码片段)

观察者模式当对象间存在一对多关系时，则使用观察者模式（ObserverPattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。 C++代码：#include<iostream>#include<vector>usingnamespacestd... 查看详情

设计模式之观察者模式(代码片段)

2018-09-21 20:57:03观察者模式　　观察者模式又叫做发布-订阅（Publish/Subscribe）模式。它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有的观察者对象，... 查看详情

2018.5.1设计模式之观察者模式(代码片段)

...gkey/p/7170826.htmlhttps://www.w3cschool.cn/javadesignpattern/e1w91ihr.html设计模式之观察者模式（ObserverPattern）1.定义、概念有时又称为模型---视图模式、源收听者模式或从属者模式是软件设计模式的一种，再此模式中，一个目标物件管理所有... 查看详情

设计模式之观察者模式(代码片段)

观察者模式我消化了两天，因为智商问题，理解的比较慢。。。另外恭喜我自己以科目二一百分的成绩顺利拿上驾照言归正传，先从大神那里扒一张图，对着图看比较容易理解。　　　　　　　　 　　　　　　　　　　　　... 查看详情

设计模式之观察者模式(代码片段)

观察者模式什么是观察者模式观察者模式属于行为模式的一种，定义了对象的通用交流方式。观察者模式定义了一对多的关系，一个对象改变了状态，则其它所有依赖它的对象都会收到通知。观察者模式有时候在网络模型中也叫... 查看详情

行为模式之观察者模式(代码片段)

观察者模式（ObserverPattern）也称发布订阅模式，它是一种在项目中经常使用的模式。定义：定义对象间一种一对多的依赖关系，使得每当一个对象改变状态，则所有依赖于它的对象都会得到通知并被自动更新。观察者模式的类图... 查看详情

设计模式之观察者模式(代码片段)

观察者模式，又被称为发布-订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能耦合。虽然说观察者模式，又被称为发布-订阅模式，但是实际上它们之间存在差异的，区别在于调度的地方不同。上图... 查看详情

设计模式之观察者模式(代码片段)

观察者模式是极其重要的一个设计模式，也是我几年开发过程中使用最多的设计模式，本文首先概述观察者模式的基本概念和Demo实现，接着是观察者模式在Java和Spring中的应用，最后是对观察者模式的应用场景和优缺点进行总结... 查看详情

设计模式之观察者模式(代码片段)

目录 观察者模式介绍气象站最初的气象应用布告板接口布告板实现气象台监控测试布告板发展气象站观察者模式测试Java内置实现观察者WeatherDataDisplayCurrentDisplayCurrent2DisplayTest输出结果观察者模式介绍观察者模式定义了对象之间... 查看详情

设计模式之观察者模式(代码片段)

观察者模式无外乎两个操作，observer订阅自己关心的主题、主题有变化后通知订阅此主题的observers。首先创建主题，主题中需要持有观察者列表的引用，用于在有状态或数据变化后通知到所有订阅此主题的观察者们。p... 查看详情

设计模式之观察者模式(代码片段)

观察者模式无外乎两个操作，observer订阅自己关心的主题、主题有变化后通知订阅此主题的observers。首先创建主题，主题中需要持有观察者列表的引用，用于在有状态或数据变化后通知到所有订阅此主题的观察者们。p... 查看详情

设计模式之观察者模式(代码片段)

观察者模式1.简要概述2.模式结构3.实现代码4.优点好处5.缺点弊端6.应用场景7.应用示例1.简要概述观察者模式定义了对象之间的一对多关系，也就是说当一个对象的状态发生变化时，会告知其它的依赖对象也做相应的状态... 查看详情

设计模式之观察者模式(代码片段)

前言生活中我们从牛奶厂家订阅了牛奶后，会有快递员在每天早晨给所有订阅牛奶的家庭送牛奶来。如果我们退订了之后，我们之后也不会收到牛奶。观察者模式就类似这样的一个场景，可以把牛奶场景定义为主题，客户理解为... 查看详情

设计模式之观察者模式(代码片段)

1.定义定义对象之间的一对多依赖关系，当一个对象改变状态是，所有依赖于它的对象都会自动获得通知；又叫做发布-订阅(publish-subscribe)模式，模型-视图(Model/View)模式，源-监听器（Source、Listener）模... 查看详情

设计模式之观察者模式(observer)(代码片段)

简介       观察者模式（Observer）完美的将观察者和被观察的对象分离开。举个例子，用户界面可以作为一个观察者，业务数据是被观察者，用户界面观察业务数据的变化，发现数据变化后，就显示在界... 查看详情

设计模式之观察者模式(代码片段)

认识观察者模式可以通过报纸和杂志的订阅了解原理：1、报社的业务就是出版报纸2、向某家报社订阅报纸，只要他们有新报纸出版，就会给你送来。只要你是他们的订户，你就会一直收到新报纸。3、当你不想再看报纸的时候，... 查看详情

设计模式之观察者模式c++实现(代码片段)

参考书籍《HeadFirst设计模式》设计模式和设计原则观察者模式定义了对象之间的一对多依赖，这样一来，当一个对象改变状态时，它的所有依赖者都会收到通知并自动更新。观察者模式遵循的设计原则：为了交互... 查看详情