关键词：

观察者模式

定义：观察者模式(Observer Pattern)：定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。
其中有两个定义需要明确，被观察者和观察者。通常来说，这两者是一对多的，也有多对多的情景。
在网页开发中，被观察者通常是数据源，不论是内存数据，还是持久化数据，又或者是接口返回的数据，都可以作为被观察者。它一旦改变，就去改变依赖于它的节点。
观察者有很多可能，针对于网页开发，我们常常认为dom节点是观察者，一旦节点的监视的数据源发生变化，节点也执行更新方法。当然不限于此，也有可能是一个事件，一次计数等等。
接下来用js写一个简单的观察者模式的例子：

// 发布类
class Subject 
  constructor (data) 
    this.obList = [];
    this.data = data;
  
  add (ob) 
    if (arguments.length >= 1) 
      Array.from(arguments).forEach(item => this.obList.push(item));
    
  
  remove (ob) 
    let i = this.obList.findIndex(ele => ele === ob);
    if (i >= 0) 
      this.obList.splice(i, 1);
    
  
  notify () 
    this.obList.forEach((item) => 
      item.update(this.data);
    )
  


// 观察者类
class Observer 
  constructor (id) 
    this.id = id;
  
  update (data) 
    console.log(‘observer ‘ + this.id + ‘: ‘ + data + ‘;‘);
  


function test() 
  let sub = new Subject(‘test‘);

  let ob1 = new Observer(1);
  let ob2 = new Observer(2);
  let ob3 = new Observer(3);

  sub.add(ob1, ob2, ob3);

  sub.notify();

  sub.remove(ob2);

  sub.notify();


test();

结果为：

observer 1: test;
observer 2: test;
observer 3: test;
observer 1: test;
observer 3: test;

这里简单定义了一个发布类和一个观察类，发布者维护一个观察者列表，每次数据变化后，依次通知所有在观察者列表里的观察者。
代码很简单，可以执行在控制台或者node里跑一下。
但是这样的耦合很深，观察者和发布者不能有其他的表现，很死板，我们可以继续抽象一下。
先画个类图：

借助于TypeScript，我们可以有如下的发布者和观察者定义。

abstract class Observer 
    abstract update();


abstract class Subject 
    protected obList: ObserverList;
    abstract notify();

ObserverList则可以实现如下：

class ObserverList 
    private list: Array<Observer>;
    constructor () 
        this.list = [];
    
    add (ob: Observer) 
        this.list.push(ob);
    

    remove (ob: Observer) 
        if (this.list.indexOf(ob) > -1) 
            this.list.splice(this.list.indexOf(ob), 1);
        
    

    empty () 
        this.list = [];
    

    public each () 
        this.list.forEach(item => 
            item.update();
        )
    

接下来实现两个实体类：

// 实体发布类
class ConcreteSubject extends Subject 
    protected obList = new ObserverList();

    private _data: string;

    constructor (defaultData: string) 
        super();
        this._data = defaultData;
    

    set data (newVaule) 
        this._data = newVaule;
    
    get data () 
        return this._data;
    

    add (ob: Observer) 
        this.obList.add(ob);
    
    remove (ob: Observer) 
        this.obList.remove(ob);
    
    notify () 
        this.obList.each()
    


// 可以指定发布者的观察者类
class ConcreteObserver extends Observer 
    readonly _id;
    private sub;

    constructor (id, sub) 
        super();
        this._id = id;
        this.sub = sub;
    

    get id () 
        return this._id;
    

    update () 
        console.log(‘concrete observer ‘ + this.id + ‘: ‘ + this.sub.data);
    

跑一下测试代码：

let sub = new ConcreteSubject(‘test‘);

let ob1 = new ConcreteObserver(1, sub);
let ob2 = new ConcreteObserver(2, sub);
let ob3 = new ConcreteObserver(3, sub);

sub.add(ob1)
sub.add(ob2)
sub.add(ob3)

sub.notify();

上面的发布类，使用add、remove等方法来处理观察者列表，通过notify方法，则去通知观察者们，可以去执行update方法了。
观察者和被观察者，仍然耦合比较深，所以又有人提出来发布订阅模式，维护一个事件中心，来处理多个观察者和被观察者的关系，不让他们直接耦合在一起。下一篇对发布订阅做解析。

观察者模式vs发布订阅模式(代码片段)

目录场景观察者模式发布订阅模式总结场景有一回面试，面试官问：观察者模式，和发布订阅模式，有什么区别？我脑海中立刻闪现了《设计模式》里讲的：Publishers+Subscribers=ObserverPattern“它们是一样的。”，我故作镇定，嘴角... 查看详情

观察者模式vs发布订阅模式(代码片段)

