设计模式 -- 观察者模式

Posted 2021-12-31 liuqiuyue

做了这么长时间的 菜鸟程序员 ，我好像还没有写过一篇关于设计模式的博客...咳咳...意外，纯属意外。所以，我决定，从这一刻起，我要把设计模式在从头学习一遍，不然都对不起我这 菜鸟 的身份。那这次，就从观察者模式开始好啦...至于其他的，慢慢来。废话不多说，还是进入正题吧！

从定义上看：观察者模式 是当对象(不知道什么是对象的，面壁思过切...)间存在一对多关系时，则使用观察者模式 ，比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式 属于 行为型模式 (不会还要让我讲一下设计模式的分类吧？我不要在这里讲...)。

其实，我所理解的 观察者模式 ，就是观察和被观察对象之间的关系，好比说，在拍卖的时候，拍卖师观察最高标价，然后通知给其他竞价者竞价。在这里面，拍卖师是观察者，而那些竞价者，是被观察者，文字不太好理解是吧，那我们画个图看一下：

从图中我们可以看到，拍卖师观察竞价者1的标价，拿到了最高标价，然后在通知其他竞价者，这就是一个简单的观察者模式图示，仔细看一下这个图，我们会发现，最基础的观察者模式中，涉及以下几种角色：

• 被观察者：竞价者们；
• 观察者：拍卖师；
• 具体的被观察者：竞价者们的出价动作；
• 具体的观察者：拍卖师观察竞价者的动作；

按照上述的四种角色，我们来用代码还原一下观察者模式的实现：

Java

/**
 * 抽象被观察者(竞价者们)
 **/
public abstract class Subject 
    // 用来保存注册的观察者对象
    private List<Observer> list = new ArrayList<>();

    // 注册观察者对象
    public void attach(Observer observer) 
        list.add(observer);
        System.out.println("Attached an observer");
    

    // 通知所有注册的观察者对象
    public void nodifyObservers(int price) 
        for (Observer observer : list) 
            observer.update(price);
        
    


/**
 * 抽象观察者角色类(拍卖师)
 **/
public interface Observer 
    public void update(int price);


/**
 * 具体的被观察者实现类(竞价者们的动作)
 **/
public class BidderSubject extends Subject 
    private int price;
    
    public void change(int price) 
        this.price = price;
        System.out.println("竞价者说：" + price + "元");
        // 竞价者们说出价格，通知观察者
        this.nodifyObservers(price);
    


/**
 * 具体的观察者实现类(拍卖师的动作)
 **/
public class AuctionObserver implements Observer 
    // 观察者的动作
    private int observerAction;

    @Override
    public void update(int price) 
        // 更新观察者的动作，使其与被观察者(竞价者们出价)的消息保持一致
        observerAction = price;
        System.out.println("好，某某出价为：" + observerAction + "元，还有没有更高的？");
    


/**
 * 客户端执行类
 **/
public class Main 
    public static void main(String[] args) 
        // 创建被观察者(竞价者)主题对象
        BidderSubject bidderSubject = new BidderSubject();
        // 创建观察者(拍卖师)对象
        Observer observer = new AuctionObserver();
        // 将观察者(拍卖师)对象登记到被观察对象(竞价者们)上
        bidderSubject.attach(observer);
        // 改变被观察者(竞价者们)的出价
        bidderSubject.change(20);
    

最后我们看一下执行结果：

其实在 Java 中，还是比较容易理解抽象这个概念，但是在 javascript 语言中，因为没有 多态 ，所以在实现上，没有 java 这么明显的看出观察者和被观察者的关系，但是我们还是可以实现这个观察者模式，在这里，博主使用的是 es6 的一个新特性：Proxy 和 Reflect ，这两个 api 的具体使用这里就不在赘述了，有兴趣的可以看看 阮一峰 老师的 ES6入门学习 ，具体的还是让我们直接看代码吧：

// 添加观察者的方法
const observers = new Set();
const observe = fn => observers.add(fn);

// 设置Proxy的set方法
function set(target, key, value, receiver) 
  console.log(`竞价者说：$value元`);
  const result = Reflect.set(target, key, value, receiver);
  observers.forEach(observer => observer());
  return result;


// 创建Proxy代理，实现被观察者对象的抽象
const subject = obj => new Proxy(obj, set);

// 被观察者(竞价者们)对象，默认数值
const bidderSubject = subject(
  price: 0,
);

// 观察者(拍卖师)对象
function auctionObserver() 
  console.log(`拍卖师说：有人出价$bidderSubject.price元，还有没有要出价的？`);


// 添加观察者
observe(auctionObserver);
// 竞价者出价
bidderSubject.price = 20;

执行结果与上面 Java 是一致的，还是上图吧，证明一下博主是木有说谎的：

这就是简单的观察者实现方式，在 javascript 我们有辅助的 api 就是 Proxy 和 Reflect，翻译成中文是 代理 和 反射，别小看这他俩哈，作用其实很大的，具体的就不在这里说了，以后有机会给大家补一篇具体的使用说明。

其实我们在学习 观察者模式 的时候，还会蹦出来一个词语叫 发布-订阅模式，大多数人都会说，这俩可以划等号，但是他们真的可以划等号么？答案就是(PS:博主的表情是坏笑)：不，他们不是一个东西，(戏精出现：what？why？)。

网上有个说法是：观察者模式 是为了实现松耦合，我们从 Java 的代码看到，实现 观察者模式 用的是面向接口编程，整套实现的流程是：change() 方法所在的实例对象，就是 被观察者 (Subject类)只需要维护一套 观察者(Observer) 的集合，这些 Observer 实现相同的接口，Subject只需要知道，通知 Observer 时，需要调用哪个统一方法(例子中的 change()方法)就好了。

而 发布-订阅模式 呢，发布者(被观察者)，并不会直接通知订阅者(观察者)，换句话说，发布者和订阅者，彼此互不相识，或许这里该有同学问了：他们互不相识？那他们之间该如何交流呢？答案是：通过第三者，也就是在消息队列里面，我们常说的 经纪人-Broker。

发布者只需要告诉 Broker，我要发的消息是，price是20，
订阅者只需要告诉 Broker，我要订阅price是20的消息。

于是，当 Broker 收到 发布者 发过来消息，并且price是20时，就会把消息推送给订阅了price是20的 订阅者。当然也有可能是 订阅者 自己过来拉取，看具体实现。

也就是说，发布-订阅模式里， 发布者 和 订阅者，不是松耦合，而是完全解耦的。

总结一下：

• 从表面上看：
  • 观察者模式里，只有两个角色 —— 观察者+被观察者
  • 而发布订阅模式，却不仅仅只有发布者和订阅者两个角色，还有第三个角色-经纪人Broker存在。
• 往更深层次讲：
  • 观察者和被观察者，是松耦合的关系；
  • 发布者和订阅者，则完全不存在耦合。

其实我们在学习设计模式的时候，很多模式的实现，都是有一定依据的，首先离不开的就是面向对象三大特性，其次是面向对象七大原则，而设计模式则是对面向对象更具体的实现，我们学习这些模式的时候，还是要多去写代码实践一下，这些能有效的帮助我们优化代码。

参考链接：
观察者模式 vs 发布订阅模式