设计模式:观察者模式
观察者模式:
☂ 参考:谈谈 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'
Scoop It and Enjoy the Ride!