我的编程空间,编程开发者的网络收藏夹
学习永远不晚

怎样用JavaScript实现观察者模式

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

怎样用JavaScript实现观察者模式

概述

观察者模式又被称为发布-订阅模式,是设计模式中的一种行为型模式;

定义:

观察者模式定义了一种一对多的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知;

白话解释:

假如你去苹果专卖店买最新款的iphone11,因为iphone11刚出来不久,正处旺季,供货不足;当你去专卖店的时候,店员告诉你暂时没货了,但是你可以留下你的联系方式,如果货到了,会第一时间通知;当然你肯定不会每天都去专卖店问iphone11到货没有,也不会天天给专卖店打电话,因为你有你自己的工作和生活,不可能有那么多闲暇时间;所以此时,店员让你留下联系方式,到货了第一时间通知你,不会给你带来麻烦,而你只需要等着专卖店的电话即可;而这种方法就是一种典型的观察者模式;

首先我们还是来分析一下:

1.订阅方法:我们把联系方式给专卖店店员是属于一种消息订阅的消息,因为只有这样你才能及时的知道iphone11到货了,所有我们需要一个订阅行为的具体方法;

2.预订列表:要知道iphone11是属于新版iphone,所以肯定不会是只有你一个人去预订,所以店员为了方便统计还需要一个预订列表来统计所有的预订者的联系方式以及预订手机版本信息,所以我们这里先给它定义为一个对象;key代表是预订者的联系方式,value代表预订手机版本信息;

3.发布方法:当iphone11到货的时候,专卖店肯定要根据预订列表来进行统一发布消息("iphone11到货了,大家快来抢!!!"),所以专卖店需要一个发布方法来实行具体的发布行为;、

4.取消订阅:万物相对,能订阅肯定就能取消订阅;在等待iphone11到货通知的时候,你急着用手机,所以直接买了华为的某款,所以iphone11暂时对你来说需求不大,因为你已经有了手机所以专卖店的iphone11是否到货对你来说没有任何意义了;所以此时你不想被打扰,需要取消订阅消息;所以我们需要一个取消订阅方法来实现具体的取消订阅的行为;

观察者模式的应用场景

1、DOM事件

如果你是一个前端开发人员,不管你读这篇文章之前是否已经了解观察者模式,但是我能肯定你已经用过观察者模式;


document.body.addEventListener('click', function() {
    console.log('hello world!');
});

这段代码看着眼熟吗?是的,这是一个DOM事件的监听;我们通过给body订阅click事件(click相当于上面的订阅方法),因为浏览器并不知道你什么时候点击鼠标,所以等你触发click事件的时候才会触发函数给你发布通知(发布方法);DOM事件就是一个观察者模式的实现;

2、vue双向绑定v-model

我们作为前端开发人员,肯定知道vue是一个MVVM模式的框架;vue的核心就是双向绑定,那么双向绑定的实现实际上就是一种观察者模式;因为你首先绑定了一个数据之后(订阅方法),浏览器并不知道你什么时候修改,你页面上所有绑定了该数据或者依赖该数据的节点其实就是一个预订列表,只有等你修改了该数据的值的时候,vue才会通知(发布方法)到依赖该数据的方法/数据进行相应的操作或刷新;

当然观察者模式绝不仅限于这俩种实现场景,在我们的生活中、业务场景中有很多观察者模式的示例,之前我们第一篇工厂模式介绍设计模式的时候就说过了,设计模式是一种解决问题的思路而非一种固定的公式,那么我们怎么实现观察者模式呢?

观察者模式的实现


//定义商家
var merchants = {};
//定义预订列表
merchants.orderList = {};
//将增加的预定者添加到预订列表中   (订阅方法)
merchants.listen = function(id,info){
    //如果存在
    if(!this.orderList[id]){
        // (预订列表)
        this.orderList[id] = [];
    }
    // 将用户的预定的产品信息存入到数组中
    this.orderList[id].push(info);
}
//发布信息(发布方法)
merchants.publish = function(){
    var id = Array.prototype.shift.call(arguments);
    var infos = this.orderList[id];
    if(!infos || infos.length === 0){
        console.log("您还没有预定信息");
        return false;
    }

    for(var i = 0;i < infos.length;i++){
        console.log("预定成功");
        console.log("尊敬的用户:")
        infos[i].apply(this,arguments);
        console.log("到货了");
    }
}
//取消订阅  
merchants.remove = function(id,fn){
    var infos = this.orderList[id];
    if(!infos){ return false}

    if(!fn){
        console.log(123);
    }else{
        for(var i = 0;i < infos.length;i++){
            if(infos[i] === fn){
                infos.splice(i,1);
            }
        }
    }
}
let customeA = function(){
    console.log("黑色尊享版一台");
}

