設計模式-觀察者模式-訂閱-發布模式

wanghui 發布于2019-08-20 15:20 / 2908人閱讀

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

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

var login = {};
login.eventList = {};
//將函數推入數組中保存，待用
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
應用場景：
現在前端領域，SPA單頁應用已經非常普遍了，每個頁面，都是用ajax異步請求。ajax請求有一個比較鬧心的問題，就是層級回調。比如：
有一個頁面，需要調用三個數據接口。
第一個是login登錄接口，
第二個是根據登錄接口返回的id，調取頭像接口。
第三個是根據登錄接口返回的id，調取消息列表接口。
一般情況下會這么寫：
$.ajax({
    url: "http://ajax.login.com",
    dataType: "json",
    success: function(data) {
        getAvatar(data.id);
        getMsg(data.id);
        ...
    }
})

這樣寫雖然沒有問題，但卻不容易維護。如果哪天改了需求，需要加個接口，你還得翻出這段代碼，找到success回調，再加上一個函數。加函數還算好的，有的人會直接在success回調里繼續寫$.ajax這樣的代碼，一級一級的這么摞著寫，這樣代碼很快就會變成一堆大便，變得不可維護。這種寫法叫做造糞模式，百分百的造出垃圾來。因為耦合性太大，接口調用都成了拴在一條繩子上的螞蚱，一扯就是一坨。
如何解耦呢？就是利用訂閱發布模式，我們可以在getAvatar方法中，訂閱(listen)login接口，而一旦login接口走到success回調，我們就發布(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
現在訂閱沒有問題了，那如何取消訂閱呢？我們再加上取消訂閱函數
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) {
            //如果沒有回調，表示取消此key下的所有方法
            fns && (fns.length);
        } else {
            for(var i=0; i
我們的訂閱發布模式走到這里，基本上已經完善了。最后我們來看一下ajax回調問題怎么來解決。我們其實根本不需要在登錄的ajax回調中加拉取頭像等邏輯，而只需讓拉取頭像功能訂閱登錄接口即可，當登錄工作完成后會發布，也就是觸發緩存在數組中的函數執行。




訂閱-觀察者模式








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

云服務器 GPU云服務器發布訂閱模式訂閱發布模式 DTS 訂閱發布模式設計模式觀察者模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82167.html

訂閱發布模式和觀察者模式的區別

摘要：或許以前認為訂閱發布模式是觀察者模式的一種別稱，但是發展至今，概念已經有了不少區別。參考文章訂閱發布模式和觀察者模式真的不一樣首選我們需要先了解兩者的定義和實現的方式，才能更好的區分兩者的不同點。或許以前認為訂閱發布模式是觀察者模式的一種別稱，但是發展至今，概念已經有了不少區別。訂閱發布模式在軟件架構中，發布-訂閱是一種消息范式，消息的發送者（稱為發布者）不會將消息直接發送給特...

ysl_unh 2019-08-26 11:01 評論0 收藏0
設計模式之觀察者模式與發布訂閱模式

摘要：觀察者模式與發布訂閱的區別在模式中，知道，同時還保留了的記錄。發布者訂閱者在大多情況下是異步方式使用消息隊列。圖片源于網絡侵權必刪如果以結構來分辨模式，發布訂閱模式相比觀察者模式多了一個中間件訂閱器，所以發布訂閱模式是不同于觀察者模式的。學習了一段時間設計模式，當學到觀察者模式和發布訂閱模式的時候遇到了很大的問題，這兩個模式有點類似，有點傻傻分不清楚，博客起因如此，開始對觀察者和發布...

BaronZhang 2019-08-23 18:03 評論0 收藏0
JavaScript 設計模式（六）：觀察者模式與發布訂閱模式

摘要：觀察者模式維護單一事件對應多個依賴該事件的對象關系發布訂閱維護多個事件主題及依賴各事件主題的對象之間的關系觀察者模式是目標對象直接觸發通知全部通知，觀察對象被迫接收通知。觀察者模式（Observer）觀察者模式：定義了對象間一種一對多的依賴關系，當目標對象 Subject 的狀態發生改變時，所有依賴它的對象 Observer 都會得到通知。簡單點：女神有男朋友了，朋友圈曬個圖，甜...

bingo 2019-08-23 18:36 評論0 收藏0
發布訂閱模式實現及發布訂閱者模式與觀察者模式的不同

摘要：發布訂閱者模式中，訂閱者是不知道也不關心事件是為什么觸發，是由哪一個事件觸發，只知道事件觸發時候，會告訴自己。然而，在發布訂閱模式中，發布者和訂閱者不知道對方的存在。在發布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。概念發布訂閱者模式，是javascript甚至大多數語言都有的語言模式，比較概念的解釋是，訂閱者把自己想訂閱的事件注冊到調度中心，當該事件觸發時候，發布者發布...

YanceyOfficial 2019-08-22 17:34 評論0 收藏0
發布訂閱模式實現及發布訂閱者模式與觀察者模式的不同

摘要：發布訂閱者模式中，訂閱者是不知道也不關心事件是為什么觸發，是由哪一個事件觸發，只知道事件觸發時候，會告訴自己。然而，在發布訂閱模式中，發布者和訂閱者不知道對方的存在。在發布訂閱模式中，組件是松散耦合的，正好和觀察者模式相反。概念發布訂閱者模式，是javascript甚至大多數語言都有的語言模式，比較概念的解釋是，訂閱者把自己想訂閱的事件注冊到調度中心，當該事件觸發時候，發布者發布...

Jensen 2019-08-02 10:32 評論0 收藏0
JavaScript 發布-訂閱模式

摘要：發布訂閱模式訂閱者把自己想訂閱的事件注冊到調度中心，當發布者發布該事件到調度中心，也就是該事件觸發時，由調度中心統一調度訂閱者注冊到調度中心的處理代碼。發布-訂閱模式，看似陌生，其實不然。工作中經常會用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他們都使用了發布-訂閱模式，讓開發變得更加高效方便。一...

13651657101 2019-08-26 13:53 評論0 收藏0