前言

最近在开发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. 用Json给表单赋值

    $.extend({ setForm :function(frm,jsonValue) { var obj=$(frm); $.each(jsonValue, function (name, ival ...

  2. Java--这张线程瓜图保熟，不进来看看？这瓜要是不熟它就Dead掉了

    先来看一下线程这张图线程的几种运行状态之间运行流程: 看不懂没关系,慢慢来学习,往下学习来继续了解一下~ 什么是线程? 线程是进程的一部分,是程序执行中的一条执行路线: 进程就是指程序在其自身地址空间 ...

  3. js注释和数据类型转换

    单行注释 用来描述下面一个或多行代码的作用 // 这是一个变量var name = 'hm'; 多行注释 用来注释多条代码 /*var age = 18;var name = 'zs';console ...

  4. Java中的输入流与输出流

    一.流的概念 在Java中,流是从源到目的地的字节的有序序列.Java中有两种基本的流--输入流(InputStream)和输出流(OutputStream). 根据流相对于程序的另一个端点的不同,分 ...

  5. 关于unix下cp命令复制权限不够的问题

    例如要将mysql-5.7.17-macos10.12-x86_64.tar.gz 拷贝到/usr/local目录下时,执行cp mysql-5.7.17-macos10.12-x86_64.tar. ...

  6. 键盘弹起及lab时的动态计算高度 －－董鑫

    1.键盘抬起或掉下时,动态计算高度 2.动态计算Label的高度 计算的高度时,numberOfLines必须设置为0: 2.1  ios7.0之后 2.2 iOS 7.0之前

  7. Vue小白练级之路---001表单验证功能的一般实现思路

    思路: 先各自验证 非空校验 具体规则校验 后兜底校验( 防止用户没输入信息直接登录 ) 实现:( 以 element-ui 为例 ) 在 标签上用 model 动态绑定收集数据的对象(form) 在 ...

  8. Solution -「BJWC 2018」「洛谷 P4486」Kakuro

    \(\mathcal{Description}\)   Link.   有一个 \(n\times m\) 的网格图,其中某些格子被主对角线划成两个三角形,称这样的格子为特殊格:初始时,除了一些障碍格 ...

  9. suse 12安装 python-pip

    文章目录 方法一 安装setup-tools 安装pip 方法二 配置阿里云pip源 pip安装pyotp 方法一 安装setup-tools linux-oz6w:~ # wget https:// ...

  10. Spring MVC参数绑定(如何接收请求参数及返回参数)

    在SpringMVC interceptor案例实践中遇到了获取jsp表单传递参数失败的问题,怎么的解决的呢?下面详细介绍. 先讲述下https://www.cnblogs.com/ilovebath ...