[js] 自定义事件

#应用在多部分相互交叉的情况。

有助于维护和解耦，触发和监听是分离的

 

#

 

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);
        }            
    }
};

 

#

 

            function handleMessage(event) {
                console.warn("Message received: " + event.message);
            }
            var target = new EventTarget();
            
            target.addHandler("message", handleMessage);
            console.log(target.handlers);
            
            target.fire({
                type: "message",
                message: "Hello world!"
            });
            console.log(target.handlers);
            
            target.removeHandler("message", handleMessage);
            console.log(target.handlers);
            
            target.fire({
                type: "message",
                message: "Hello world!"
            });
            console.log(target.handlers);

 

#

 

    //继承
            function object(o) {
                function F() {}
                F.prototype = o;
                return new F();
            }
            //不理解这个inheritPrototype
            function inheritPrototype(subType, superType) {
                var prototype = object(superType.prototype); //create object
                prototype.constructor = subType; //augment object
                subType.prototype = prototype; //assign object
            }

            function Person(name, age) {
                EventTarget.call(this);
                this.name = name;
                this.age = age;
            }
            inheritPrototype(Person, EventTarget); //
            Person.prototype.say = function(message) {
                this.fire({
                    type: "message",
                    message: message
                });
            };

            function handleMessage(event) {
                console.log(event.target.name + " says: " + event.message);
            }
            var person = new Person("Nicholas", 29);
            person.addHandler("message", handleMessage);
            console.log(person.handlers);
            person.say("Hi there.");
            console.log(person.handlers);