返回顶部
首页 > 资讯 > 精选 >怎么用Javascript实现观察者模式
  • 875
分享到

怎么用Javascript实现观察者模式

2023-06-21 22:06:23 875人浏览 泡泡鱼
摘要

本篇内容主要讲解“怎么用javascript实现观察者模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript实现观察者模式”吧!什么是观察者模式?观察者模式一种设计模式。观

本篇内容主要讲解“怎么用javascript实现观察者模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript实现观察者模式”吧!

    什么是观察者模式?

    • 观察者模式一种设计模式

    • 观察者模式定义了对象间的一种 一对多 的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。

    • 简单说明,在观察者模式中,有两个模型,一个观察者(observer)和一个被观察者(Observed)。当被观察者发生改变或变化时,会通知观察者。

    场景模拟

    • 倘若即将到来双11,想要在双11购买商品的人就是观察者(Observer)

    • 想要购买的商品就是被观察者(Observed)

    • 为了更加形象,添加一个商家来改变商品的价格,商家也就是发布者(Publish)

    • 当双11当天,商家(发布者(Publish))会修改商品(被观察者(Observed))的价格,然后关注订阅该商品的人(观察者(Observer))就会收到信息通知。

    代码实现

    //观察者设计模式//发布者 -->商家var shopObj = {};//商品列表 [key:[]], key为商品名shopObj.list = [];//订阅方法shopObj.listen = function ( key, fn) {// key是商品型号, fn这个函数就是订阅的行为    if (!this.list[key]) {        this.list[key] = [];    }    this.list[key].push(fn);//往商品名为key的商品列表中添加订阅}//发布消息方法shopObj.publish = function (key) {    //var key = arguments[0];//如果不传参数key,这样也可以    var fns = this.list[key];    // for (var i = 0; i < fns.length; i++) {        for(var i = 0 ,fn; fn = fns[i++];){        //执行订阅的函数fn  arguemnts储存的所有实参        // var fn = fns[i++];        fn.apply(this, arguments)    }}//A用户添加订阅shopObj.listen("华为", function (brand, model) {    console.log( "A用户收到:" + brand + model + "手机降价了");})//B用户添加订阅shopObj.listen("华为", function (brand, model) {    console.log("B用户收到:" + brand + model + "手机降价了");})//c用户添加订阅shopObj.listen("小米", function (brand, model) {    console.log("C用户收到:" + brand + model + "手机降价了");})//双11 商家发布消息华为降价的信息shopObj.publish("华为", "p30");shopObj.publish("小米", "Mix4");

    怎么用Javascript实现观察者模式

    重构代码

    //观察者设计模式var Eevent = {    //商品列表 [key:[]], key为商品名    list: [],    //订阅方法    listen: function (key, fn) {// key是商品型号, fn这个函数就是订阅的行为        if (!this.list[key]) {            this.list[key] = [];        }        this.list[key].push(fn);    },    //发布消息方法    publish: function (key) {        //var key = arguments[0];//如果不传参数key,这样也可以        var fns = this.list[key];        // for (var i = 0; i < fns.length; i++) {        for (var i = 0, fn; fn = fns[i++];) {            //执行订阅的函数fn  arguemnts储存的所有实参            // var fn = fns[i++];            fn.apply(this, arguments)        }    }}//观察者对象初始化var initEvent = function (obj) {    for (var i in Eevent) {        obj[i] = Eevent[i];    }}//发布者 -->商家var shopObj = {};initEvent(shopObj);//A用户添加订阅shopObj.listen("华为", function (brand, model) {    console.log("A用户收到:" + brand + model + "手机降价了");})//B用户添加订阅shopObj.listen("华为", function (brand, model) {    console.log("B用户收到:" + brand + model + "手机降价了");})//c用户添加订阅shopObj.listen("小米", function (brand, model) {    console.log("C用户收到:" + brand + model + "手机降价了");})//双11 商家发布消息华为降价的信息shopObj.publish("华为", "p30");shopObj.publish("小米", "Mix4");

    怎么用Javascript实现观察者模式

    到此,相信大家对“怎么用Javascript实现观察者模式”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    --结束END--

    本文标题: 怎么用Javascript实现观察者模式

    本文链接: https://www.lsjlt.com/news/301151.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    猜你喜欢
    • 怎么用Javascript实现观察者模式
      本篇内容主要讲解“怎么用Javascript实现观察者模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript实现观察者模式”吧!什么是观察者模式?观察者模式一种设计模式。观...
      99+
      2023-06-21
    • 怎样用JavaScript实现观察者模式
      目录概述观察者模式的应用场景观察者模式的实现总结概述 观察者模式又被称为发布-订阅模式,是设计模式中的一种行为型模式; 定义: 观察者模式定义了一种一对多的对象依赖关系,当被依赖的对...
      99+
      2024-04-02
    • golang观察者模式怎么实现
      在Go语言中,可以使用接口和通道来实现观察者模式。首先,定义一个观察者接口,其中有一个更新方法,用于接收被观察者的通知:gotype...
      99+
      2023-10-20
      golang
    • java观察者模式怎么实现
      要实现观察者模式,你可以按照以下步骤进行: 定义观察者接口(Observer):该接口应该包含一个方法,用于接收被观察者的通知。 ...
      99+
      2023-10-27
      java
    • Javascript中如何实现观察者模式
      本篇文章为大家展示了Javascript中如何实现观察者模式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。基础知识观察者模式定义了对象间的一种一对多依赖关系,每当一...
      99+
      2024-04-02
    • JavaScript设计模式中的观察者模式怎么实现
      本文小编为大家详细介绍“JavaScript设计模式中的观察者模式怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript设计模式中的观察者模式怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知...
      99+
      2023-07-02
    • vue中怎么实现观察者模式
      vue中怎么实现观察者模式,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1 响应式原理让我们先从相应式原理开始。我们可以通过O...
      99+
      2024-04-02
    • JAVA怎样实现观察者模式
      这篇文章将为大家详细讲解有关JAVA怎样实现观察者模式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。概念观察者模式又叫做发布-订阅模式,是对象间的一对多的关系,当一个对象的状态发生改变时,所有依赖于它的对...
      99+
      2023-06-29
    • 手把手教你用Javascript实现观察者模式
      目录什么是观察者模式?场景模拟代码实现重构代码总结 什么是观察者模式? 观察者模式一种设计模式。 观察者模式定义了对象间的一种 一对多 的依赖关系,当一个对象的状态...
      99+
      2024-04-02
    • PHP设计模式之观察者模式怎么实现
      这篇文章主要介绍“PHP设计模式之观察者模式怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP设计模式之观察者模式怎么实现”文章能帮助大家解决问题。PHP观察者模式(Observer Pa...
      99+
      2023-07-05
    • php如何实现观察者模式
      这篇文章主要介绍了php如何实现观察者模式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。php实现观察者模式的方法:首先创建一个PHP示例文件;然后实现观察者向主题注册;最后...
      99+
      2023-06-14
    • JavaScript设计模式中的观察者模式
      目录观察者设计模式初始数据被观察者观察者观察者设计模式 观察者设计模式中分为被观察者和观察者,当被观察者触发了某个边界条件,观察者就会触发事件,这里需要俩个构造函数进行观察者设计模式...
      99+
      2024-04-02
    • C#中的EventHandler观察者模式怎么实现
      这篇文章主要介绍“C#中的EventHandler观察者模式怎么实现”,在日常操作中,相信很多人在C#中的EventHandler观察者模式怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#中的Eve...
      99+
      2023-06-29
    • JavaScript 简单实现观察者模式和发布-订阅模式
      JavaScript 简单实现观察者模式和发布-订阅模式 1. 观察者模式1.1 什么是观察者模式1.2 代码实现 2. 发布-订阅模式2.1 什么是发布-订阅模式2.2 代码实现2.2.1 基础版2.2.2 取消订阅2.2.3...
      99+
      2023-08-21
      javascript 设计模式
    • 如何使用PHP实现观察者模式
      小编给大家分享一下如何使用PHP实现观察者模式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!观察者模式为您提供了避免组件之间紧密...
      99+
      2024-04-02
    • golang观察者模式实现的代码怎么写
      在Go语言中实现观察者模式,可以按照以下步骤进行: 定义主题(Subject)接口,包含以下方法: type Subject i...
      99+
      2023-10-23
      golang
    • Java观察者模式有什么用
      这篇文章主要为大家展示了“Java观察者模式有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Java观察者模式有什么用”这篇文章吧。一、观察者模式的定义和特点观察者模式的定义:指多个对象间...
      99+
      2023-06-22
    • java观察者模式是什么
      本篇内容介绍了“java观察者模式是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!观察者模式① 观察者模式的概念观察者模式(Observ...
      99+
      2023-06-19
    • 设计模式-观察者模式(Observer)
      讲故事(user story) 假设我们是一个优惠券提供平台,故事就发生在顾客在我们平台采购完成支付成功后。 支付完成后平台要进行的一些操作: 短信通知客户已经生成订单 增加顾客的积分 开始按订单需求制券 ​ ...
      99+
      2018-06-15
      设计模式-观察者模式(Observer)
    • PHP设计模式(观察者模式)
      PHP 设计模式之观察者模式 介绍 现在有两派,有的人建议使用设计模式,有的人不建议使用设计模式! 这就向写文章一样,有的人喜欢文章按照套路走,比如叙事性质的文章,时间,地点,人物,...
      99+
      2024-04-02
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作