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

定義發(fā)布者類。發(fā)布者最基本的兩個(gè)屬性：發(fā)送的消息，發(fā)送的人

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

除此之外，一個(gè)Publisher還需要有能夠接納新的訂閱消息的人的功能，或者刪除某個(gè)訂閱者的功能，同時(shí)需要能夠?qū)⑾l(fā)送出去的功能。

// 新增訂閱者功能 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)}) } 復(fù)制代碼

值得注意的是，上述通知訂閱者的功能是通過遍歷this.observers 并調(diào)用每一個(gè)訂閱者的update方法。所以每一個(gè)訂閱者需要對應(yīng)有update方法。每一個(gè)訂閱者的類似結(jié)構(gòu)如下：

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

構(gòu)造訂閱者對象，由于每一個(gè)訂閱者都有name屬性和update方法。最簡單的就是采用構(gòu)造函數(shù)方法來實(shí)現(xiàn)

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

有了Subscribe模板，我們開始構(gòu)造出每一個(gè)具體的訂閱者實(shí)例出來。

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

將構(gòu)造的訂閱人lisi 和 xiaoming 加入到發(fā)布者對象的observer中

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

發(fā)布者需要發(fā)布消息時(shí)：

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

至此一個(gè)最簡單的發(fā)布訂閱者模式實(shí)現(xiàn)了，這里還有兩點(diǎn)優(yōu)化建議。
第一，上述構(gòu)造出來的lisi,xiaoming都會(huì)自動(dòng)有update方法，并且update的行為都是一樣的，如果需要例如xiaoming的update與其他不同，只需要重新定義即可

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

第二, 發(fā)布者需要手動(dòng)調(diào)用pb.noticeUser()去通知state消息，可以做到state變動(dòng)了自動(dòng)去調(diào)用pb.noticeUser()嗎？可以的，此時(shí) 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() 復(fù)制代碼

如果state變化了將自動(dòng)觸發(fā)pb.noticeUser()，實(shí)現(xiàn)自動(dòng)通知功能，是不是有點(diǎn)Vue原理既視感！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。