js的观察者模式

观察者模式（发布-订阅模式）：它定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。由主体和观察者组成，主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。主体并不知道观察者的任何事情，观察者知道主体并能注册事件的回调函数。

订阅者也称为观察者，而补观察的对象称为发布者或主题。当发生了一个重要的事件时，发布者将会通知（调用）所有订阅者并且可能经常以事件对象的形式传递消息。

假如我们正在开发一个商城网站，网站里有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