订阅发布者模式的简单实现

什么是订阅发布者模式？

 

   　　 一个对象作为特定任务或是另一对象的活动的观察者，并且在这个任务或活动发生时，通知观察者。观察者也被叫作订阅者（Subscriber），它指向被观察的对象，既被观察者（Publisher 或 subject)。当事件发生时，被观察者（Publisher）就会通知观察者（subscriber）。

       举个例子：我们订阅微信公众号之后，当公众号有新动作的时候，他就会推送文章给我们，我们作为订阅者就知道了公众号（发布者）有新的动作。

   下面是代码的简单实现：

var observer = {        
    callbacks: [],                     //订阅列表
    add: function (fn) {               //添加新的订阅
          this.callbacks.push(fn);
    },
    fire: function () {                //发推送给所有订阅者
        this.callbacks.forEach(function (fn) {
            fn();
        })
    }
}

observer.add(function () {
    console.log("我是第一个粉丝，我订阅了你的公众号");
});

observer.add(function () {
    console.log("我是第二个粉丝，我订阅了你的公众号");
 }) 

observer.fire(); //公众号发新文章，每个订阅者收到通知并且执行相应的操作(订阅时添加的函数)。  控制台打印：我是第一个粉丝，我订阅了你的公众号    我是第二个粉丝，我订阅了你的公众号

 

　　observer是被观察者，里面的callbacks数组中的每一个都是一个订阅者，每一个元素都是函数形式

 

　　设计该模式背后的主要动力是解耦！解耦！解耦！重要的事情说三遍！（甚至还要加粗标红嘻嘻嘻）。在这种模式中，并不是一个对象调用另一个对象的方法，而是一个对象订阅另一个对象的特定活动并在状态改变后获得通知。订阅者也称为观察者，而被观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（调用）所有订阅者并且可能经常以事件对象的形式传递消息。

　　

　　jquery的$.Callbacks()底层也是这样实现的,下面是一个简单的例子：

var callbacks = $.Callbacks(),
      fn1 = function () {
                console.log("我是fn1");
               },
      fn2 = function () {
                console.log("我是fn2");
               };

callbacks.add( fn1 );
callbacks.add(fn2);
callbacks.fire();  //控制台打印: 我是fn1  我是fn2

 

 

ps: Vue的双向数据绑定就是使用的订阅发布者模式，具体可以点击这里