什么是观察者模式

观察者设计模式定义了对象间的一种一对多的组合关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。

一、观察者模式包含两大角色

设计一个观察者模式需要设计两大重要角色：
* 被观察者，当自身状态改变时能够自动向观察它的对象发送消息
* 观察者，它接收被观察者发送的消息

二、JavaScript样例

1.天气（被观察对象）

我们根据观察者模式的形式设计一个天气信息，当天气信息更新的时候，观察者就是接收消息的对象会收到消息提示。
代码如下（示例）：

        /*** 观察者模式*///观察对象，天气function Weather(date, temp) {this.date = date; //日期this.temp = temp;  //气温this.observers = [];  //观察者列表this.getTemp = function () {return this.temp;};this.setTemp = function (tmp) {this.temp = tmp;this.notify();};//注册观察者this.attach = function (observer) {console.log(observer.name + "订阅了天气预报！");this.observers.push(observer);};//发送消失提示this.notify = function () {this.observers.forEach((observer) => {observer.update(this);});}}

2.观察者（接收消息提示）

接收天气预报的观察者，可以接收天气预报信息，也可以根据讯息处理一些相关任务。
代码如下（示例）：

//观察者function Observer(name, weather) {this.name = name;            //观察者自身属性this.weather = weather;     //被观察对象this.weather.attach(this);  //创建观察者同时就订阅了被观察对象this.effects = [];          //这里也可以存储观察者自己需要处理的任务队列this.update = function (weather) {console.log(this.name + "收到了天气预报通知: 今天日期"+weather.date+"  天气温度"+weather.temp+"度");this.effects.forEach(obj=>{//do something for obj//这里其实他自身又可以成为了另一个被观察者向其他观察者观察的对象。})}//添加任务this.addEffects = function (effect) {this.effects.add(effect);}}

3.测试代码

代码如下（示例）：

     //创建天气预报let wea1 = new Weather("20230310", 28);//创建3个观察者接收天气预报let obj1 = new Observer("obj1", wea1);let obj2 = new Observer("obj2", wea1);let obj3 = new Observer("obj3", wea1);//输出//obj1订阅了天气预报！//obj2订阅了天气预报！//obj3订阅了天气预报！//第一种发布方式，通过自定义的设置温度方法这个方法里调用了this.notify();wea1.setTemp(20);//第二种方式发布，使用了代理方式拦截了对象的set方法let proxy = new Proxy(wea1,{set});function set(target, key, value, receiver){Reflect.set(target, key, value, receiver);target.notify();}proxy.temp = 30;//输出//obj1收到了天气预报通知: 今天日期20230310  天气温度30度//obj2收到了天气预报通知: 今天日期20230310  天气温度30度//obj3收到了天气预报通知: 今天日期20230310  天气温度30度

总结

通过观察我们发现只要观察者和被观察者只要包含一下设计元素，就能成功一个成功的观察者模型

被观察包含设计要素

1. 数组或列表用来存储观察者对象
2. 消失提示方法notify(), 循环观察者列表发送消息

观察者包含包含设计要素

1. 接收被观察者方法update()

JavaScript实现观察者模式案例相关推荐

javascript 的观察者模式的原理和集线器
学习之前先看一张图. 这张图片很形象的说明了观察者模式的工作原理.其中最左边那台电脑是信号发起者,我们叫它广播者,所有电脑都是信息接受者(包括最左边的广播者).我们称之为监听者.唯一的缺憾是这张图片是 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第五章:"课程介绍"专栏-课后习题参考代码题目原型: 请结合给出的素材,运用列表标记,超链接标记以 ...
javaScript中createElement案例
javaScript中createElement案例 <!DOCTYPE html> <html> <head> <meta charset="UT ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第四章:播放器图标-课后习题参考代码 ........ 记得关注,收藏,评论哦,作者将持续更新.... 我自己做的效果 ...
JavaScript循环打印案例
JavaScript循环打印案例一.打印5行5列 * 运行代码 var str = '';for (var i = 1; i <= 5; i++) {//外部控制换行for (var j = ...
javaScript动画项目案例
javaScript动画项目案例示例代码:我的github demo效果演示示例:我的demo网站 1.动画库编写匀速运动案例一效果:匀速运动 <!DOCTYPE html> &l ...
javascript操作表格案例讲解
本案例是一个简单表格,通过javascript DOM相关技术,实现对表格的删除更改.案例代码详细的表达了思路分析,适合DOM初学者. <!doctype html> <html l ...
JavaScript：综合案例-表单验证
综合案例:表单验证开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
JavaScript 面向对象(二) —— 案例篇
案例--面向对象的选项卡:把面向过程的程序一步步改成面向对象的形式,使其能够更加的通用(但是通用的东西,一般会比较臃肿). 下面是一个简单的选项卡,也是我们常见的面向过程的创建形式. 1 <!D ...

JavaScript实现观察者模式案例

文章目录