發(fā)布-訂閱者模式又叫觀察者模式，它定義對象間的一種一對多的依賴關(guān)系，當(dāng)一個對象的狀態(tài)發(fā)生改變時，所有依賴于它的對象都將得到通知。在JavaScript開發(fā)中，我們一般用事件模型來替代傳統(tǒng)的發(fā)布-訂閱模式。

一、發(fā)布-訂閱者模式的作用

1. 發(fā)布-訂閱者模式可以廣泛用于異步編程中，這是一種替代回調(diào)函數(shù)的方案。在異步編程中使用發(fā)布-訂閱者模式，我們就無需過多關(guān)注對象在異步運行期間的內(nèi)部狀態(tài)，而只需要訂閱感興趣的事件發(fā)生點。（如訂閱ajax的success和error事件）
2. 發(fā)布-訂閱者模式可以取代對象之間硬編碼的通知機制，一個對象不用再顯式地調(diào)用另一個對象的某個接口。發(fā)布-訂閱者模式讓兩個對象松耦合地聯(lián)系在一起，雖然不太清楚彼此的細(xì)節(jié)，但不影響它們之間的通信。當(dāng)有新的訂閱者出現(xiàn)時，發(fā)布者的代碼不需要任何修改；同樣發(fā)布者需要改變時，也不會影響到之前的訂閱者。只要之前約定的事件名沒有變化，就可以自由地改變它們。

二、發(fā)布訂閱者模式的實現(xiàn)

var Event = {
    clientList: {},
    listen: function(key, fn) {
        if (!this.clientList[key]) {
            this.clientList[key] = []
        }
        this.clientList[key].push(fn)
    },
    trigger: function() {
        var key = Array.prototype.shift.call(arguments),
            fns = this.clientList[key]
        if (!fns || fns.length === 0) {
            return false
        }
        for (var i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    },
    remove: function(key, fn) {
        var fns = this.clientList[key]
        if (!fns) {
            return false
        }
        if (!fn) {
            fns && (fns.length = 0)
        } else {
            for (var l = fns.length - 1; l >= 0; l--) {
                var _fn = fns[l]
                if (_fn === fn) {
                    fns.splice(l, 1)
                }
            }
        }
    }
}

var installEvent = function(obj) {
    for (var i in event) {
        obj[i] = event[i]
    }
}

三、發(fā)布訂閱者的使用場景

• 網(wǎng)站登錄
  假如正在開發(fā)一個網(wǎng)站，網(wǎng)站里有header頭部，菜單，購物車等模塊。這幾個模塊的渲染都需要ajax獲取用戶的個人信息。

Login.success(function (data) {
  header.setAvatar(data.avatar)
  nav.setAvatar(data.avatar)
  shopcart.refresh()
})

假如現(xiàn)在我們現(xiàn)在要新增一個消息列表的刷新，那就要再次修改代碼，使得代碼越來越繁雜。
這時候就可以使用發(fā)布-訂閱者模式進行重構(gòu)：

const login = {}
installEvent(login)
ajax('http://xxxxx?login', function (data) {
  login.trigger('loginSuccess', data)
})

const header = (function() {
  login.listen('loginSuccess', function (data) {
    header.setAvatar(data.avatar)
  })
})()

const nav = (function() {
  login.listen('loginSuccess', function (data) {
    nav.setAvatar(data.avatar)
  })
})()

const shopcart = (function() {
  login.listen('loginSuccess', function (data) {
    shopcart.refresh()
  })
})()

這樣當(dāng)需要新增模塊時，只需要指定模塊監(jiān)聽對應(yīng)事件即可，避免了強耦合造成的問題。