摘要：總結(jié)一下從表面上看觀察者模式里，只有兩個角色觀察者被觀察者而發(fā)布訂閱模式，卻不僅僅只有發(fā)布者和訂閱者兩個角色，還有第三個角色經(jīng)紀(jì)人存在。參考鏈接觀察者模式發(fā)布訂閱模式

做了這么長時間的 菜鳥程序員 ，我好像還沒有寫過一篇關(guān)于設(shè)計模式的博客...咳咳...意外，純屬意外。所以，我決定，從這一刻起，我要把設(shè)計模式在從頭學(xué)習(xí)一遍，不然都對不起我這 菜鳥 的身份。那這次，就從觀察者模式開始好啦...至于其他的，慢慢來。廢話不多說，還是進入正題吧！

從定義上看：觀察者模式 是當(dāng)對象(不知道什么是對象的，面壁思過切...)間存在一對多關(guān)系時，則使用 觀察者模式 ，比如，當(dāng)一個對象被修改時，則會自動通知它的依賴對象。觀察者模式 屬于 行為型模式 (不會還要讓我講一下設(shè)計模式的分類吧？我不要在這里講...)。

其實，我所理解的 觀察者模式 ，就是觀察和被觀察對象之間的關(guān)系，好比說，在拍賣的時候，拍賣師觀察最高標(biāo)價，然后通知給其他競價者競價。在這里面，拍賣師是觀察者，而那些競價者，是被觀察者，文字不太好理解是吧，那我們畫個圖看一下：

從圖中我們可以看到，拍賣師觀察競價者1的標(biāo)價，拿到了最高標(biāo)價，然后在通知其他競價者，這就是一個簡單的觀察者模式圖示，仔細(xì)看一下這個圖，我們會發(fā)現(xiàn)，最基礎(chǔ)的觀察者模式中，涉及以下幾種角色：

被觀察者：競價者們；

觀察者：拍賣師；

具體的被觀察者：競價者們的出價動作；

具體的觀察者：拍賣師觀察競價者的動作；

按照上述的四種角色，我們來用代碼還原一下觀察者模式的實現(xiàn)：

/**
 * 抽象被觀察者(競價者們)
 **/
public abstract class Subject {
    // 用來保存注冊的觀察者對象
    private List list = new ArrayList<>();

    // 注冊觀察者對象
    public void attach(Observer observer) {
        list.add(observer);
        System.out.println("Attached an observer");
    }

    // 通知所有注冊的觀察者對象
    public void nodifyObservers(int price) {
        for (Observer observer : list) {
            observer.update(price);
        }
    }
}

/**
 * 抽象觀察者角色類(拍賣師)
 **/
public interface Observer {
    public void update(int price);
}

/**
 * 具體的被觀察者實現(xiàn)類(競價者們的動作)
 **/
public class BidderSubject extends Subject {
    private int price;
    
    public void change(int price) {
        this.price = price;
        System.out.println("競價者說：" + price + "元");
        // 競價者們說出價格，通知觀察者
        this.nodifyObservers(price);
    }
}

/**
 * 具體的觀察者實現(xiàn)類(拍賣師的動作)
 **/
public class AuctionObserver implements Observer {
    // 觀察者的動作
    private int observerAction;

    @Override
    public void update(int price) {
        // 更新觀察者的動作，使其與被觀察者(競價者們出價)的消息保持一致
        observerAction = price;
        System.out.println("好，某某出價為：" + observerAction + "元，還有沒有更高的？");
    }
}

/**
 * 客戶端執(zhí)行類
 **/
public class Main {
    public static void main(String[] args) {
        // 創(chuàng)建被觀察者(競價者)主題對象
        BidderSubject bidderSubject = new BidderSubject();
        // 創(chuàng)建觀察者(拍賣師)對象
        Observer observer = new AuctionObserver();
        // 將觀察者(拍賣師)對象登記到被觀察對象(競價者們)上
        bidderSubject.attach(observer);
        // 改變被觀察者(競價者們)的出價
        bidderSubject.change(20);
    }
}

最后我們看一下執(zhí)行結(jié)果：

其實在 Java 中，還是比較容易理解抽象這個概念，但是在 JavaScript 語言中，因為沒有 多態(tài) ，所以在實現(xiàn)上，沒有 java 這么明顯的看出觀察者和被觀察者的關(guān)系，但是我們還是可以實現(xiàn)這個觀察者模式，在這里，博主使用的是 es6 的一個新特性：Proxy 和 Reflect ，這兩個 api 的具體使用這里就不在贅述了，有興趣的可以看看 阮一峰 老師的 ES6入門學(xué)習(xí) ，具體的還是讓我們直接看代碼吧：

