js设计模式--观察者模(发布订阅模式)

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

使用观察者模式的好处：

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

首先来一个例子，利用js原型特性实现观察者模式：

    function Observer() {
       this.fns = [];
    }


    Observer.prototype = {
        subscribe:function(fn) {
           var that = this;
           that.fns.push(fn);
        },
        unsubscribe:function(fn) {
           var that = this;
           that.fns = that.fns.filter(function(el){
               if (el != fn) {
                   return el;
               }
           });
        },
        update:function(o,thisObj) {
            var scope = thisObj || window;
            this.fns.forEach(function (el) {
                    el.call(scope, o);
                }
            );
        }
    }

    var o = new Observer;
    var f1 = function (data) {
        console.log('bry1: ' + data + ', 赶紧干活了！');
    };

    var f2 = function (data) {
        console.log('bry2: ' + data + ', 找他加点工资去！');
    };

    o.subscribe(f1);
    o.subscribe(f2);

    o.update("老板回来了！")

    //退订f1
    o.unsubscribe(f1);
    //再来验证
    o.update("老板回来了！");  

输出结果

bry1: 老板回来了！, 赶紧干活了！
index.html:123 bry2: 老板回来了！, 找他加点工资去！
index.html:123 bry2: 老板回来了！, 找他加点工资去！

再来一种创建形式，利用对象创建观察者模式

  var pubsub = {
        topics : {}, // 回调函数存放的数组
        subUid : -1,
        //订阅方法
         subscribe  : function (type, func) {
            if (! this.topics[type]) {
                 this.topics[type] = [];
            }

            var token = (++ this.subUid).toString();
             this.topics[type].push({
                token: token,
                func: func
            });
            return token;
        },

        // 发布方法 -- 通知
         publish : function (type, args) {
             var that = this;
            if (! that.topics[type]) {
                return false;
            }

            setTimeout(function () {
                var subscribers =  that.topics[type],
                    len = subscribers ? subscribers.length : 0;

                while (len--) {
                    subscribers[len].func(type, args);
                }
            }, 0);

            return true;

        },



       //退订方法
         unsubscribe : function (token) {
            for (var m in  this.topics) {
                if (this.topics[m]) {
                    for (var i = 0, j =  this.topics[m].length; i < j; i++) {
                        if ( this.topics[m][i].token === token) {
                             this.topics[m].splice(i, 1);
                            return token;
                        }
                    }
                }
            }
            return false;
        }

    };

    //来，订阅一个
    pubsub.subscribe('example1', function (type, data) {
        console.log(type + ": " + data);
    });
    pubsub.subscribe('example1', function (type, data) {
        console.log("brydemo-" + type + ": " + data);
    });


    pubsub.subscribe('example2', function (type, data) {
        console.log("订阅的第二种类型-" +　type + ": " + data);
    });

    //发布通知
    pubsub.publish('example2', 'hello world!');

输出结果：

订阅的第二种类型-example2: hello world!