返回顶部
首页 > 资讯 > 前端开发 > JavaScript >手把手教你用Javascript实现观察者模式
  • 321
分享到

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

2024-04-02 19:04:59 321人浏览 安东尼
摘要

目录什么是观察者模式?场景模拟代码实现重构代码总结 什么是观察者模式? 观察者模式一种设计模式。 观察者模式定义了对象间的一种 一对多 的依赖关系,当一个对象的状态

什么是观察者模式?

  • 观察者模式一种设计模式
  • 观察者模式定义了对象间的一种 一对多 的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。
  • 简单说明,在观察者模式中,有两个模型,一个观察者(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");

在这里插入图片描述

重构代码


//观察者设计模式
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");

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: 手把手教你用Javascript实现观察者模式

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

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

猜你喜欢
  • 手把手教你用Javascript实现观察者模式
    目录什么是观察者模式?场景模拟代码实现重构代码总结 什么是观察者模式? 观察者模式一种设计模式。 观察者模式定义了对象间的一种 一对多 的依赖关系,当一个对象的状态...
    99+
    2024-04-02
  • 怎样用JavaScript实现观察者模式
    目录概述观察者模式的应用场景观察者模式的实现总结概述 观察者模式又被称为发布-订阅模式,是设计模式中的一种行为型模式; 定义: 观察者模式定义了一种一对多的对象依赖关系,当被依赖的对...
    99+
    2024-04-02
  • 怎么用Javascript实现观察者模式
    本篇内容主要讲解“怎么用Javascript实现观察者模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript实现观察者模式”吧!什么是观察者模式?观察者模式一种设计模式。观...
    99+
    2023-06-21
  • Javascript中如何实现观察者模式
    本篇文章为大家展示了Javascript中如何实现观察者模式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。基础知识观察者模式定义了对象间的一种一对多依赖关系,每当一...
    99+
    2024-04-02
  • 一文带你理解JavaScript观察者模式
    目录为什么需要观察者模式代码示例应用场景DOM事件监听:数据绑定自定义事件Promise对象Pub/Sub模式观察者模式(Observer Pattern)是一种行为型设计模式,它定...
    99+
    2023-05-19
    JavaScript 观察者模式 JavaScript 观察者
  • JavaScript设计模式中的观察者模式怎么实现
    本文小编为大家详细介绍“JavaScript设计模式中的观察者模式怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript设计模式中的观察者模式怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知...
    99+
    2023-07-02
  • php如何实现观察者模式
    这篇文章主要介绍了php如何实现观察者模式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。php实现观察者模式的方法:首先创建一个PHP示例文件;然后实现观察者向主题注册;最后...
    99+
    2023-06-14
  • JAVA怎样实现观察者模式
    这篇文章将为大家详细讲解有关JAVA怎样实现观察者模式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。概念观察者模式又叫做发布-订阅模式,是对象间的一对多的关系,当一个对象的状态发生改变时,所有依赖于它的对...
    99+
    2023-06-29
  • golang观察者模式怎么实现
    在Go语言中,可以使用接口和通道来实现观察者模式。首先,定义一个观察者接口,其中有一个更新方法,用于接收被观察者的通知:gotype...
    99+
    2023-10-20
    golang
  • java观察者模式怎么实现
    要实现观察者模式,你可以按照以下步骤进行: 定义观察者接口(Observer):该接口应该包含一个方法,用于接收被观察者的通知。 ...
    99+
    2023-10-27
    java
  • 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
  • vue中怎么实现观察者模式
    vue中怎么实现观察者模式,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1 响应式原理让我们先从相应式原理开始。我们可以通过O...
    99+
    2024-04-02
  • javascript观察者模式如何实现自动刷新效果
    小编给大家分享一下javascript观察者模式如何实现自动刷新效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下/...
    99+
    2024-04-02
  • 手把手教你使用TensorFlow2实现RNN
    目录概述权重共享计算过程:案例数据集RNN 层获取数据完整代码概述 RNN (Recurrent Netural Network) 是用于处理序列数据的神经网络. 所谓序列数据, 即...
    99+
    2024-04-02
  • PHP设计模式之观察者模式怎么实现
    这篇文章主要介绍“PHP设计模式之观察者模式怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP设计模式之观察者模式怎么实现”文章能帮助大家解决问题。PHP观察者模式(Observer Pa...
    99+
    2023-07-05
  • 详解从vue的组件传值着手观察者模式
    目录观察者模式Vue传值第一步,我们先在main.js中注册一下bus第二步,我们开始发送消息第三步,在组件三中接收消息vue的机制观察者模式存在的意义观察者模式 首先,提到观察者模...
    99+
    2024-04-02
  • JavaScript观察者模式:掌控事件流,实现数据同步
    1. JavaScript观察者模式概述 JavaScript观察者模式是一种设计模式,它允许对象订阅并响应其他对象的事件。这种模式非常适合用于管理事件流和实现数据同步。在观察者模式中,有一个被观察者对象(Subject)和多个观察者对...
    99+
    2024-02-03
    JavaScript 观察者模式 事件流 数据同步
  • 揭秘JavaScript观察者模式:轻松实现跨组件通信
    一、JavaScript观察者模式介绍 JavaScript观察者模式是一种设计模式,它允许对象之间进行通信,而不必知道彼此的存在。这种模式非常适合用于构建松散耦合的应用程序。 观察者模式包含以下几个角色: Subject (主题): ...
    99+
    2024-02-03
    JavaScript 观察者模式 跨组件通信 松散耦合。
  • C#中的EventHandler观察者模式怎么实现
    这篇文章主要介绍“C#中的EventHandler观察者模式怎么实现”,在日常操作中,相信很多人在C#中的EventHandler观察者模式怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#中的Eve...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作