[架构]事件机制--典型观察者模式

最新推荐文章于 2023-09-09 08:55:39 发布

ouyangshima

最新推荐文章于 2023-09-09 08:55:39 发布

阅读量628

点赞数

分类专栏：模式架构

本文链接：https://blog.csdn.net/shimazhuge/article/details/78360101

版权

模式架构专栏收录该内容

42 篇文章 2 订阅

订阅专栏

本文介绍了观察者模式如何实现松耦合，重点讨论了CustomEvent在事件封装中的作用，允许用户自定义事件以增强系统间的解耦。文章详细讲解了事件管理的三个核心部分：addListener用于添加事件句柄，fire用于触发事件，removeListener用于移除事件。在fire方法中，事件参数被转换为包含type和可选target的对象，并依次执行句柄。同时，文章还提及了事件驱动处理库和Cocos2d-x Lua的自定义事件分发系统。

摘要由CSDN通过智能技术生成

程序设计的正确标准是松耦合,高内聚. 而观察者模式恰恰给松耦合提供了便利条件. CustomEvent又是对事件的高度封装.是用户能够自定义自己的事件. 从而达到更好的松耦合.简单的自定义事件:

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

EventTarget.prototype = {
    constructor: EventTarget,
    addListener: function(type, listener) {
        if(typeof this._listeners[type] == 'undefined') {
            this._listeners[type] = [];
        }
        this._listeners[type].push(listener);
    },
    fire: function(event) {
        if(typeof event == 'string') {
            event = { type: event};
        }
        if(!event.target) {
            event.target = this;
        }
        if(!event.type) {
            throw new Error('Event Object missing type property');
        }
        if(this._listeners[event.type] instanceof Array) {
            var listeners = this._listeners[event.type];
            for(var i = 0, len = listeners.length; i < len; i++) {
                listeners[i].call(this, event);
            }
        }
    },
    removeListener: function(type, listener) {
        if(this._listeners[type] instanceof Array) {
            var listeners = this._listeners[type];
            for(var i = 0, len = listeners.length;i < len; i++) {
                if(listeners[i] === listener) {
                    listeners.splice(i, 1);
                    break;
                }
            }
        }
    }
};

//var target = new EventTarget();
//function handleEvent(event) {
    //alert(event.target);
//};

//target.addListener('foo', handleEvent);
//target.fire({type:'foo', target:'wasai'});
//target.removeListener('foo', handleEvent)
//target.fire({type:'foo', target:'wasai'});

function MyObject() {
    EventTarget.call(this);
}
MyObject.prototype = new EventTarget();
MyObject.prototype.constructor = MyObject;

MyObject.prototype.foo = function() {
    this.fire('foo');
}
var o = new MyObject();
o.addListener('foo', function() {
    alert('Foo Just happend');
})
o.foo();

上面代码主要分为三部分