javaScript 自定义事件、发布订阅设计模式

   现在很多应用都允许用户根据自己的喜好订阅一些自己较为关注的信息，当应用更新了这些信息后将针对不同的订阅类型推送此类信息。例如xx招聘网，当你订阅了互联网IT技术相关分类的招聘信息推送后，当企业在该网站发布互联网IT技术相关的招聘信息后，你就能收到该招聘网的推送信息，就可以很轻松的得到你感兴趣的信息，而不会被其他一些乱七八糟的信息浪费时间。

在这里涉及了三个不同类的事物，1，你（消息订阅者）；2，企业（消息发布者）；3，招聘网（中介，联系发布者与订阅者的桥梁）；

 

定义消息发布平台

 

function EventTarget() {
    this.handlers = {};
}

EventTarget.prototype = {
    constructor : EventTarget,
    
    //订阅消息
    addHandler : function(type, handler) {
        if (typeof this.handlers[type] == "undefined") {
            this.handlers[type] = [];
        }
        
        this.handlers[type].push(handler);
    },
    
    //发布消息
    fire : function(event) {
        if (!event.target) {
            event.target = this;
        }
        if (this.handlers[event.type] instanceof Array) {
            var handlers = this.handlers[event.type];
            for (var i = 0, len = handlers.length; i < len; i++) {
                handlers[i](event);
            }
        }
    },
    
    //取消订阅
    removeHandler : function(type, handler) {
        if (this.handlers[type] instanceof Array) {
            var handlers = this.handlers[type];
            for (var i = 0, len = handlers.length; i < len; i++) {
                if (handlers[i] === handler) {
                    break;
                }
            }

            handlers.splice(i, 1);
        }
    }
};

 

订阅与发布

    var btn1 = document.getElementById("test1");
    var etarget = new EventTarget();
    
    function handler1(event){
        alert("handler1:" + JSON.stringify(event));
    };
    
    function handler2(event){
        alert("handler2:" + JSON.stringify(event));
    };
    
    //订阅       
     etarget.addHandler("msgType", handler1);
    etarget.addHandler("msgType", handler2);
    
   
    //点击按钮触发发布消息（触发事件）    
    btn1.addEventListener("click",  function(){
        var event = {};
        event.type = "msgType";
        event.msg = "this is a custom event's message ."
        etarget.fire(event);
    }, false);