設(shè)計模式-觀察者模式-訂閱-發(fā)布模式

wanghui 發(fā)布于2019-08-20 15:20 / 2919人閱讀

摘要：觀察者模式，也叫訂閱發(fā)布模式。第三個是根據(jù)登錄接口返回的，調(diào)取消息列表接口。訂閱觀察者模式顯示用戶的頭像顯示用戶的消息發(fā)布事實上，還有一種更普遍意義的訂閱發(fā)布模式。

觀察者模式，也叫訂閱-發(fā)布模式。顧名思義，就是訂閱某些功能，然后在適當?shù)臅r機發(fā)布出來，也就是執(zhí)行這些功能。
訂閱：就是把幾個函數(shù)推入數(shù)組中待用；
發(fā)布：就是把緩存在數(shù)組中的函數(shù)拿出來執(zhí)行；

var login = {};
login.eventList = {};
//將函數(shù)推入數(shù)組中保存，待用
login.listen = function(key, fn) {
    if(!this.eventList[key]) {
        this.eventList[key] = [];
    }
    this.eventList[key].push(fn);
}
login.trigger = function(key) {
    var fns = this.eventList[key];
    if(!fns || fns.length === 0) {
        return false;
    }
    for(var i=0; i
應(yīng)用場景：
現(xiàn)在前端領(lǐng)域，SPA單頁應(yīng)用已經(jīng)非常普遍了，每個頁面，都是用ajax異步請求。ajax請求有一個比較鬧心的問題，就是層級回調(diào)。比如：
有一個頁面，需要調(diào)用三個數(shù)據(jù)接口。
第一個是login登錄接口，
第二個是根據(jù)登錄接口返回的id，調(diào)取頭像接口。
第三個是根據(jù)登錄接口返回的id，調(diào)取消息列表接口。
一般情況下會這么寫：
$.ajax({
    url: "http://ajax.login.com",
    dataType: "json",
    success: function(data) {
        getAvatar(data.id);
        getMsg(data.id);
        ...
    }
})

這樣寫雖然沒有問題，但卻不容易維護。如果哪天改了需求，需要加個接口，你還得翻出這段代碼，找到success回調(diào)，再加上一個函數(shù)。加函數(shù)還算好的，有的人會直接在success回調(diào)里繼續(xù)寫$.ajax這樣的代碼，一級一級的這么摞著寫，這樣代碼很快就會變成一堆大便，變得不可維護。這種寫法叫做造糞模式，百分百的造出垃圾來。因為耦合性太大，接口調(diào)用都成了拴在一條繩子上的螞蚱，一扯就是一坨。
如何解耦呢？就是利用訂閱發(fā)布模式，我們可以在getAvatar方法中，訂閱(listen)login接口，而一旦login接口走到success回調(diào)，我們就發(fā)布(trigger)一下
var event = {
    eventList: {},
    listen: function(key, fn) {
        if(!this.eventList[key]) {
            this.eventList[key] = [];
        }
        this.eventList[key].push(fn);
    },
    trigger: function() {
        var key = Array.prototype.shift.call(arguments);
        var fns = this.eventList[key];
        if(!fns || fns.length === 0) {
            return false;
        }

        for(var i=0; i
現(xiàn)在訂閱沒有問題了，那如何取消訂閱呢？我們再加上取消訂閱函數(shù)
var event = {
    eventList: {},
    listen: function(key, fn) {
        if(!this.eventList[key]) {
            this.eventList[key] = [];
        }
        this.eventList[key].push(fn);
    },
    remove: function(key, fn) {
        var fns = this.eventList[key];
        if(!fns) {
            return false;
        }
        if(!fn) {
            //如果沒有回調(diào)，表示取消此key下的所有方法
            fns && (fns.length);
        } else {
            for(var i=0; i
我們的訂閱發(fā)布模式走到這里，基本上已經(jīng)完善了。最后我們來看一下ajax回調(diào)問題怎么來解決。我們其實根本不需要在登錄的ajax回調(diào)中加拉取頭像等邏輯，而只需讓拉取頭像功能訂閱登錄接口即可，當?shù)卿浌ぷ魍瓿珊髸l(fā)布，也就是觸發(fā)緩存在數(shù)組中的函數(shù)執(zhí)行。




訂閱-觀察者模式








事實上，還有一種更普遍意義的訂閱發(fā)布模式。比如在一個按鈕上綁定click事件，這其實就是一個訂閱的過程；而鼠標點擊就是發(fā)布。