js設(shè)計(jì)模式--發(fā)布訂閱模式

_ang 發(fā)布于2019-08-23 14:29 / 668人閱讀

摘要：文章系列設(shè)計(jì)模式單例模式設(shè)計(jì)模式策略模式設(shè)計(jì)模式代理模式設(shè)計(jì)模式迭代器模式概念發(fā)布訂閱模式又叫觀察者模式，它定義對象間的一種一對多的依賴關(guān)系，當(dāng)一個(gè)對象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對象都將得到通知。

前言

本系列文章主要根據(jù)《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》整理而來，其中會(huì)加入了一些自己的思考。希望對大家有所幫助。

文章系列

js設(shè)計(jì)模式--單例模式

js設(shè)計(jì)模式--策略模式

js設(shè)計(jì)模式--代理模式

js設(shè)計(jì)模式--迭代器模式

概念

發(fā)布—訂閱模式又叫觀察者模式，它定義對象間的一種一對多的依賴關(guān)系，當(dāng)一個(gè)對象的狀態(tài)發(fā)生改變時(shí)，所有依賴于它的對象都將得到通知。

場景 DOM事件

  document.body.addEventListener("click", function () {
    alert(2);
  }, false);
  document.body.addEventListener("click", function () {
    alert(3);
  }, false);
  document.body.addEventListener("click", function () {
    alert(4);
  }, false);

  document.body.click(); // 模擬用戶點(diǎn)擊

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：發(fā)布—訂閱模式的優(yōu)點(diǎn)非常明顯，一為時(shí)間上的解耦，二為對象之間的解耦。
缺點(diǎn)：創(chuàng)建訂閱者本身要消耗一定的時(shí)間和內(nèi)存，而且當(dāng)你訂閱一個(gè)消息后，也許此消息最后都未發(fā)生，但這個(gè)訂閱者會(huì)始終存在于內(nèi)存中。

例子 銷售處訂閱房源 簡單的發(fā)布訂閱

var Event = function() {
  this.list = []
}

Event.prototype.add = function(listener) {
  this.list.push(listener)
}

Event.prototype.triggle = function() {
  this.list.forEach(listener => {
    listener()
  })
}

var event = new Event()
event.add(()=>{console.log("房源1--80平--200萬")})
event.add(()=>{console.log("房源2--200平--1000萬")})

event.triggle()

或者

var event = {
  list: [],
  add(listener) {
    this.list.push(listener)
  },
  triggle() {
    this.list.forEach(listener => {
      listener()
    })
  }
}

event.add(()=>{console.log("房源1--80平--200萬")})
event.add(()=>{console.log("房源2--200平--1000萬")})

event.triggle()

但這種不能區(qū)分是發(fā)不了什么消息，比如有兩群人：訂閱80平房源報(bào)價(jià)和訂閱200瓶房源報(bào)價(jià)的人，這里兩群人都會(huì)得到通知

改進(jìn)

var event = {
  list: {},
  add(type, listener) {
    if (!this.list[type]) {
      this.list[type] = []
    }
    this.list[type].push(listener)
  },
  triggle(type) {
    this.list[type] && this.list[type].forEach(listener => {
      listener()
    })
  }
}

event.add("80平", ()=>{console.log("房源1--80平--200萬")})
event.add("80平", ()=>{console.log("房源2--80平--300萬")})
event.add("200平", ()=>{console.log("房源2--200平--1000萬")})

event.triggle("80平")

這里還少了一個(gè)取消訂閱的功能

增加取消訂閱

var event = {
  list: {},
  add(type, listener) {
    if (!this.list[type]) {
      this.list[type] = []
    }
    this.list[type].push(listener)
  },
  triggle(type) {
    this.list[type] && this.list[type].forEach(listener => {
      listener()
    })
  },
  remove(type, fn) {
    if (!this.list[type]) return
    var index = this.list[type].findIndex(listener => listener === fn)
    this.list[type].splice(index, 1)
  }
}

var f1 = ()=>{console.log("房源1--80平--200萬")}
var f2 = ()=>{console.log("房源2--80平--300萬")}
var f3 = ()=>{console.log("房源2--200平--1000萬")}

event.add("80平", f1)
event.add("80平", f2)
event.add("200平", f3)

