JavaScript设计模式中的观察者模式

目录
  • 观察者设计模式
  • 初始数据
  • 被观察者
  • 观察者

观察者设计模式

观察者设计模式中分为被观察者和观察者，当被观察者触发了某个边界条件，观察者就会触发事件，这里需要俩个构造函数进行观察者设计模式一个是被观察者一个是观察者

我们来利用观察者监听对象某个属性的修改操作，对象某个属性的修改会触发观察者的某些方法

初始数据

   let obj = {
            name: "若水"
        }

被观察者

创建被观察者，我们给被观察者定义一个初始化状态，用于记录观察属性的初始值，还需定义一个观察者方法队列，用于对观察者的增删操作且还用于触发观察者身上的方法，被观察者类身上还有三个方法，修改被观察者属性方法，修改被观察者属性方法一是用于修改被观察者值，二是用于触发自身上的观察者方法，添加观察者方法，用于给自身上添加观察者，删除观察者方法，用于删除自身上的观察者

 // 被观察者类
        class Subject {
        //未传值初始为空
            constructor(state = "") {
                // 初始状态
                this.state = state
                // 观察者方法队列
                this.observsers = []
            }
            // 设置自己的状态
            setState(val) {
            // 告诉观察者目前改变成了什么状态
                this.state = val;
                // 同时需要把自己身上的观察者方法全部触发
                this.observsers.map(item => {
                    // item是每一个观察者，每一个观察者是一个对象
                    item.callback(this.state);
                })
            }
            // 添加观察者
            addObserver(observer) {
                // 把观察者传递进来
                this.observsers.push(observer)
            }
            // 删除观察者
            removeObserver(observer) {
                // 过滤出来非当前观察者的观察者
                this.observsers = this.observsers.filter(obs => obs !== observer);
            }
        }

观察者

创建观察者，用于定义观察者的身份以及执行观察者的方法，观察者有一个属性是表示自己的身份，一个是自己方法，用于被观察者触发使用

    // 观察者类
        class Observer {
            // name需要观察的参数
            // callback 观察的参数达到边界条件触发的事件
            constructor(name, callback = () => { }) {
                this.name = name;
                this.callback = callback;
            }
        }

最后我们来使用一下：

     // 创建观察者
        const ObserverName = new Observer('监听obj改变', () => { console.log('obj发生改变'); })
        // 创建一个被观察者
        const name = new Subject(obj.name)
        // 添加一个观察者
        name.addObserver(ObserverName)
        //触发观察者方法
        name.setState('前端若水')

观察者设计模式适用于监听一对多的操作，例如监听对象属性的修改等等，观察者模式能够降低代码耦合度，提升可扩展性，但是被观察者拥有过多的观察者进行监听会提高运行时间以及程序的复杂程度

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

赞 (0)

