angular中的觀察者模式(一)

注：所述內容，只描述必要部分或者重點，以便於您有個宏觀瞭解。關鍵字，類型描述,命名等細節，沒必要深究，可參考其餘文章。

1.什麼是觀察者模式

開門見山，首先什麼是觀察者模式，核心概念就是：觀察者(Observer)和可觀察對象(Observable)，可觀察對象是一個源，異步的發出一些值。其次觀察者，訂閱這個源，並對發出的值作全響應或部分響應。

二者是**一對多**的關係：可觀察對象（1）==>觀察者（n）

舉例：

step_1：你訂閱了《讀者》，向讀者雜誌社發了一個 
    訂單 = {addr:xxxx,  訂單id：9527,  行爲：寄到家}。 
step_2: 我訂閱了《讀者》，向讀者雜誌社發了一個
    訂單 = {addr:email,  訂單id：1314, 行爲：電子版到郵箱}。
step_3: 讀者雜誌社，有一個訂單列表。而後不定時發佈雜誌，每次發佈遍歷訂單表，根據addr和 行爲 作響應的操做。

2.常見實現方式

上述內容，一種實現方式就是（僞代碼）：

class Observable{
        訂單list = [];
        add(){ list.push()};
        remove(){ list.remove};
        notifyAll(newBook){ list.forEach()}; //通知列表中全部訂單的用戶，有新雜質，並調用訂單中行爲函數
    }
    Interface Observer{
        update(){ // 訂單中的行爲
            //你和我兩我的的接受新雜誌的方式不同
        }
    }
    //生成一個訂單
    let me = new Observer('我'，'hex@qq.com')
    me.update = ()=>{ //給我發電子版到郵箱}
    observable.add(me)

3.那麼angular中的觀者模式是什麼樣的？

一樣兩個對象，可觀察對象和觀察者。原理大體相同：觀察者經過可觀察對象的訂閱方法進行訂閱，可觀察對象有了新值後，調用觀察者的某個方法通知觀察者。

先說Observer（觀察者），這個類型描述以下：

Interface Observer{
        next（）{} // 有新《讀者》發佈了：拿到書你會執行讀書的操做
        error（）{} // 雜誌社倒閉了：你得想着是退錢，仍是再定其餘的雜誌
        complete（）{} // 通知你：你交了一年的錢，已經給你推了12個月，再不給你推了
    }

接下來，說Observable（可觀察對象）

Class Obsevable{
        fn: Function; // (Observer) => { unSubscribe: () => {} }
        constructor(fn){
            this.fn = fn;
        }
        subscribe(observer){
            this.fn(observer);
        }
    }

可觀察對象的主要結構大體如此。細說就是：

subscribe: 訂閱函數，接受一個 Observer對象
        如上所述：Observer這個樣子：
            {
                next(){},
                error(){},
                complete(){}
           };

而後把這個observer當作fn的參數，去調用 fn;

怎麼實例化這個Observable呢？那就須要一個fn類型的參數，fn 是什麼樣子？
這個樣子，主要是三部分，中文社區稱之爲subscriber function（訂閱者函數）：

讀者_Fn = (observer) => { 
    // 1- 從observer中拿到回調方法
    const {next, error , complete} = observer;
    // 2- 而後發起一個異步請求
    // 好比持續訂閱《讀者》一年，跟先前定義Observer的內容比較
    // 當新讀者發佈了，調用next（）
    // 一年的都給你推完了， 調用 complete（）
    
    // 3- 最後要返回一個取消訂閱的方法：有新的《讀者》也不要給你發了            
    return unSubscribe = () => {} 
}

最後實例化一個Observable：

讀者_Observable = new Observable（讀者_Fn）;

我去訂閱《讀者》就是：

subscription = 讀者_Observable.subscribe(my_observer_instance);
// subscription : { unSubscribe()=>{} }

總結

要使用angular中的觀察者模式完成一次訂閱一年《讀者》的任務。分爲4步：

step_1: 創建一個觀察者函數，觀察者函數的職能是，
            接收一個Observer對象
            發起獲取《讀者》的請求，並在讀者雜誌社 返回新消息的時候，添加回調
            返回，一個取消雜誌訂閱的函數
            
step_2: 用 Step_1的觀察者函數，實例化一個 《讀者》的發佈源，

step_3: 由於每一個觀察者，的next、error處理方式是本身獨特的。你訂閱是爲了看紙質版，
        我訂閱是爲了糊牆，即每一個觀察者的next不盡相同。
        因此，實例幾個觀察者，你本身的，小明的，李磊等等的 observer對象
        
step_4: 經過《讀者》的發佈源的 subscribe方法，讓上面幾我的物都訂閱《讀者》