设计模式:观察者模式

观察者模式:

☂ 参考:谈谈 JavaScript 的观察者模式(自定义事件)

这是一种创建松散耦合代码的技术。

它定义对象间 一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。

主体并不知道观察者的任何事情,观察者知道主体并能注册事件的回调函数。

/**
 * 观察者模式:
 */
var Event = {
    // 通过 on 接口监听事件 EventName
    // 如果事件 eventName 被触发,则执行 callback 回调函数
    on: function(eventName, callback) {
        if (!this.handles) {
            // this.handles = {};   // 对象引用会引起共享
            Object.defineProperty(this, 'handles', {
                value: {},
                enumerable: false,
                configurable: true,
                writable: true
            })
        }

        if (!this.handles[eventName]) {
            this.handles[eventName] = [];
        }

        this.handles[eventName].push(callback);
    },

    // 触发事件
    emit: function() {
        var eventName = arguments[0],
            callbackArr = this.handles[eventName],
            args = arguments[1];

        if (callbackArr) {
            for (var i = 0; i < callbackArr.length; i++) {
                callbackArr[i](args);
            }
        }
    }
}

// 测试1
Event.on('test', function(result) {
    console.log(result);    // 输出 'hello world'
});

Event.on('test', function() {
    console.log('test');    // 输出 'test'
});

Event.emit('test', 'hello world');


// 测试2
var person1 = {};
var person2 = {};

Object.assign(person1, Event);
Object.assign(person2, Event);

person1.on('call1', function() {
    console.log('person1');
});

person2.on('call2', function() {
    console.log('person2');
});

person1.emit('call1');  // 输出 'person1'
person1.emit('call2');  // 没有输出
person2.emit('call1');  // 没有输出
person2.emit('call2');  // 输出 'person2'

posted on 2016-09-19 17:57  Ruth92  阅读(193)  评论(0编辑  收藏  举报

导航