前言

最近在开发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. Maven系列--"maven-compiler-plugin"的使用

    万分感谢大佬:Poorzerg 原文链接:https://my.oschina.net/poorzerg/blog/206856 maven是个项目管理工具,如果我们不告诉它我们的代码要使用什么样的j ...

  2. 快速搭建ELK7.5版本的日志分析系统--搭建篇

    title: 快速搭建ELK7.5版本的日志分析系统--搭建篇 一.ELK安装部署 官网地址:https://www.elastic.co/cn/ 官网权威指南:https://www.elastic ...

  3. mysql导出csv格式命令

    mysql -h 127.0.0.1 -u user -p123456 -Bse "select name,age from user where age > 10;" | ...

  4. Zabbix企业级开源监控解决方案

    Zabbix企业级开源监控解决方案 目录 Zabbix企业级开源监控解决方案 一.Zabbix 1. 监控系统的必要性 2. 监控软件的作用 3. Zabbix的定义 4. Zabbix的监控原理 5 ...

  5. numpy 知识汇总

    1.增加维度 高纬度打印出来很不好观察,所以打印出来shape更加容易理解维度的增加, 此外一维向量a=np.array([1,2,3]), a[:,None],相当于变为二维并转置了shape=(3 ...

  6. MySQL之视图篇

    MySQL之视图篇 文章目录 MySQL之视图篇 1. 概述 1.1 为什么使用视图? 1.2 视图的理解 2. 创建视图 2.1 创建单表视图 2.2 针对于多表 2.3 基于视图创建视图 3. 查 ...

  7. fuzz——AFL基础使用方法

    最近打 ctf 的时候感觉有点遇到瓶颈,就来 fuzz 这块看看. AFL 全称为 American huzzy loop,是 Fuzzing 最高级的测试工具之一.这个工具对有源码和无源码的二进制程 ...

  8. IP分组和分片

    本文讨论两个问题①IP数据报的首部②IP数据报的分片 TCP/IP模型分为五层,从上到下依次是应用层.传输层.网络层.数据链路层和物理层. IP数据报是网络层的概念. IP数据报的首部 版本号:0~3 ...

  9. SQLServer误删ReportServerTempDB导致打不开其他库——解决方案

    无意间删除了ReportServerTempDB库和ReportServer 导致其他库连接不上 错误:报表服务器无法打开与报表服务器数据库的连接.所有请求和处理都要求与数据库建立连接. 解决方案: ...

  10. Keycloak 团队宣布他们正在弃用大多数 Keycloak 适配器，包括Spring Security和Spring Boot

    2月14日,Keycloak 团队宣布他们正在弃用大多数 Keycloak 适配器. 其中包括Spring Security和Spring Boot的适配器,这意味着今后Keycloak团队将不再提供 ...