// 添加觀察者的方法
const observers = new Set();
const observe = fn => observers.add(fn);

// 設(shè)置Proxy的set方法
function set(target, key, value, receiver) {
  console.log(`競價者說：${value}元`);
  const result = Reflect.set(target, key, value, receiver);
  observers.forEach(observer => observer());
  return result;
}

// 創(chuàng)建Proxy代理，實現(xiàn)被觀察者對象的抽象
const subject = obj => new Proxy(obj, {set});

// 被觀察者(競價者們)對象，默認(rèn)數(shù)值
const bidderSubject = subject({
  price: 0,
});

// 觀察者(拍賣師)對象
function auctionObserver() {
  console.log(`拍賣師說：有人出價${bidderSubject.price}元，還有沒有要出價的？`);
}

// 添加觀察者
observe(auctionObserver);
// 競價者出價
bidderSubject.price = 20;

執(zhí)行結(jié)果與上面 Java 是一致的，還是上圖吧，證明一下博主是木有說謊的：

這就是簡單的觀察者實現(xiàn)方式，在 javascript 我們有輔助的 api 就是 Proxy 和 Reflect，翻譯成中文是 代理 和 反射，別小看這他倆哈，作用其實很大的，具體的就不在這里說了，以后有機會給大家補一篇具體的使用說明。

其實我們在學(xué)習(xí) 觀察者模式 的時候，還會蹦出來一個詞語叫 發(fā)布-訂閱模式，大多數(shù)人都會說，這倆可以劃等號，但是他們真的可以劃等號么？答案就是(PS:博主的表情是壞笑)：不，他們不是一個東西，(戲精出現(xiàn)：what？why？)。

網(wǎng)上有個說法是：觀察者模式 是為了實現(xiàn)松耦合，我們從 Java 的代碼看到，實現(xiàn) 觀察者模式 用的是面向接口編程，整套實現(xiàn)的流程是：change() 方法所在的實例對象，就是 被觀察者 (Subject類)只需要維護一套 觀察者(Observer) 的集合，這些 Observer 實現(xiàn)相同的接口，Subject只需要知道，通知 Observer 時，需要調(diào)用哪個統(tǒng)一方法(例子中的 change()方法)就好了。

而 發(fā)布-訂閱模式 呢，發(fā)布者(被觀察者)，并不會直接通知訂閱者(觀察者)，換句話說，發(fā)布者和訂閱者，彼此互不相識，或許這里該有同學(xué)問了：他們互不相識？那他們之間該如何交流呢？答案是：通過第三者，也就是在消息隊列里面，我們常說的 經(jīng)紀(jì)人-Broker。
> 發(fā)布者只需要告訴 Broker，我要發(fā)的消息是，price是20，
> 訂閱者只需要告訴 Broker，我要訂閱price是20的消息。

于是，當(dāng) Broker 收到 發(fā)布者 發(fā)過來消息，并且price是20時，就會把消息推送給訂閱了price是20的 訂閱者。當(dāng)然也有可能是 訂閱者 自己過來拉取，看具體實現(xiàn)。

也就是說，發(fā)布-訂閱模式里， 發(fā)布者 和 訂閱者，不是松耦合，而是完全解耦的。

總結(jié)一下：

從表面上看：

觀察者模式里，只有兩個角色 —— 觀察者+被觀察者

而發(fā)布訂閱模式，卻不僅僅只有發(fā)布者和訂閱者兩個角色，還有第三個角色-經(jīng)紀(jì)人Broker存在。

往更深層次講：

觀察者和被觀察者，是松耦合的關(guān)系；

發(fā)布者和訂閱者，則完全不存在耦合。

其實我們在學(xué)習(xí)設(shè)計模式的時候，很多模式的實現(xiàn)，都是有一定依據(jù)的，首先離不開的就是面向?qū)ο笕筇匦裕浯问敲嫦驅(qū)ο笃叽笤瓌t，而設(shè)計模式則是對面向?qū)ο蟾唧w的實現(xiàn)，我們學(xué)習(xí)這些模式的時候，還是要多去寫代碼實踐一下，這些能有效的幫助我們優(yōu)化代碼。

參考鏈接：
觀察者模式 vs 發(fā)布訂閱模式