javascript订阅模式浅析和基础实例

前言

最近在开发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}`);
};
  • 完成了发布者的功能之后,我们就可以自己测试发布一些消息



    
    
    订阅模式





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

以上是javascript订阅模式的浅析

源码地址:

// githup仓库地址
https://github.com/akari16/FunctionRealization

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

本文由博客一文多发平台 OpenWrite 发布!

你可能感兴趣的:(javascript前端)