精讲javascript设计模式之”观察者模式“ 精讲javascript设计模式之”观察

前言由于笔者最近去研究了一下vue设计的原理，看到vue中用到了观察者模式，导致我无法全方位的了解vue，这使笔者不得不重新审视设计模式的重要性，在看一篇文章中说到：”如果js你只想学一种设计模式，那么就是观察者模式“，这足矣看出观察者模式重要性
****本文会先概述什么是观察者模式，到UML类图讲解，代码的实现，再到观察者模式的应用****
观察者模式
观察者模式又称为”发布-订阅“模式，，那什么是观察这模式呢？这个有点像订外卖，比如你在家定了一份外卖，此时你是观察者（observer）,而外卖是被观察的对象（subject）,此时外卖的一些信息发生变化了，比如已经有骑手接单了，距离你还有400m等这些信息的变化，会时时的通知观察者，而观察者什么都不用做，等骑手送到家门口就ok了，
UML类图
在写一个设计模式之前，先画一下UML类图有利于写代码的效率，那什么是UML类图呢？我理解的UML类图是在写代码之前把各个类中的属性，方法和各个类之间的关系画出来，便于敲代码，和团队之间的交流，

文章图片
uml.jpg
如图就是观察者模式的UML类图，从这个图中，我们知道有两个对象，Suject,和Observer,其中Subject对象属性有observers，state，方法有getstate(),setState(),attach(),notifyAllObservers()，而Observer中属性有name,和subject,方法有update(),有一个Suject指向Observer的箭头，代表了在Observer中用到了Subject的实例
代码实现

class Subject{//Subject被观察的对象 constructor(){ this.state=100 this.observers=[]//观察了Subject的所有观察者 } getState(){ return this.state } setState(state){ this.state=state this.notifyAllObservers() } notifyAllObservers(){//notifyAllObservers的作用是通知观察者数据的变化 this.observers.forEach(observer=>{ observer.updated() }) } attach(observer){//attach的作用是把观察则添加到observers数组中 this.observers.push(observer) } } class Observer{//观察者 constructor(name,subject) { this.name=name this.subject=subject this.subject.attach(this) } updated(){ console.log(`${this.name} undated,state is:${this.subject.state}`) } } let subject=new Subject() let observer=new Observer('tom',subject) subject.setState(666)

当我们实例化Observer的时候，构造函数的this.subject.attach(this)这个操作已经把observer关联到了Subject中的observers数组中，当执行subject.setState(666)的时候，会自动执行（通知）observer执行updated（）方法
观察者模式的应用
【精讲javascript设计模式之”观察者模式“】未完待续。。。。。。