假如你要建立一個網站，通常來說會有許多用戶。你作為一名管理者，有時候需要將重要的消息發布給你的用戶。在軟件開發領域，開發此功能往往用到發布訂閱者模式。下面我以簡單的javascript來說明。

定義發布者類。發布者最基本的兩個屬性：發送的消息，發送的人

function Publisher() {this.observers =[]; // 存儲需要發布消息的人this.state="hello" // 發送的消息 } 復制代碼

除此之外，一個Publisher還需要有能夠接納新的訂閱消息的人的功能，或者刪除某個訂閱者的功能，同時需要能夠將消息發送出去的功能。

// 新增訂閱者功能 Publisher.prototype.addUser=function(obj) {const nameList= this.observers.map(item=>{return item.name;})if(nameList.indexOf(obj.name) < 0) {this.observers.push(obj)}return this; } //刪除訂閱者功能 Publisher.prototype.deleteUser=function(obj){let index = -1this.observers.forEach((item,key)=>{if(item.name === obj.name){index = key}})if(index !== -1) {this.observers.splice(index,1)}return this } // 通知訂閱者功能 Publisher.prototype.noticeUser=function(data){ this.observers.forEach((item)=>{item.update(data)}) } 復制代碼

值得注意的是，上述通知訂閱者的功能是通過遍歷this.observers 并調用每一個訂閱者的update方法。所以每一個訂閱者需要對應有update方法。每一個訂閱者的類似結構如下：

[{name:'張三',update:(data)=>{console.log(data)}},{name:'李四',update:(data)=>{console.log(data)}},... ] 復制代碼

構造訂閱者對象，由于每一個訂閱者都有name屬性和update方法。最簡單的就是采用構造函數方法來實現

function Subscribe(name){this.name =name;this.update = function(data){console.log(data);}; } 復制代碼

有了Subscribe模板，我們開始構造出每一個具體的訂閱者實例出來。

let lisi = new Subscribe('lisi') let xiaoming = new Subscribe('xiaoming') 復制代碼

將構造的訂閱人lisi 和 xiaoming 加入到發布者對象的observer中

let pb = new Publisher() pb.addUser(lisi) pb.addUser(xiaoming) 復制代碼

發布者需要發布消息時：

pb.noticeUser("hello") 復制代碼

至此一個最簡單的發布訂閱者模式實現了，這里還有兩點優化建議。
第一，上述構造出來的lisi,xiaoming都會自動有update方法，并且update的行為都是一樣的，如果需要例如xiaoming的update與其他不同，只需要重新定義即可

xiaoling.update=(data)=>{console.log("hello"+data)} pb.addUser(xiaoling) 復制代碼

第二, 發布者需要手動調用pb.noticeUser()去通知state消息，可以做到state變動了自動去調用pb.noticeUser()嗎？可以的，此時 Object.defineProperty()就派上用場了

let pb = new Publisher() Object.defineProperty(pb,'state',{set:function(newVal,) {let a = thisdebuggerpb.noticeUser(newVal) } }) pb.addUser(lisi) pb.addUser(xiaoming) pb.state = '123' //pb.noticeUser() 復制代碼

如果state變化了將自動觸發pb.noticeUser()，實現自動通知功能，是不是有點Vue原理既視感！

總結

以上是生活随笔為你收集整理的JavaScript发布订阅者模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。