目录场景观察者模式发布订阅模式总结场景有一回面试，面试官问：观察者模式，和发布订阅模式，有什么区别？我脑海中立刻闪现了《设计模式》里讲的：Publishers+Subscribers=ObserverPattern“它们是一样的。”，我故作镇定，嘴角... 查看详情

观察者模式和发布/订阅模式的区别(代码片段)

...在，JS居然能订阅发布消息，太酷了。有的时候我会叫他观察者模式，有时候又会叫他发布订阅模式，觉得叫什么都是对的。但是，他们并不一样。差异在观察者模式中，观察者需要直接订阅目标事件。在目标发出内容改 查看详情

设计模式之观察者模式(代码片段)

观察者模式，又被称为发布-订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能耦合。虽然说观察者模式，又被称为发布-订阅模式，但是实际上它们之间存在差异的，区别在于调度的地方不同。上图... 查看详情

javascript订阅-发布模式（观察者模式）(代码片段)

查看详情

观察者模式发布订阅和事件驱动(代码片段)

　　观察者模式（有时又被称为模型（Model）-视图（View）模式、源-收听者(Listener)模式或从属者模式）是软件设计模式的一种。在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出... 查看详情

发布-订阅者模式(观察者模式)(代码片段)

...！！！！！一、发布订阅模式是什么发布订阅者模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象豆浆得到通知，在js开发中我们一般用事件模型来替代传统的发... 查看详情

eventbus发布-订阅模式(eventbus组成模块|观察者模式)(代码片段)

文章目录一、发布-订阅模式二、EventBus组成模块三、观察者模式一、发布-订阅模式发布订阅模式:发布者Publisher:状态改变时,向消息中心发送事件;订阅者Subscriber:到消息中心订阅自己关心的事件;消息中心:负责维护一个消息队列,... 查看详情

观察者模式与发布-订阅模式(代码片段)

...是针对软件设计中普遍存在的各种问题所提出的解决方案观察者模式发布-订阅模式观察者模式观察者模式（Observerpattern）指的是在对象间定义一个一对多（被观察者与多个观察者）的关联，当一个对象改变了... 查看详情

java实现观察者(发布-订阅)模式(代码片段)

观察者模式(Observer),也叫发布-订阅模式(Publish-Subscribe)观察者模式涉及到被观察的主题(Subject)与观察者(Observer)2个角色，主题发布消息，观察者响应消息。观察者可以订阅主题，也可以取消订阅。观察者模式示例：主播与粉丝主题... 查看详情

设计模式---观察者模式(代码片段)

观察者模式引言介绍角色原理类图微信订阅号的案例总结优点缺点适用场景观察者模式的典型应用JDK提供的观察者接口GuavaEventBus中的观察者模式SpringApplicationContext事件机制中的观察者模式参考文章引言观察者模式是设计模式中... 查看详情

观察者模式和发布订阅模式(代码片段)

...力是否开启），但它的耦合太高。所以能够如何优化呢？观察者模式观察者模式，有时又被称为模型（Model）-视图（View）模式、源-收听者(Listener)模式或从属者模式，是一种对象行为模式。它定义对象间的一种一对多的依赖关系... 查看详情

javascript发布订阅者模式和观察者模式及区别(代码片段)

一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情

javascript发布订阅者模式和观察者模式及区别(代码片段)

一、发布订阅模式发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。多方订阅，一方发布，订阅放会收到通知举例：教学楼中... 查看详情

设计模式-观察者模式发布/订阅模式(代码片段)

设计模式-观察者模式发布/订阅模式代码观察者接口publicinterfaceIHanFeiZi//当吃早饭时publicvoidhavBreakFast();//进行娱乐活动时publicvoidhaveFun();具体的被观察者publicclassHanFeiZiimplementsIHanFeiZi`//根据是否在吃饭，作为监控的标准privatebooleanis... 查看详情

c++观察者模式（发布-订阅）的使用(代码片段)

观察者模式-ObserverPattern模式简介介绍优点缺点代码实现场景说明实现代码关键解读运行结果参考资料模式简介观察者模式（ObserverPattern），也叫我们熟知的发布-订阅模式。它是一种行为型模式。介绍观察者模式主要... 查看详情

观察者模式解析(代码片段)

1.概述　　观察者模式（ObserverPattern），是软件设计模式中的一种，又称发布-订阅模式，属于发布-订阅架构的一种应用。　　观察者模式定义了对象之间一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的... 查看详情

观察者模式和订阅/发布者模式（转）

在翻阅资料的时候，有人把观察者（Observer）模式等同于发布（Publish）/订阅（Subscribe）模式，也有人认为这两种模式还是存在差异，而我认为确实是存在差异的，本质上的区别是调度的地方不同。观察者模式比较概念的解释是... 查看详情