javascript訂閱模式淺析和基礎實例
- 2022 年 3 月 13 日
- 筆記
- 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}`);
};
- 完成了發佈者的功能之後，我們就可以自己測試發佈一些消息
<!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倉庫地址
//github.com/akari16/FunctionRealization
文章個人博客地址：javascript訂閱模式淺析和基礎實例，歡迎訂閱
