换一种方式理解观察者模式

观察者模式

观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

使用观察者模式的好处：

支持简单的广播通信，自动通知所有已经订阅过的对象。
页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

理解的第一阶段

我们先用一个通俗的情景来比喻一下，就拿航班与航站楼之间的关系：

图上显示的是飞机1在从北京飞往南京，北京航站楼A 和南京航站楼B 都需要关注飞机1 的信息，而飞机1 在位置变化之后也要及时的通知北京航站楼A 和南京航站楼。（其实可以看出来，这里航站楼是被动的接受飞机是主动的发出变化）

所以，我们可以写一个简单的观察/订阅模式

function Observer () {
    // 数组存放多个观察者
    this.fns = [];
}

Observer.prototype = {
    // 订阅  (飞机信息)
    sub: function (fn) {
        this.fns.push(fn);
    },
    // 退订 (飞机信息)
    unsub: function (fn) {
        this.fns = this.fns.filter(function(el) {
            if (el !== fn) {
                return el;
            }
        })
    },
    // 发布 (飞机信息变化时)
    publish: function (o, thisObj) {
        var scope = thisObj || window;
        this.fns.forEach(function(el) {
            el.call(scope, o);
        });
    }
}

var ob = new Observer;

初始化飞机1 的地理位置

var location = '北京';

定义 2 个航站楼的行为

// 北京 航站楼A - 观察者
var hangzhanlouBeijing = function (data) {
    console.log('北京航站楼 收到了数据变化的通知，我知道现在 飞机1 的位置了，是在:' +data);
    // 做一些操作
};

// 南京 航站楼B - 观察者
var hangzhanlouNanjing= function (data) {
    console.log('南京航站楼 收到了数据变化的通知，我知道现在 飞机1 的位置了，是在:' +data + '，我这就准备接机');
    // 做一些操作
};

南京和北京航站楼开始订阅(注册)，将要关注飞机1 的地址位置

// 订阅  (飞机地理位置的变化)
ob.sub(hangzhanlouBeijing);
ob.sub(hangzhanlouNanjing);

飞机1 经过一段时间的飞行从北京到了南京，这时候地理位置发生了变化

// 经过一些 操作 导致 location 发生了变化
location = '南京';

重要然后 检查(校验) location(地址位置) 是否发生变化，如果发生变化，就进行通知

// 数据 location 发生变化(现在的值 不等于 原来的值)
if (location!== '北京') {
    // 发布  数据变化了(确认地址位置变了 )，广播 所有订阅(关注) 飞机1 的观察者(航站楼)
    ob.update(location);
}

输出

北京航站楼 收到了数据变化的通知，我知道现在 飞机1 的位置了，是在: 南京
南京航站楼 收到了数据变化的通知，我知道现在 飞机1 的位置了，是在: 南京，我这就准备接机

理解的第二阶段

情况一：因为这里我们只有一架飞机1 具有了 观察者模式，如果再来一架 飞机2 也是从北京飞往南京的呢？很明显，我们也需要知道 飞机2 的地理位置信息
情况二：还有假如 北京航站楼 只关注 飞机1 的变化，而不关注 飞机2 的变化，同理， 南京航站楼 只关注 _飞机2_的变化，而不关注 飞机1 的变化

那这样情况就比较复杂了

学术一点的意思就是：要让多个对象都具有观察者模式（让多个 观察者 可以关注多个自己想关注的 观察对象）。

这时候分析下，相比较之前有什么变化

首先，存放 观察者(航站楼) 的数组的个数不能固定，且类别/附属 应该与 观察对象 关联挂钩
再者，观察对象 的 被观察属性 也不应该固定(之前只关注了飞机1 的 location ，比如，我们可以观察飞机的 地理位置，同样也可以关注飞机的 海拔高度 等信息)

用图表示应该就是下面这种 数据情景

所以这里我们定义的一个通用函数，它应该具备上述的一些特性

多个观察者
多个观察者对象的多个属性
给他们添加订阅，取消订阅，发布的方法

也就是说：每个观察者对象，都独立维护一套独立的观察者模式。

根据需要，我们抽象出下面这样一个通用的函数：

//通用代码
var observer = {
    //订阅
    addSubscriber: function (callback) {
        this.subscribers[this.subscribers.length] = callback;
    },
    //退订
    removeSubscriber: function (callback) {
        for (var i = 0; i < this.subscribers.length; i++) {
            if (this.subscribers[i] === callback) {
                delete (this.subscribers[i]);
            }
        }
    },
    //广播
    publish: function (what) {
        for (var i = 0; i < this.subscribers.length; i++) {
            if (typeof this.subscribers[i] === 'function') {
                this.subscribers[i](what);
            }
        }
    },
    // 通过遍历，给 观察者对象 o 添加 观察者容器，订阅，退订，发布
    make: function (o) { 
        for (var i in this) {
            o[i] = this[i];
            // 每个 观察者对象  都维护自身的一个 观察者 数组
            o.subscribers = [];
        }
    }
};

