前言

最近在开发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. Redis下载安装与配置(windows)

    一.Redis下载 Redis官网建议使用Linux进行部署,未提供windows版本的Redis,但微软开发和维护着Windows64版本的Redis. Windows64版本的Redis下载地址: ...

  2. 关于在findViewById()方法时遇到的一些问题

    最近需要做一个关于色卡的App,需要用到LayoutInflater来实现标签动态切换View界面,但是发现在使用过程中App突然会闪退, 闪退目前已解决. 先看下关于findViewById()的详 ...

  3. bom-页面加载事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. LaunchScreen原理

    会自动加载LaunchScreen是因为在Target当中,指定了Launch Screen file 它的底层实现其实把LaunchScreen上的东西,生成了一张图片,然后把这张图片设为程序的启动 ...

  5. Haproxy配合Nginx搭建Web集群部署

    Haproxy配合Nginx搭建Web集群部署实验 1.Haproxy介绍 2.Haproxy搭建 Web 群集 1.Haproxy介绍: a)常见的Web集群调度器: 目前常见的Web集群调度器分为 ...

  6. java 监听redis事件

    第一步:利用RDM等redis连接工具查看相应事件,然后去网上搜索 一下,会有redis各种事件的说明,选择契合业务的事件: 第二步:创建监听处理类: 1 package com.lechuang.a ...

  7. 【论文阅读笔记】-针对RSA的短解密指数的密码学分析(Cryptanalysis of Short RSA Secret Exponents)

    目录 1. 介绍 polynomially larger 2. 连分数背景知识 3. 连分数算法 4. 连分数算法在RSA中的应用 5. 例子 6. 对RSA连分数攻击的反制 7. 对于攻击的改进 8 ...

  8. webhook触发jenkins进行sonar检测

    目的 jenkins仅需创建一个job,git推送后自动进行sonar代码检测并上传到sonarqube jenkins插件 已按社区推荐安装基本插件 Generic Webhook Trigger ...

  9. HTTP协议和HTTPS协议的那些事

    文章目录 HTTPS VS HTTP HTTPS=HTTP+加密+证书+完整性保护 加密 对称加密 非对称加密 混合加密 证书 完整性保护 HTTPS并不能取代HTTP SSL是把双刃剑 HTTPS的 ...

  10. OpenGL/ES关于像素渲染

    知道着色器的人都会知道一个东西,那就是着色器分为顶点着色器与片元着色器.在移动端真正渲染到手机屏幕上的无非是一些颜色值,但是一个片元是大于一个像素的,一个片元可能包含多个像素,当然一个片元所包含的像素 ...