event.remove("80平", f2)
event.triggle("80平") // 房源1--80平--200萬

上面代碼結(jié)構(gòu)還不是很清晰，我們再模擬銷售部真實(shí)的場景

更真實(shí)的銷售部場景

銷售部

銷售部有很多房源，如80平的，100平的等

客戶可以到銷售部登記自己想買的房源面積，并留下姓名。到時(shí)候如果有房源，銷售部就會(huì)通知客戶

客戶由于一些原因決定不買房的時(shí)候，可以取消訂閱

客戶

當(dāng)有房源時(shí)，客戶有一個(gè)接聽報(bào)價(jià)的方法

var Event = function () {
  this.list = {}
}

Event.prototype.add = function (area, client) {
  if (!this.list[area]) this.list[area] = []
  this.list[area].push(client)
}

Event.prototype.remove = function (area, client) {
  if (!this.list[area]) return
  var index = this.list[area].findIndex(item => item === client)
  this.list[area].splice(index, 1)
}


Event.prototype.triggle = function (area, price) {
  if (!this.list[area]) return
  this.list[area].forEach(client => {
    client.listen(area, price)
  })
}

var Client = function (name) {
  this.name = name
}

Client.prototype.listen = function (area, price) {
  console.log(`${this.name}收到${area}平的房源報(bào)價(jià)${price}`)
}


var client1 = new Client("client1")
var client2 = new Client("client2")


var event = new Event()
event.add("80平", client1)
event.add("100平", client1)
event.add("80平", client2)
event.add("300平", client1)
event.remove("300平", client1)

event.triggle("80平", 200) // client1收到80平平的房源報(bào)價(jià)200 client2收到80平平的房源報(bào)價(jià)200
event.triggle("100平", 500) // client1收到100平平的房源報(bào)價(jià)500
event.triggle("200平", 1000) //
event.triggle("300平", 1000) //

上面的代碼雖然已經(jīng)很好了，但是還是有一個(gè)缺點(diǎn)：訂閱者接收不到訂閱之前發(fā)布的消息，如下客戶3也想訂閱80平的房源，但他收不到任何消息

var client3 = new Client("client3")
event.add("80平", client3)

我們希望客戶3也能收到消息

必須先訂閱再發(fā)布嗎

我們增加一個(gè)cache字段來記錄歷史房源報(bào)價(jià)

var Event = function () {
  this.list = {}
  this.cache = {}
}

Event.prototype.add = function (area, client) {
  if (!this.list[area]) this.list[area] = []
  this.list[area].push(client)
  this.cache[area].forEach(price => {
    client.listen(area, price)
  })
}

Event.prototype.remove = function (area, client) {
  if (!this.list[area]) return
  var index = this.list[area].findIndex(item => item === client)
  this.list[area].splice(index, 1)
}


Event.prototype.triggle = function (area, price) {
  if (!this.cache[area]) this.cache[area] = []
  this.cache[area].push(price)

  if (!this.list[area]) return
  this.list[area].forEach(client => {
    client.listen(area, price)
  })
}

var Client = function (name) {
  this.name = name
}

Client.prototype.listen = function (area, price) {
  console.log(`${this.name}收到${area}平的房源報(bào)價(jià)${price}`)
}


var client1 = new Client("client1")
var client2 = new Client("client2")


var event = new Event()
// event.add("80平", client1)
// event.add("100平", client1)
// event.add("80平", client2)
// event.add("300平", client1)
// event.remove("300平", client1)

event.triggle("80平", 200) // client1收到80平平的房源報(bào)價(jià)200 client2收到80平平的房源報(bào)價(jià)200
event.triggle("100平", 500) // client1收到100平平的房源報(bào)價(jià)500
event.triggle("200平", 1000) //
event.triggle("300平", 1000) //

var client3 = new Client("client3")
event.add("80平", client3)
event.add("100平", client3)

網(wǎng)站登錄

假如我們正在開發(fā)一個(gè)商城網(wǎng)站，網(wǎng)站里有 header 頭部、nav 導(dǎo)航、消息列表、購物車等模塊。這幾個(gè)模塊的渲染有一個(gè)共同的前提條件，就是必須先用 ajax 異步請求獲取用戶的登錄信息。

這里留給讀者自己實(shí)現(xiàn)