精讲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（）方法

观察者模式的应用

未完待续。。。。。。

最后编辑于：2019.04.17 22:51:08