前言

最近在开发redux或者vux的时候，状态管理当中的createStore，以及我们在组件中调用的dispatch传递消息给状态管理中心，去处理一些操作的时候，有些类似我们常见到订阅模式

于是写了一个小demo去实现了一下订阅模式的过程

思路

订阅模式类似某个平台的作者，或者UP主，而平台充当了一个中间件传递消息的作用，作者是发布订阅的人，在被关注或者订阅了之后，发布的消息，收听作者的用户，可以收到作者发布的消息

  • 创建平台
var Messege = function () {

  this.list = {};

  this.cache = {};

};
  • 创建完成平台之后，平台的作者自己创建内容，发布消息
Messege.prototype.add = function (noticeType, client) {

  // 将收到的信息加入到noticeType订阅列表当中

  console.log(noticeType);

  console.log(client);

  if (!this.list[noticeType]) this.list[noticeType] = [];

  this.list[noticeType].push(client);

  this.cache[noticeType].forEach((words) => {

    client.listen(noticeType, words);

  });

};
  • 同时还能删除自己已经发布的消息
// 通过传入的信息类型，遍历查找

Messege.prototype.remove = function (noticeType, client) {

  if (!this.list[noticeType]) return; //可以作为提示或者说处理符合业务需求的操作

  var index = this.list[noticeType].findIndex((item) => item === client);

  console.log(this.list[noticeType].splice(index, 1));

  this.list[noticeType].splice(index, 1);

};

在发布了这些往期列表当中，以及订阅了up主的订阅者，可以通过往期消息查看以前发布过的文章信息列表

  • 此时需要一个缓存去存储以及发布过的信息，充当一个历史记录的角色
Messege.prototype.triggle = function (noticeType, words) {

  if (!this.cache[noticeType]) this.cache[noticeType] = [];

  this.cache[noticeType].push(words);

  if (!this.list[noticeType]) return;

  this.list[noticeType].forEach((client) => {

    client.listen(noticeType, words);

  });

};
  • 订阅对象实例化，我们可以实例化对象中，去处理一些需要执行的业务需求
var Client = function (name) {

  this.name = name;

};

// 监听事件，事件处理逻辑

Client.prototype.listen = function (noticeType, words) {

  console.log(`${this.name}收到${noticeType}的信息是：${words}`);

};
  • 完成了发布者的功能之后，我们就可以自己测试发布一些消息
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>订阅模式</title>

</head>

<body>

</body>

<script src="./subscribe.js"></script>

<script>

    var client1 = new Client('client1')

    var client2 = new Client('client2')

    var messege = new Messege()

    // messege.add('新消息01', client1)

    // messege.remove('新消息01', client1)

    messege.triggle('新消息02', "这是一段消息01");

    messege.triggle('新消息02', "这是一段消息02"); 

    var client3 = new Client('client3');

    messege.add('新消息03', client3);

    messege.add('新消息03', client3);

    messege.remove('新消息03', client3);

</script>

</html>

通过实例化对象，实例化订阅信息之后，可以实现页面或者组件之间，相应的一些状态更改和数据之间的传递。

以上是javascript订阅模式的浅析

源码地址：

// githup仓库地址

https://github.com/akari16/FunctionRealization

文章个人博客地址：javascript订阅模式浅析和基础实例，欢迎订阅

javascript订阅模式浅析和基础实例的更多相关文章

  1. 理解JavaScript设计模式与开发应用中发布-订阅模式的最终版代码

    最近拜读了曾探所著的<JavaScript设计模式与开发应用>一书,在读到发布-订阅模式一章时,作者不仅给出了基本模式的通用版本的发布-订阅模式的代码,最后还做出了扩展,给该模式增加了离线 ...

  2. javascript中的发布订阅模式与观察者模式

    这里了解一下JavaScript中的发布订阅模式和观察者模式,观察者模式是24种基础设计模式之一. 设计模式的背景 设计模式并非是软件开发的专业术语,实际上设计模式最早诞生于建筑学. 设计模式的定义是 ...

  3. Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...

  4. javascript设计模式——发布订阅模式

    前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...

  5. 《JavaScript设计模式与开发实践》笔记第八章 发布-订阅模式

    第八章 发布-订阅模式 发布-订阅模式描述 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 发布-订阅模式可以广泛应用于 ...

  6. 浅析JavaScript工厂模式

    这里主要介绍两种工厂模式,第一种“简单工厂模式”,第二种“工厂方法模式” 简单工厂模式 1.定义 由一个工厂对象决定对象创建某一种产品对象的的实例.主要用来创建同一类对象. 2.具体需求 现在有一个登 ...

  7. [转] Javascript中理解发布--订阅模式

    发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 现实生活中的发布- ...

  8. [转] JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

    <JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...

  9. 【转】Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...

随机推荐

  1. LeetCode 每日一题 458. 可怜的小猪

    题目描述 有 buckets 桶液体,其中 正好 有一桶含有毒药,其余装的都是水.它们从外观看起来都一样.为了弄清楚哪只水桶含有毒药,你可以喂一些猪喝,通过观察猪是否会死进行判断.不幸的是,你只有 m ...

  2. 在IDE中普通项目打成jar包

    第一步: File---->Project Structe 第二步: 选择From modules.. 第三步:选择对应的Module和对应的JAR,然后点击ok 第四步:选择好对应的属性,然后 ...

  3. 长时间不操作Navicat或Putty会断线?

    问题描述 今天发现只要一直不使用Putty,发现就会"卡住",还有Navicat连接数据库也有类似问题. 问题分析 Linux或者数据库都想节省连接资源呗. 问题解决 那就隔一段时 ...

  4. ImageMagick转换图片格式

    /usr/bin/convert data/manager/tongji/Html/WebData/images/code0/xingfumima0_1000_0.jpg -colorspace cm ...

  5. xss标签和属性爆破

    当网站过滤了大部分的HTML标签和属性,我们就尝试爆破一下,看哪些标签和属性没有没过滤. 爆破的步骤: 1. 首先在测试点输入我们正常的exp,并抓包发送到Intruder模块. 2. 将exp改为 ...

  6. linux_4

    自建yum仓库,分别为网络源和本地源 编译安装http2.4 linux命令练习 列出ubuntu软件管理工具apt的一些用法(自由总结)

  7. 使用Three.js和React把冰墩墩部署在网页上！实现人手一墩！

    前言 最近冰墩墩一墩难求,大家开始通过各种方式打造自己的冰墩墩,各种冰墩墩开始出现,粘土冰墩墩,橘子冰墩墩,3D打印冰墩墩.这次通过前端的方式展示一个3D冰墩墩,现在开始吧. 声明:本文涉及奥运元素3 ...

  8. v79.01 鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上) | 百篇博客分析OpenHarmony源码

    百篇博客分析|本篇为:(用户态锁篇) | 如何使用快锁Futex(上) 进程通讯相关篇为: v26.08 鸿蒙内核源码分析(自旋锁) | 当立贞节牌坊的好同志 v27.05 鸿蒙内核源码分析(互斥锁) ...

  9. Spring Cloud之微服务注册到Eureka Server集群后访问改造

    上篇Spring Cloud之服务注册中心搭建Eureka Server服务注册中⼼ - 池塘里洗澡的鸭子 - 博客园 (cnblogs.com)已经已经成功将两个微服务注册到集群中,那么能正常能与注 ...

  10. 【数据共享】基于Landsat提取的全球河网（河宽）GDWL数据库

    GRWL数据库,全称Global River Widths from Landsat Database,是由Allen, George H & Pavelsky. Tamlin M等人基于La ...