merchants.listen("15172103336",customeA);
merchants.remove("15172103336",customeA);
merchants.publish("15172103336");

上面的代码稍微有点长,不过没有很难;首先我们是定义了一个对象是作为商家,然后定义了一个空的对象作为预订列表,再一步步的实现我们的订阅方法和发布以及取消订阅的方法;逻辑不复杂,但是有一些语法需要讲解一下:

发布方法中的var id = Array.prototype.shift.call(arguments);这句的意思是将merchants.publish("15172103336");方法调用的时候第一个参数返回给它然后复制为id,所以其实此时的id值为”15172103336“;

infos[i].apply(this,arguments);这个方法也不是特别好理解,首先infos里装的是预订者的手机号码以及手机版本信息,所以我们infos[i].apply(this,arguments);这个方法其实就是将"15172103336"对应的手机版本信息函数进行调用了一遍;实际上等于infos[i](arguments);

总结

观察者模式不管是在前端领域还是在现实生活中的应用都是有很常见的场景,学好观察者模式有利用我们学习vue的源码知识,当然不仅限于此,所以观察者模式值得我们好好学习,一句话:"你品,你细品!" 今天付出的努力,在日后总会换成工资来回报你的!

以上就是怎样用JavaScript实现观察者模式的详细内容,更多关于JavaScript观察者模式的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

怎样用JavaScript实现观察者模式

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么用Javascript实现观察者模式

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

JAVA怎样实现观察者模式

这篇文章将为大家详细讲解有关JAVA怎样实现观察者模式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。概念观察者模式又叫做发布-订阅模式,是对象间的一对多的关系,当一个对象的状态发生改变时,所有依赖于它的对
2023-06-29

JavaScript设计模式中的观察者模式怎么实现

本文小编为大家详细介绍“JavaScript设计模式中的观察者模式怎么实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript设计模式中的观察者模式怎么实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知
2023-07-02

java观察者模式怎么实现

要实现观察者模式,你可以按照以下步骤进行:定义观察者接口(Observer):该接口应该包含一个方法,用于接收被观察者的通知。public interface Observer {void update();}定义被观察者接口(Subje
2023-10-27

golang观察者模式怎么实现

在Go语言中,可以使用接口和通道来实现观察者模式。首先,定义一个观察者接口,其中有一个更新方法,用于接收被观察者的通知:gotype Observer interface {Update(string)}接下来,定义一个被观察者结构体,其中
2023-10-20

JavaScript 简单实现观察者模式和发布-订阅模式

JavaScript 简单实现观察者模式和发布-订阅模式 1. 观察者模式1.1 什么是观察者模式1.2 代码实现 2. 发布-订阅模式2.1 什么是发布-订阅模式2.2 代码实现2.2.1 基础版2.2.2 取消订阅2.2.3
2023-08-21

php如何实现观察者模式

这篇文章主要介绍了php如何实现观察者模式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。php实现观察者模式的方法:首先创建一个PHP示例文件;然后实现观察者向主题注册;最后
2023-06-14

PHP设计模式之观察者模式怎么实现

这篇文章主要介绍“PHP设计模式之观察者模式怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP设计模式之观察者模式怎么实现”文章能帮助大家解决问题。PHP观察者模式(Observer Pa
2023-07-05

Java设计模式中的观察者模式怎样的

今天就跟大家聊聊有关Java设计模式中的观察者模式怎样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。一、观察者模式的定义和特点观察者模式的定义:指多个对象间存在一对多的依赖关系,当
2023-06-22

观察者模式的实际应用

设计模式不管是在面试还是工作中都会遇到,但我经常碰到小伙伴抱怨实际工作中自己应用设计模式的机会非常小。

C#中的EventHandler观察者模式怎么实现

这篇文章主要介绍“C#中的EventHandler观察者模式怎么实现”,在日常操作中,相信很多人在C#中的EventHandler观察者模式怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C#中的Eve
2023-06-29

golang观察者模式实现的代码怎么写

在Go语言中实现观察者模式,可以按照以下步骤进行:定义主题(Subject)接口,包含以下方法:type Subject interface {Register(observer Observer) // 注册观察者Unregiste
2023-10-23

揭秘JavaScript观察者模式:轻松实现跨组件通信

JavaScript观察者模式是一种设计模式,它允许对象之间进行通信,而不必知道彼此的存在。这种模式非常适合用于构建松散耦合的应用程序。
揭秘JavaScript观察者模式:轻松实现跨组件通信
2024-02-03

编程热搜

目录