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

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

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

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

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

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

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

  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(); // 模擬用戶點擊

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

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平房源報價和訂閱200瓶房源報價的人，這里兩群人都會得到通知

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平")

這里還少了一個取消訂閱的功能

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)還不是很清晰，我們再模擬銷售部真實的場景

銷售部

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

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

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

客戶

當有房源時，客戶有一個接聽報價的方法

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}平的房源報價${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平平的房源報價200 client2收到80平平的房源報價200
event.triggle("100平", 500) // client1收到100平平的房源報價500
event.triggle("200平", 1000) //
event.triggle("300平", 1000) //

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

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

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

我們增加一個cache字段來記錄歷史房源報價

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}平的房源報價${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平平的房源報價200 client2收到80平平的房源報價200
event.triggle("100平", 500) // client1收到100平平的房源報價500
event.triggle("200平", 1000) //
event.triggle("300平", 1000) //

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

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

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