前言

最近在开发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. C# 实例解释面向对象编程中的单一功能原则

    在面向对象编程中,SOLID 是五个设计原则的首字母缩写,旨在使软件设计更易于理解.灵活和可维护.这些原则是由美国软件工程师和讲师罗伯特·C·马丁(Robert Cecil Martin)提出的许多原 ...

  2. C# 获取网页验证码

    转载请注明来源:https://www.cnblogs.com/hookjc/ 以下方法必需在WebBrowser控件加载网页完成后才可以调用,否则会提示无法将对象引用到实例,切记!!! public ...

  3. NSArray文件读写

    1.NSArray数据写入到文件中 NSArray *arr = @[@"lnj", @"lmj", @"jjj", @"xcq& ...

  4. 云端iclound使用-陈棚

    使用NSmetadataQuery查询文档,增加,删除,编辑 界面设计完成后效果如图: 程序清单:FKDiary.h @interface FKDiary : UIDocument @property ...

  5. numpy 知识汇总

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

  6. MLlib学习——基本数据类型

    数据类型--基于RDD的API 本地矢量 标记点 本地矩阵 分布式矩阵 RowMatrix(行矩阵) IndexedRowMatrix(索引行矩阵) CoordinateMatrix(坐标矩阵) Bl ...

  7. 《PHP程序员面试笔试宝典》——如何克服面试中紧张的情绪？

    本文摘自<PHP程序员面试笔试宝典>. PHP面试技巧分享,PHP面试题,PHP宝典尽在"琉忆编程库". 面试的成功与否,往小的方面讲,直接关系到求职者的工作问题,往大 ...

  8. Involuting Bunny! (2021.8)

      CF1555F & Submission.   Tags:「A.生成树」「B.Tricks」   分类处理询问的 trick:连接两个连通块的边显然合法,先用这些边构建生成森林.发现每条边 ...

  9. 如何在 Flutter 中集成华为云函数服务

    介绍 云函数是一项 Serverless 计算服务,提供 FaaS(Function as a Service)能力,可以帮助开发者大幅简化应用开发与运维相关事务,降低应用功能的实现门槛,快速构建业务 ...

  10. ASP.NET Core 6框架揭秘-实例演示版[持续更新中…]

    作为<ASP.NET Core 3框架揭秘>的升级版,<ASP.NET Core 6框架揭秘>提供了很多新的章节,同时对现有的内容进行大量的修改.虽然本书旨在对ASP.NET ...