相关推荐

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

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

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

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

  • Javascript设计模式之观察者模式的多个实现版本实例

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 使用观察者模式的好处: 1.支持简单的广播通信,自动通知所有已经订阅过的对象. 2.页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性. 3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用. 正文(版本一) JS里对观察者模式的实现是通过回调来实现的,我们来先

  • JavaScript设计模式之观察者模式（发布者-订阅者模式）

    观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick  =  function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我

  • JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

    本文实例讲述了JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法.分享给大家供大家参考,具体如下: 观察者模式,又称为发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己的状态. 在观察者模式中,并不是一个对象调用另一个对象的方法,而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知.订阅者也称为观察者,而被观察的对象称为发布者或主题.当发生了一个重要的事件时,发布

  • Javascript设计模式之观察者模式(推荐)

    推荐阅读: JavaScript观察者模式(经典) 1.什么是观察者模式 观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知.(其实sql server中的发布订阅也是这个道理) 2.通俗解释 假如以前村里的广播是一个观察者,那么每个村民就是被观察对象,如果村子里有通知,政策发生改变的时候,就需要通过广播把这个消息发布出去,而不用直接一家家的跑去发通知. 3.代码 <!DOCTYPE html> <html lang=&

  • NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】

    本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro

  • JS设计模式之观察者模式实现实时改变页面中金额数的方法

    JS设计模式之观察者模式实现实时改变页面中金额数的方法

    本文实例讲述了JS设计模式之观察者模式实现实时改变页面中金额数的方法.分享给大家供大家参考,具体如下: 观察者设计模式概念: 有时被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者(每个处的主账号金额函数)对象同时监听某一个主题对象(修改子账号金额后调用的deliver的对象Publisher).这个主题对象在状态(调用deliver方法)发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 在一个会员管理系统中,主账号给子账号充值金额的功能. 场景:主账号有1000

  • JavaScript设计模式之观察者模式实例详解

    JavaScript设计模式之观察者模式实例详解

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

  • JavaScript设计模式中的观察者模式

    目录 观察者设计模式 初始数据 被观察者 观察者 观察者设计模式 观察者设计模式中分为被观察者和观察者,当被观察者触发了某个边界条件,观察者就会触发事件,这里需要俩个构造函数进行观察者设计模式一个是被观察者一个是观察者 我们来利用观察者监听对象某个属性的修改操作,对象某个属性的修改会触发观察者的某些方法 初始数据 let obj = { name: "若水" } 被观察者 创建被观察者,我们给被观察者定义一个初始化状态,用于记录观察属性的初始值,还需定义一个观察者方法队列,用于对观察者

  • JavaScript设计模式中的桥接和中介者模式

    JavaScript设计模式中的桥接和中介者模式

    目录 一.桥接设计模式 桥接设计模式在工作中的使用 二.JavaScript中介者模式 生活中的中介者 中介者设计模式案例 业务中的中介者 一.桥接设计模式 桥接设计模式是一种偏向于组合的设计模式,而非继承的设计模式,实现的细节从一个模块推送给另一个具有单独模块的对象 桥接设计模式在开发中常用于事件监控,还有数组的一些方法都能够体现出来桥接设计模式的思想,例如数组方法的forEach方法 桥接设计模式在工作中的使用 有一个很多页面的网站,我们预期是让用户可以选择修改网站的主体,如果给每个页面都创

  • JavaScript 设计模式中的代理模式详解

    JavaScript 设计模式中的代理模式详解

    前言: 代理模式,代理(proxy)是一个对象,它可以用来控制对另一个对象的访问. 现在页面上有一个香港回归最想听的金典曲目列表: <ul id="container"> <li>我的中国心</li> <li>东方之珠</li> <li>香港别来无恙</li> <li>偏偏喜欢你</li> <li>相亲相爱</li> </ul> 需要给页面添加

  • 结合ES6 编写 JavaScript 设计模式中的结构型模式

    目录 前言 什么是设计模式? 结构型设计模式 适配器模式 实例 桥接模式 实例 组合模式 实例 装饰者模式 实例 门面模式 实例 享元模式 实例 代理模式 实例 前言 本文将对 20 多种 JavaScript 设计模式进行简单概述,然后结合 ES6 类的方式来编写实例代码展示其使用方式. JavaScript 在现代前端中扮演重要的角色,相比过去能够做的事情已经不在一个级别上了.JavaScript 最大的特征是其灵活性,一般只要敢想敢写,可以把程序写得很简单,有可以写得很复杂.其灵活性导致编

  • 理解JavaScript设计模式中的单例模式

    单例模式(Singleton Pattern)是最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 单例模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建.这个类提供了一种访问其唯一的对象的方式,可以直接访问,不需要实例化该类的对象. 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯一实例. 3.单例类必须给所有其他对象提供这一实例. 这样做的缺点就是:没有接口,不能继承,与单一职责原则冲突,一个类应该只关心内部逻辑,而不关

  • iOS应用开发中使用设计模式中的观察者模式的实例

    iOS应用开发中使用设计模式中的观察者模式的实例

    在软件开发中,无论是那种高级语言中总会伴随着一些最为常用的设计模式,即便就如iOS开发中与我们打交道最多的无非就是单例模式.观察者模式和工厂模式了,当然了其他的设置模式也同样存在在编程的很多地方.下面就就让我们简单的了解下观察者模式吧! 观察者模式本质上时一种发布-订阅模型,用以消除具有不同行为的对象之间的耦合,通过这一模式,不同对象可以协同工作,同时它们也可以被复用于其他地方Observer从Subject订阅通知,ConcreteObserver实现重现ObServer并将其重载其updat

  • 设计模式中的观察者模式在Ruby编程中的运用实例解析

    观察者模式(有时又被称为发布/订阅模式)是软件设计模式的一种. 在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知. 这通常透过呼叫各观察者所提供的方法来实现. 实现观察者模式的时候要注意,观察者和被观察对象之间的互动关系不能 体现成类之间的直接调用,否则就将使观察者和被观察对象之间紧密的耦合起来, 从根本上违反面向对象的设计的原则.无论是观察者"观察"观察对象, 还是被观察者将自己的改变"通知"观察者,都不应该直接调用.

  • 用Java设计模式中的观察者模式开发微信公众号的例子

    用Java设计模式中的观察者模式开发微信公众号的例子

    还记得警匪片上,匪徒们是怎么配合实施犯罪的吗?一个团伙在进行盗窃的时候,总有一两个人在门口把风--如果有什么风吹草动,则会立即通知里面的同伙紧急撤退.也许放风的人并不一定认识里面的每一个同伙:而在里面也许有新来的小弟不认识这个放风的.但是这没什么,这个影响不了他们之间的通讯,因为他们之间有早已商定好的暗号. 呵呵,上面提到的放风者.偷窃者之间的关系就是观察者模式在现实中的活生生的例子. 观察者(Observer)模式又名发布-订阅(Publish/Subscribe)模式.GOF给观察者模式如下

  • C++设计模式中的观察者模式一起来看看

    设计模式:观察者模式 观察者模式也称发布订阅模式,发布者发布消息,订阅者接收消息. 发布者接口 #ifndef __observerPatterns_publish_hpp__ #define __observerPatterns_publish_hpp__ #include "observerPatterns_subscribe.hpp" class observerPatterns_publish { public: virtual void registerObjectSubsc

  • 学习JavaScript设计模式(接口)

    1.接口概述 1).什么是接口? 接口是提供了一种用以说明一个对象应该具有哪些方法的手段.尽管它可以表明这些方法的语义,但它并不规定这些方法应该如何实现. 2). 接口之利 促进代码的重用. 接口可以告诉程序员一个类实现了哪些方法,从而帮助其使用这个类. 有助于稳定不同类之前的通信方式. 测试和调式因此也能变得更轻松. 在javascript这种弱类型语言中,类型不匹配错误很难跟踪.使用接口可以让这种错误的查找变午更容易一点,因为此时如果一个对象不像所要求的类型,或者没有实现必要的方法,那么你会

随机推荐