javascript訂閱模式淺析和基礎例項

Lewyon發表於2022-03-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倉庫地址
https://github.com/akari16/FunctionRealization

文章個人部落格地址：javascript訂閱模式淺析和基礎例項，歡迎訂閱

相關文章