javascript中的设计模式之发布-订阅模式

一、定义

  又叫观察者模式,他定义对象间的依照那个一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将的到通知。在javascript中,我们一般用时间模型来替代传统的发布-订阅模式

二、举例

  js中对dom元素绑定事件监听,就是简单的发布-订阅。另外在很多的框架和插件中都会存在使用这种方式来,比如vue的watch

三、结构

  发布-订阅模式可以分为两种形式,一种是发布者和订阅者直接进行通信,其结构如下:

 

  另一种是通过中介进行通信,发布者和订阅者互不相知,其结构如下:

四、实现

1.发布者和订阅者直接进行通信

  这种模式的核心在于,要在发布者中维护保存一个订阅者的回调函数的数组。

  典型的例子就是绑定dom元素,但是js未将对应的发布者暴露,这是浏览器实现的,因此我们使用的都是直接进行订阅。我们可以自定义一个事件,代码如下:

// 发布者
var publisher = {
    clientList: {},
    listen: function(key, fn){
        if(!this.clientList[key]) {
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn);
    },
    trigger: function(){
        var key = Array.prototype.shift.call(arguments),    // 获取发布的事件名称
            fns = this.clientList[key]; // 获取该事件下所有的回调函数列表
        if(!fns || fns.length === 0){
            return false;
        }
        for(var i = 0, l = fns.length; i < l; i++){
            fns[i].apply(this, arguments);
        }
    },
    run: function(){
        // 发布者根据实际情况在合适时机发布事件
        this.trigger("start_load", "开始加载");
        console.log("start load");
        this.trigger("loading", "正在加载");
        console.log("loading...");
        this.trigger("finish_load", "加载完成");
        console.log("finish load");
    }
};

// 订阅者
var subscriber = {
    init: function(){
        // 订阅
        publisher.listen("finish_load", function(rst){
            console.log("我是订阅者,我订阅了发布者的加载完成事件,现在我收到了发布者的信息:" + rst);
        });
    }
};

subscriber.init();

publisher.run();

  这种的模式很简单,但是他的缺点在于如果有多个发布者,那么就需要让每个发布者维护listen、trigger函数和一个事件回调函数缓存列表,比如我们可以会对js文件的加载过程进行订阅,也可能会对dom的构建过程进行订阅等等,显然每个发布者分别创建一个对象是耗费内存也是不优雅的。另外这种模式存在着发布者和订阅这的耦合性,往往在开发过程中,我们可能根本没有必要让发布者和订阅者进行通信,各自做好自己的事情就好了。因此这种方式很少会用到。

2.通过中介进行通信

  针对上面的方式的缺点,就有了这种方式,这样的模式是一种全局的发布-订阅模式。其核心是创建一个中介,也就是一个全局的Event对象,让他来帮助发布者和订阅者沟通。代码如下:

// 事件对象,作为中介
var Event = {
    clientList: {},
    listen: function(key, fn){
        if(!this.clientList[key]) {
            this.clientList[key] = [];
        }
        this.clientList[key].push(fn);
    },
    trigger: function(){
        var key = Array.prototype.shift.call(arguments),    // 获取发布的事件名称
            fns = this.clientList[key]; // 获取该事件下所有的回调函数列表
        if(!fns || fns.length === 0){
            return false;
        }
        for(var i = 0, l = fns.length; i < l; i++){
            fns[i].apply(this, arguments);
        }
    }
};
// 发布者
var publisher = {
    run: function(){
        Event.trigger("start_load", "开始加载");
        console.log("start load");
        Event.trigger("loading", "正在加载");
        console.log("loading...");
        Event.trigger("finish_load", "加载完成");
        console.log("finish load");
    }
};

// 订阅者
var subscriber = {
    init: function(){
        // 订阅
        Event.listen("finish_load", function(rst){
            console.log("我是订阅者,我订阅了发布者的加载完成事件,现在我收到了发布者的信息:" + rst);
        });
    }
};
subscriber.init();
publisher.run();

  我们看绘制二维地图的leaflet框架中,对于发布-订阅模式的实现:

export var Events = {
    // 添加监听事件,types:{mouseclick: fn, dbclick: fn} 或者:"mouseclick dbclick"
    on: function (types, fn, context) {...},
    // 移除事件,若未设置任何参数,则删除该对象所有的事件。若fn未设置,则删除对象中所有的type事件
    off: function (types, fn, context) {...},

    // 内部注册监听事件
    _on: function (type, fn, context) {
        this._events = this._events || {};
        var typeListeners = this._events[type];    // 获取对象中其他注册的该事件的回调函数
        // 若对象中未曾设置过相同事件名称,则保存其回调函数
        if (!typeListeners) {
            typeListeners = [];
            this._events[type] = typeListeners;
        }

        var newListener = {fn: fn, ctx: context};
        ...
        typeListeners.push(newListener);
    },

    // 移除事件, 若未设置fn则删除所有的type事件。,否则删除对应的事件
    _off: function (type, fn, context) {...},

    // 触发对象中的所有type事件,若设置了propagate则触发父对象的type事件
    fire: function (type, data, propagate) {
        if (!this.listens(type, propagate)) { return this; }   // 检查是否注册了type事件
        // 构建回调函数中参数事件对象
        var event = Util.extend({}, data, {
            type: type,
            target: this,
            sourceTarget: data && data.sourceTarget || this
        });
        if (this._events) {
            var listeners = this._events[type];

            // _firingCount用于防止触发事件未执行完成同时删除该事件。
            // _firingCound表示正在执行的回调函数的个数,当为0时表示没有正在执行的事件。可以直接删除,否则需要将_events进行复制,防止删除掉需要回调的对象
            if (listeners) {
                this._firingCount = (this._firingCount + 1) || 1;
                // 执行对象注册的所有该事件的回调函数
                for (var i = 0, len = listeners.length; i < len; i++) {
                    var l = listeners[i];
                    l.fn.call(l.ctx || this, event);
                }
                this._firingCount--;
            }
        }
        return this;
    },

    listens: function (type) {
        var listeners = this._events && this._events[type];
        return !!(listeners && listeners.length);
    },
};
export var Evented = Class.extend(Events);

  使用Event基础类用来实现发布-订阅,而这个基础类类似于一个接口,他需要依附于一个实际的对象来构造该对象的事件系统,比如框架中的图层需要有各种鼠标、键盘触摸事件,因此为了模仿类似dom一样的触发方式,图层类就要继承这个Event类:

 

 

 

 

  因此在订阅的时候,就可以直接:

layer.on("click",function(){});

五、总结

发布-订阅模式的关键在于用一个事件对象对其进行实现,其中需要有以下几点:

  1.缓存对象:用于保存订阅者监听的回调函数,键为事件名称,值为该事件名下所有的回调函数,其结构形如:

var cache = {
    "click": [fn1,fn2,fn3...],
    "dbclick": [fn4,fn5,fn6...]
        ...
}

  2.listen/on函数:监听函数,为订阅者使用,通常包含两个参数:事件名称和回调函数,内部会将这两个参数保存到缓存对象中

  3.trigger/fire函数:发布函数,为发布者使用,通常包含一个参数:事件名称。内部通过事件名称到缓存对象中查找对应的回调函数数组,并依次执行

  4.remoe/off函数:接触监听函数,为订阅者使用,通常包含一个或两个参数:事件名称或注册监听时的回调函数。若为一个参数事件名称,则会到缓存函数中查找到对应的注册的回调函数的数组,并将其清空。若有第二个参数回调函数,会在缓存对象中找到事件名称对应的回调函数数组,查找是否存在参数中的回调函数,有的话,则只删除这一个回调函数