OK，已经抽象出了具体的范式，下面就结合具体情景来看下看是否符合

下面先分别定义飞机1，飞机2 这两个观察者对象的多个属性(地理位置和海拔)

var plan1 = {
      location: '北京',
      height: '200km'
}

var plan2 = {
      location: '云南',
      height: '100km'
}

再，分别定义观察者的行为(航站楼1，航站楼2 分别关注飞机的运行状态)

var hangzhanlou1 = function hangzhanlou1(cb) {
      console.log('航站楼1 收到了 我关注的 飞机 的运行状态发生了改变...')
      // 订阅的对象发生了变化 ， 观察者 做一些自己想做的事...
      cb();
}

var hangzhanlou2 = function hangzhanlou2 (cb) {
      console.log('航站楼2 收到了 我关注的 飞机 的运行状态发生了改变...')
      // 订阅的对象发生了变化 ， 观察者 做一些自己想做的事...
     cb();
}

这里，航站楼1 可以订阅飞机1，也可以订阅飞机2 ，也可以都订阅

同样，航站楼1 可以订阅飞机的位置，也可以订阅飞机的海拔，也可以都订阅

现实层面上：飞机运行，发生状态的变化
Web层面上：一系列事件操作导致的状态变化

给飞机1，飞机2的地理位置，海拔高度都添加观察者模式

observer.make(plan1);
observer.make(plan2);

情景1：航站楼1 关注飞机1

添加观察者 hangzhanlou1

plan1.addSubscriber(hangzhanlou1)

飞机1 经过飞行，判断关注的信息是否发生了变化

这里判断是伪代码，但是这个判断的逻辑非常！非常！非常！的重要！如果有时间，这个后续会展开讲解，因为这里是另外一个核心内容，diff变化，从而控制View层的渲染！

 // 这里为了演示方便，默认判断 地理，海拔都变化了(其实也可以判断 观察者某一个 属性)
function checkChange(val, oldVal) {
    if (val !== oldVal) {
         plan1.publish(function(){
                console.log('飞机1 现在位置是上海，海拔是100km');
          })
    }
}

// 航站楼1 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机1 现在位置是上海，海拔是100km

情景2：航站楼2 关注飞机1 添加观察者 hangzhanlou2
```
plan1.addSubscriber(hangzhanlou2)
```

同样判断状态的改变，进行发布

function checkChange(val, oldVal) {
    if (val !== oldVal) {
         plan1.publish(function(){
                console.log('飞机1 现在位置是太原，海拔是120km');
          })
    }
}

// 航站楼1 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机1 现在位置是太原，海拔是120km
// 航站楼2 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机1 现在位置是太原，海拔是120km

情景3：航站楼1 关注飞机2

添加观察者 hangzhanlou1

plan2.addSubscriber(hangzhanlou1)

同样判断状态的改变，进行发布

function checkChange1(val, oldVal) {
    if (val !== oldVal) {
         plan1.publish(function(){
                console.log('飞机1 现在位置是青海，海拔是300km');
          })
    }
}

// 航站楼1 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机1 现在位置是青海，海拔是300km
// 航站楼2 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机1 现在位置是青海，海拔是300km

function checkChange2(val, oldVal) {
    if (val !== oldVal) {
         plan2.publish(function(){
                console.log('飞机2 现在位置是西藏，海拔是500km');
          })
    }
}

// 航站楼2 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机2 现在位置是西藏，海拔是500km

情景4：航站楼2 关注飞机2

添加观察者 hangzhanlou2

plan2.addSubscriber(hangzhanlou2)

同样判断状态的改变，进行发布

function checkChange1(val, oldVal) {
    if (val !== oldVal) {
         plan1.publish(function(){
                console.log('飞机1 现在位置是青海，海拔是300km');
          })
    }
}

// 航站楼1 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机1 现在位置是青海，海拔是300km
// 航站楼2 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机1 现在位置是青海，海拔是300km

function checkChange2(val, oldVal) {
    if (val !== oldVal) {
         plan2.publish(function(){
                console.log('飞机2 现在位置是西藏，海拔是500km');
          })
    }
}

// 航站楼1 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机2 现在位置是西藏，海拔是500km
// 航站楼2 收到了 我关注的 飞机 的运行状态发生了改变...
// 飞机2 现在位置是西藏，海拔是500km

情景5：航站楼2 取消订阅飞机1(因为飞机1已经安全降落了)

在飞机1 上移除观察者 hangzhanlou2

plan1.removeSubscriber(hangzhanlou2)

最后

观察者模式大体就是如此，但是在开发中为了适应各种场景可能会有很多变种，但是万变不离其中。

上面的代码只是用来帮助理解的，针对航班与航站楼这种情景还有很多改进的地方。

以上只是个人理解的一些拙见，如有不对之处还请海涵，并希望大家帮忙纠正！

拓展阅读

深入理解JavaScript系列（32）：设计模式之观察者模式

👆返回主页查看更多文章👆

zhaoqize / blog