深入理解Javascript中的观察者模式
简介
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。讲道理，如果我们写的不是稍微底层的代码，可能不会用到它。但是有了它会让代码更灵活，更加规整，减少冗余代码，方便分模块，分功能开发。
使用观察者模式的好处：
- 支持简单的广播通信，自动通知所有已经订阅过的对象。
- 页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
引入
在前端业务中，可能用的比较多的地方可能就是自定义事件了。
其实浏览器的事件也是观察者模式
div.onclick=functionclick(){
console.log('click')
}
这里functionclick订阅了div的click事件，当我们的鼠标点击操作，事件发布，对应的function就会执行。这个functionclick就是一个观察者。
具象化理解
其实单纯的看代码实现，也可以理解。但是万物都是有联系的，这些编程模式设计之初也是来源于生活经验吧，所以，具象的理解也是很重要的体验。
我们举一个结婚办酒席的例子。比如你的一个好朋友要结婚了，'结婚'这件事情不是天天发生，一辈子就那么一…两次(maybemore)，所以我们的'去参加他的婚礼'肯定不是天天发生，只是在特定的时候。我肯定不能天天去问他，'今天你结婚吗，我来参加酒席啊'。一次两次还行，天天问，sb啊。假如是一个找不到对象的单身汪，被你天天这么问，还不得杀了你。。
那这里就需要有一个事件发布了，也就是'通知你'。
我作为一个观察者，去订阅他'结婚'的这个事件，就是我们是好朋友，他的婚礼我肯定去，我们已经说好了。那么我就是观察者，'我去参加婚礼'就是对应而来的动作。当我订阅了'结婚'这个事件，我就不需要天天去问他了，我该干嘛干嘛，该去泡妞，约饭，看电影，约…就干嘛。
当他发布'结婚'这个事件，通知到我了，我就在特定的时候，去do'参加婚礼酒席'这个行为function…
//模拟代码
//我订阅了'marry'事件
wo.on('marry',function(){
//去参加婚礼酒席
})
//然后他发布。比如浏览器的点击
//对应的我的function就会执行
解耦/模块/功能
其实在代码中是需要一个类似于中间服务的,管理发布订阅的中间者。
比如浏览器中的事件处理程序，他提供了订阅的接口，然后接收'事件'信号发布给你。让js代码跟浏览器之间有了联系，互动。而本来是两个不同的东西。
在我看来，观察者模式最大的好处就是在于解耦，会让我们一锅端的代码，分功能，分模块的抽离开，更加清晰，开发成本变低，也容易维护。
比如：
1、我们项目里的view展示层跟model(数据处理)逻辑层，最开始写页面，ajax，字符串拼接，请求回一个接口拼一下，然后给dom。可能我们一个js文件，一个function里面又请求了接口，又去负责view的展示。
varxhr=newXMLHttpRequest()
xhr.open('get',url)
xhr.onreadystatechange=function(){
if(this.readyState!==4)return
if(this.status===200){
divs.innerHTML='<p>'+this.response+'</p>'
//
}
}
xhr.responseType='json'
xhr.send(null)
其实应该是请求跟展示渲染分开的。
//请求
functiongetData(){
varxhr=newXMLHttpRequest()
xhr.open('get',url)
xhr.onreadystatechange=function(){
if(this.readyState!==4)return
if(this.status===200){
this.emit('渲染')
//发布
}
}
xhr.responseType='json'
xhr.send(null)
}
//渲染
functionview(){}
xhr.on('渲染',view)
直接在状态码200那里放个callback，也能做到。但是，如果我有两个甚至渲染函数，处理不同的东西，我每次还要改成不同的函数吗。这个相同请求的过程是不是还要写一遍。
用观察者的话
functionview1(){}
functionview2(){}
functionview3(){}
functionview4(){}
if(我要渲染view1){
xhr.on('渲染',view1)//订阅
xhr.on('渲染',view2)
}else{
xhr.on('渲染',view3)
xhr.on('渲染',view4)
}
好处就在于我的getData这个功能，方法就只负责请求数据，然后他会暴露一个接口，供我去添加方法。这样我的getData就相对来说是比较完整的功能模块，就算我有再多的情况，我的getData里面的代码是不会改动的了。
有时候我们经常为了实现业务，添加一个新的功能，而去更改我们之前写好的代码，导致我们本来的功能模块被改的面目全非。
而且会有好多的重复代码。
过程？or模块？
当然封好一个好的完整的功能模块是挺难的一件事情，但我们起码要有个开始。
订阅去添加方法，发布了事件池就执行。
2、MV*类框架
MVC也是一种设计模式，这里面也都应用了观察者。
他内部也都是各种发布订阅，好像是一个观察者模型，从而实现了一个模拟的内存中的dom改变，计算出那个DOM节点应该改变。当然具体实现要做好多事情…就不…
3、redux
简单实现一个createstore函数
//这是一个工厂函数，可以创建store
constcreateStore=(reducer)=>{
letstate;//定义存储的state
letlisteners=[];
//getState的作用很简单就是返回当前是state
constgetState=()=>state;
//定义一个派发函数
//当在外界调用此函数的时候，会修改状态
constdispatch=(action)=>{
//调用reducer函数修改状态，返回一新的状态并赋值给这个局部状态变量
state=reducer(state,action);
//依次调用监听函数，通知所有的监听函数
listeners.forEach(listener=>listener());
}
//订阅此状态的函数，当状态发生变化的时候记得调用此监听函数
constsubscribe=function(listener){
//先把此监听加到数组中
listeners.push(listener);
//返回一个函数，当调用它的时候将此监听函数从监听数组移除
returnfunction(){
listeners=listeners.filter(l=>l!=listener);
}
}
//默认调用一次dispatch给state赋一个初始值
dispatch();
return{
getState,
dispatch,
subscribe
}
}
letstore=createStore(reducer);
//把数据渲染到界面上
constrender=()=>{
document.body.innerText=store.getState();
}
//订阅状态变化事件，当状态变化时用监听函数
store.subscribe(render);
render();
varINCREASE_ACTION={type:'INCREMENT'};
document.addEventListener('click',function(e){
//触发一个Action
store.dispatch(INCREASE_ACTION);
})
4、在node中的作用大多数时候我们不会直接使用EventEmitter，而是在对象中继承它。包括fs、net、http在内的，只要是支持事件响应的核心模块都是EventEmitter的子类。
实现一个可以发布订阅的类
'usestrict'
classEmitterEvent{
constructor(){
//构造器。实例上创建一个事件池
this._event={}
}
//on订阅
on(eventName,handler){
//根据eventName，事件池有对应的事件数组，
就push添加，没有就新建一个。
//严谨一点应该判断handler的类型，是不是function
if(this._event[eventName]){
this._event[eventName].push(handler)
}else{
this._event[eventName]=[handler]
}
}
emit(eventName){
//根据eventName找到对应数组
varevents=this._event[eventName];
//取一下传进来的参数，方便给执行的函数
varotherArgs=Array.prototype.slice.call(arguments,1)
varthat=this
if(events){
events.forEach((event)=>{
event.apply(that,otherArgs)
})
}
}
//解除订阅
off(eventName,handler){
varevents=this._event[eventName]
if(events){
this._event[eventName]=events.filter((event)=>{
returnevent!==handler
})
}
}
//订阅以后，emit发布执行一次后自动解除订阅
once(eventName,handler){
varthat=this
functionfunc(){
varargs=Array.prototype.slice.call(arguments,0)
handler.apply(that,args)
this.off(eventName,func)
}
this.on(eventName,func)
}
}
varevent=newEmitterEvent()
functiona(something){
console.log(something,'aa-aa')
}
functionb(something){
console.log(something)
}
event.once('dosomething',a)
event.emit('dosomething','chifan')
//event.emit('dosomething')
//event.on('dosomething',a)
//event.on('dosomething',b)
//event.emit('dosomething','chifan')
//event.off('dosomething',a)
//setTimeout(()=>{
//event.emit('dosomething','hejiu')
//},2000)
当我们需要用的时候，只需要继承一下这个EmitterEvent类。要操作的实例就可以用on,emit方法，也就是可以用发布订阅。比如XHR，组件…
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。