• 售前

  • 售后

热门帖子
入门百科

怎样用JavaScript实现观察者模式

[复制链接]
南黑天家 显示全部楼层 发表于 2021-10-26 13:43:10 |阅读模式 打印 上一主题 下一主题
目录


  • 概述
  • 观察者模式的应用场景
  • 观察者模式的实现
  • 总结

概述

观察者模式又被称为发布-订阅模式,是计划模式中的一种举动型模式;
界说:
观察者模式界说了一种一对多的对象依靠关系,当被依靠的对象的状态发生了改变,全部依靠它的对象都会得到关照;
白话表明:
假如你去苹果专卖店买最新款的iphone11,因为iphone11刚出来不久,正处旺季,供货不敷;当你去专卖店的时间,伙计告诉你暂时没货了,但是你可以留下你的接洽方式,假如货到了,会第一时间关照;当然你肯定不会每天都去专卖店问iphone11到货没有,也不会每天给专卖店打电话,因为你有你自己的工作和生存,不可能有那么多闲暇时间;以是此时,伙计让你留下接洽方式,到货了第一时间关照你,不会给你带来麻烦,而你只需要等着专卖店的电话即可;而这种方法就是一种典型的观察者模式;
首先我们还是来分析一下:
1.订阅方法:我们把接洽方式给专卖店伙计是属于一种消息订阅的消息,因为只有这样你才气实时的知道iphone11到货了,全部我们需要一个订阅举动的详细方法;
2.预订列表:要知道iphone11是属于新版iphone,以是肯定不会是只有你一个人去预订,以是伙计为了方便统计还需要一个预订列表来统计全部的预订者的接洽方式以及预订手机版本信息,以是我们这里先给它界说为一个对象;key代表是预订者的接洽方式,value代表预订手机版本信息;
3.发布方法:当iphone11到货的时间,专卖店肯定要根据预订列表来举行同一发布消息("iphone11到货了,大家快来抢!!!"),以是专卖店需要一个发布方法来实行详细的发布举动;、
4.取消订阅:万物相对,能订阅肯定就能取消订阅;在等候iphone11到货关照的时间,你急着用手机,以是直接买了华为的某款,以是iphone11暂时对你来说需求不大,因为你已经有了手机以是专卖店的iphone11是否到货对你来说没有任何意义了;以是此时你不想被打扰,需要取消订阅消息;以是我们需要一个取消订阅方法来实现详细的取消订阅的举动;

观察者模式的应用场景

1、DOM变乱
假如你是一个前端开发人员,不管你读这篇文章之前是否已经相识观察者模式,但是我能肯定你已经用过观察者模式;
  1. document.body.addEventListener('click', function() {
  2.     console.log('hello world!');
  3. });
复制代码
这段代码看着眼熟吗?是的,这是一个DOM变乱的监听;我们通过给body订阅click变乱(click相称于上面的订阅方法),因为欣赏器并不知道你什么时间点击鼠标,以是等你触发click变乱的时间才会触发函数给你发布关照(发布方法);DOM变乱就是一个观察者模式的实现;
2、vue双向绑定v-model
我们作为前端开发人员,肯定知道vue是一个MVVM模式的框架;vue的焦点就是双向绑定,那么双向绑定的实现实际上就是一种观察者模式;因为你首先绑定了一个数据之后(订阅方法),欣赏器并不知道你什么时间修改,你页面上全部绑定了该数据大概依靠该数据的节点其实就是一个预订列表,只有等你修改了该数据的值的时间,vue才会关照(发布方法)到依靠该数据的方法/数据举行相应的操纵或革新;
当然观察者模式绝不但限于这俩种实现场景,在我们的生存中、业务场景中有很多观察者模式的示例,之前我们第一篇工厂模式先容计划模式的时间就说过了,计划模式是一种办理题目的思绪而非一种固定的公式,那么我们怎么实现观察者模式呢?

观察者模式的实现
  1. //定义商家
  2. var merchants = {};
  3. //定义预订列表
  4. merchants.orderList = {};
  5. //将增加的预定者添加到预订列表中   (订阅方法)
  6. merchants.listen = function(id,info){
  7.     //如果存在
  8.     if(!this.orderList[id]){
  9.         // (预订列表)
  10.         this.orderList[id] = [];
  11.     }
  12.     // 将用户的预定的产品信息存入到数组中
  13.     this.orderList[id].push(info);
  14. }
  15. //发布信息(发布方法)
  16. merchants.publish = function(){
  17.     var id = Array.prototype.shift.call(arguments);
  18.     var infos = this.orderList[id];
  19.     if(!infos || infos.length === 0){
  20.         console.log("您还没有预定信息");
  21.         return false;
  22.     }
  23.     for(var i = 0;i < infos.length;i++){
  24.         console.log("预定成功");
  25.         console.log("尊敬的用户:")
  26.         infos[i].apply(this,arguments);
  27.         console.log("到货了");
  28.     }
  29. }
  30. //取消订阅  
  31. merchants.remove = function(id,fn){
  32.     var infos = this.orderList[id];
  33.     if(!infos){ return false}
  34.     if(!fn){
  35.         console.log(123);
  36.     }else{
  37.         for(var i = 0;i < infos.length;i++){
  38.             if(infos[i] === fn){
  39.                 infos.splice(i,1);
  40.             }
  41.         }
  42.     }
  43. }
  44. let customeA = function(){
  45.     console.log("黑色尊享版一台");
  46. }
  47. merchants.listen("15172103336",customeA);
  48. merchants.remove("15172103336",customeA);
  49. merchants.publish("15172103336");
复制代码
上面的代码稍微有点长,不外没有很难;首先我们是界说了一个对象是作为商家,然后界说了一个空的对象作为预订列表,再一步步的实现我们的订阅方法和发布以及取消订阅的方法;逻辑不复杂,但是有一些语法需要讲解一下:
发布方法中的var id = Array.prototype.shift.call(arguments);这句的意思是将merchants.publish("15172103336");方法调用的时间第一个参数返回给它然后复制为id,以是其实此时的id值为”15172103336“;
infos.apply(this,arguments);这个方法也不是特殊好理解,首先infos里装的是预订者的手机号码以及手机版本信息,以是我们infos.apply(this,arguments);这个方法其实就是将"15172103336"对应的手机版本信息函数举行调用了一遍;现实上即是infos(arguments);

总结

观察者模式不管是在前端范畴还是在现实生存中的应用都是有很常见的场景,学好观察者模式有利用我们学习vue的源码知识,当然不但限于此,以是观察者模式值得我们好勤学习,一句话:"你品,你细品!" 今天付出的努力,在日后总会换成工资往返报你的!
以上就是怎样用JavaScript实现观察者模式的详细内容,更多关于JavaScript观察者模式的资料请关注脚本之家别的相关文章!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作