javascript订阅模式浅析和基础实例 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}`); };