js观察者模式的介绍及使用

目录
  • 一、定义
  • 二、使用场景
  • 三、举个例子
  • 四、Coding

一、定义

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象(通知者)。这个主题对象观察到被观察者发生变化时，会通知所有的观察者对象，使它们能够自己更新自己

这里涉及了几个角色及他们自己功能:

  1. 观察者对象：可以更新自己
  2. 主题对象：可以添加观察者，移除观察者，通知观察者
  3. 被观察者：被主题对象监视，当被观察者发生变化时，主题对象会通知观察者更新自己的状态

二、使用场景

当一个对象改变需要同时改变其他对象的时候，而且不需要知道有多少个对象需要改变

三、举个例子

如果干巴巴的概念描述晦涩难懂，举个生活中常见的例子说明一下

场景1：

​ 写字楼中，电脑跟前。一堆程序员趁老板出差的机会在电脑上NBA球赛，时不时激动的大喊大叫。此时，老板出差回来，刚好碰个正着，场面一度尴尬。

解决方案：

​ 为了避免在公司划水摸鱼时，被进门的老板抓到，几个人想了个方案，贿赂前台小姐姐。当老板以后再进公司门的时候，小姐姐立马通知程序员们，让他们恢复到工作的状态

场景2：

​ 写字楼中，电脑跟前。一堆程序员趁老板出差的机会在电脑上NBA球赛，时不时激动的大喊大叫。此时，老板出差回来。前台小姐姐看到老板回来，立马给看球赛的小哥哥们发通知。此时小哥哥们赶紧切换成工作的状态。

场景2就是使用了观察者模式。当老板回来时，程序员们需要改变划水的状态，由前台小姐姐负责通知他们

人物 角色 功能
程序员 观察者 可以改变自己的状态
前台小姐姐 主题(通知者) 收集、移除及保存需要通知的程序员(观察者)，给程序员发送通知
老板 被观察者 被前台小姐姐观察

通过案例应该分清观察者模式中的各个对象及各个对象的功能了。接下来进行coding

四、Coding

1、前台小姐姐类（通知者类）

/*
 * desc:通知者类
 * 1、存储观察者
 * 2、添加观察者
 * 3、移除观察者
 * 4、通知观察者
 */
class Dep {
    constructor() {
        //存储观察者
        this.subs = []
    }

    /**
     * 添加观察者
     * @param {观察者对象} sub
     */
    addSubs(sub) {
        //确保观察者都有update方法
        if (sub && sub.update) {
            this.subs.push(sub)
        }
    }

    /**
     * 移除观察者
     * @param {需要移除的观察者对象} sub
     */
    removeSub(sub) {
        this.subs.forEach((item, index) => {
            if (sub.id === item.id) {
                this.subs.splice(index, 1)
                return;
            }
        })
    }

    /**
     * 通知观察者，调用所有观察者内部的update的方法，改变自身状态
     * */
    notify() {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}

2、程序员类（观察者类）

/**
 * 观察者对象
 */
class watcher {
    constructor(name) {
        this.name = name
    }

    //观察者对象都有自己的update方法，来改变自己的工作状态
    update() {
        console.log(`${this.name}收到通知，改变工作状态。`)
    }
}
/**
 * 观察者对象
 */
class watcher {
    constructor(name) {
        this.name = name
    }

    //观察者对象都有自己的update方法，来改变自己的工作状态
    update() {
        console.log(`${this.name}收到通知，改变工作状态。`)
    }
}

3、模拟老板回公司，前台小姐姐通知程序员

 <script src="./js/Dep.js"></script>
 <script src="./js/Watcher.js"></script>
 <script>
        //同事张三
        const tongshi1 = new watcher("张三")

        //同事李四
        const tongshi2 = new watcher("李四")

        //前台小姐姐要知道哪些同事需要通知，把需要通知的同事收集起来
        const xiaojiejie = new Dep();
        xiaojiejie.addSubs(tongshi1)
        xiaojiejie.addSubs(tongshi2)

        //等待老板归来....
        //等等等....
        //等等等....
        //等等等....
        //等等等....
        //老板回来了

        //当老板回来时，前台小姐姐调用自己的notify方法通知程序员们 改变自身状态
        xiaojiejie.notify()
    </script>

到此这篇关于java设计模式之观察者模式的介绍及使用背景的文章就介绍到这了,更多相关观察者模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 手把手教你用Javascript实现观察者模式

    手把手教你用Javascript实现观察者模式

