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方法，让上面几我的物都订阅《读者》