|
观察者模式（发布-订阅模式）：它定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。
订阅者也称为观察者，而补观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（调用）所有订阅者并且可能经常以事件对象的形式传递消息。
假如我们正在开发一个商城网站，网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件，就是必须先用ajax异步请求获取用户的登录信息。这是很正常的，比如用户的名字和头像要显示在header模块里，而这两个字段都来自用户登录后返回的信息。这个时候，我们就可以把这几个模块的渲染事件都放到一个数组里面，然后待登录成功之后再遍历这个数组并且调用每一个方法。
基本模式
<script type="text/javascript">
var observer = {
regist:function(eventName,callback){ //添加事件
if(!this.obj){
this.obj = {};
}
if(this.obj[eventName]){ //若方法已存在，添加到数组，如果不存在，先创建一个数组然后在添加
this.obj[eventName].push(callback);
}else{
this.obj[eventName] = [callback];
}
},
emit:function(eventName){ //遍历执行每一个方法
if(this.obj[eventName]){
for(var i = 0; i < this.obj[eventName].length; i++){
this.obj[eventName][i]();
}
}
},
remove:function(eventName,callback){ //移除事件
if(this.obj[eventName]){
for(var i = 0; i < this.obj[eventName].length; i++){
if(this.obj[eventName][i]==callback){
this.obj[eventName].splice(i,1);
}
}
}
}
}
</script>
贴一个观察者模式面试题
var Event = {
// 通过on接口监听事件eventName
// 如果事件eventName被触发，则执行callback回调函数
on: function(eventName, callback) {
},
// 触发事件 eventName
emit: function(eventName) {
}
};
// 测试1
Event.on('test', function(result) {
console.log(result);
});
Event.on('test', function() {
console.log('test');
});
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'
// 测试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'
ps:转自一个小姐姐的解析，很详细。https://www.cnblogs.com/LuckyWinty/p/5796190.html | 
转播