    目录 什么是观察者模式? 场景模拟 代码实现 重构代码 总结 什么是观察者模式? 观察者模式一种设计模式. 观察者模式定义了对象间的一种 一对多 的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新. 简单说明,在观察者模式中,有两个模型,一个观察者(observer)和一个被观察者(Observed).当被观察者发生改变或变化时,会通知观察者. 场景模拟 倘若即将到来双11,想要在双11购买商品的人就是观察者(Observer) 想要购买的商品就是被观察者(Obs

  • javascript设计模式 – 观察者模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 观察者模式原理与用法.分享给大家供大家参考,具体如下: 介绍:前面我们针对系统内一对多,多对多的情况做了解决方案,是使用中介者模式,将所有关联关系交由中介者处理.这一节我们介绍另外一种解决一对多问题的设计模式:观察者模式 观察者模式是使用频率最高的设计模式之一,用于建立一种对象与对象之间的依赖关系. 定义:定义对象之间的之间的一种一对多依赖关系,使得每当一个对象状态发生改变时,其相关依赖对象皆得到通知并被自动更新.观察者模式的别名包括发布-订阅模式

  • 原生js实现的观察者和订阅者模式简单示例

    本文实例讲述了原生js实现的观察者和订阅者模式.分享给大家供大家参考,具体如下: 观察者模式也叫 发布者-订阅者模式,发布者发布事件,订阅者监听事件并做出反应 在传统的前端解耦方面,观察者模式作为比较常见一种设计模式,大量使用在各种框架类库的设计当中. 核心代码: // eventProxy.js 'use strict'; const eventProxy = { onObj: {}, oneObj: {}, on: function(key, fn) { if(this.onObj[key]

  • JavaScript观察者模式原理与用法实例详解

    本文实例讲述了JavaScript观察者模式原理与用法.分享给大家供大家参考,具体如下: 观察者模式 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. * 它分为2个角色:(1)观察者 (2)被观察者 * 观察者模式的目的:对程序的内在变化进行观察,当其有变化的时候,你可以得知,并且可以做出相应的反应. 现在我们通过一个需求来学习该模

  • js观察者模式的弹幕案例

    js观察者模式的弹幕案例

    本文实例为大家分享了js观察者模式的弹幕案例代码,供大家参考,具体内容如下 观察者模式的弹幕案例 上代码 弹幕.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • JavaScript设计模式之观察者模式与发布订阅模式详解

    本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式.分享给大家供大家参考,具体如下: 学习了一段时间设计模式,当学到观察者模式和发布订阅模式的时候遇到了很大的问题,这两个模式有点类似,有点傻傻分不清楚,博客起因如此,开始对观察者和发布订阅开始了Google之旅.对整个学习过程做一个简单的记录. 观察者模式 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于行为型模式.在观察模式中共存

  • 怎样用JavaScript实现观察者模式

    概述 观察者模式又被称为发布-订阅模式,是设计模式中的一种行为型模式: 定义: 观察者模式定义了一种一对多的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知: 白话解释: 假如你去苹果专卖店买最新款的iphone11,因为iphone11刚出来不久,正处旺季,供货不足:当你去专卖店的时候,店员告诉你暂时没货了,但是你可以留下你的联系方式,如果货到了,会第一时间通知:当然你肯定不会每天都去专卖店问iphone11到货没有,也不会天天给专卖店打电话,因为你有你自己的工作和生

  • js观察者模式的介绍及使用

    目录 一.定义 二.使用场景 三.举个例子 四.Coding 一.定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象(通知者).这个主题对象观察到被观察者发生变化时,会通知所有的观察者对象,使它们能够自己更新自己 这里涉及了几个角色及他们自己功能: 观察者对象:可以更新自己 主题对象:可以添加观察者,移除观察者,通知观察者 被观察者:被主题对象监视,当被观察者发生变化时,主题对象会通知观察者更新自己的状态 二.使用场景 当一个对象改变需要同时改变其他对象的时候,而

  • java设计模式之观察者模式的介绍及使用

    一.定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象(通知者).这个主题对象观察到被观察者发生变化时,会通知所有的观察者对象,使它们能够自己更新自己 这里涉及了几个角色及他们自己功能: 观察者对象:可以更新自己 主题对象:可以添加观察者,移除观察者,通知观察者 被观察者:被主题对象监视,当被观察者发生变化时,主题对象会通知观察者更新自己的状态 二.使用场景 当一个对象改变需要同时改变其他对象的时候,而且不需要知道有多少个对象需要改变 三.举个例子 如果干巴巴的概

  • js实现带有介绍的Select列表菜单实例

    js实现带有介绍的Select列表菜单实例

    本文实例讲述了js实现带有介绍的Select列表菜单.分享给大家供大家参考.具体如下: 带有介绍的Select列表菜单特效代码,并不是导航菜单,这是表单中常用的下拉列表菜单,里面定义的菜单名称和链接都可以自己修改,不同的是添加了一个说明功能,鼠标点击列表中内容的时候,会浮动出本条内容的介绍,另外文本框内的内容也会跟着改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-info-select-menu-codes/ 具体代码如下: <ht

  • 详解js正则表达式语法介绍

    本文介绍了js正则表达式,具体如下: 1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的一个字符. 举例1:表达式 "c",在匹配字符串 "abcde" 时,匹配结果是:成功:匹配到的内容是:"c":匹配到的位置是:开始于2,结束于3.(注:下标从0开始还是从1开始,因当前编程语言的不同而可能不同)

  • Jquery提交表单 Form.js官方插件介绍

    先说说常用的Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2.Form插件下载 form.js 3.Form插件的简单入门 第一步:先增加一个表单 代码: 复制代码 代码如下: <form id="myForm" action="comment.php" method="post"> Name: <inpu

  • PHP观察者模式实例分析【对比JS观察者模式】

    本文实例讲述了PHP观察者模式.分享给大家供大家参考,具体如下: 1.用js实现观察者模式 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{width: 100px;height: 100px;border: 1px #999 solid;margin-bottom: 5px;} </style> <

  • js jquery数组介绍

    1.数组的创建 var arr=new Array(); 2.查找数组中的元素 复制代码 代码如下: for(var i=0;i<arr.length;i++) if(arr[i]==temp) return true; 3.下面比较一下Array和Object的特性: Array: 新建:var ary = new Array(); 或 var ary = []; 增加:ary.push(value); 删除:delete ary[n]; 遍历:for ( var i=0 ; i < ary

  • js 剪切板的用法(clipboardData.setData)与js match函数介绍

    经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中.其实这个功能实现起来也不难,核心就是用到了window子对象clipboardData的一个方法:setData()语法:    clipboardData.setData(sDataFormat, sData) 参数:sDataFormat:要复制的内容的格式:sData:要复制的内容. 返回值:复制成功返回true:失败返回false. 复制代码 代码如下: <script language="JavaSc

  • JS 正则表达式用法介绍

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表

随机推荐