JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

什么是观察者模式？

观察者模式也被称为发布订阅模式，是一种软件设计模式，用于将分散在各个部分的通知联系起来以实现松散耦合，降低对象间的依赖性。

在一个典型的观察者模式中，存在两类对象：观察者和被观察者（主题）。被观察者（主题）对象管理所有注册的观察者，并在状态发生变化时主动通知观察者对象。

观察者模式的结构

观察者模式由四个重要的角色组成：

1. 主题（被观察者）
2. 观察者
3. 抽象观察者
4. 具体观察者

其中，主题对象（Subject）管理一组观察者对象，这组观察者对象形成了这个主题的通知列表，当主题状态变化时，它会自动向它的观察者们发布通知。

JavaScript中的观察者模式

在JavaScript中，我们可以使用面向对象的思想来实现观察者模式。其步骤如下：

1. 定义一个主题对象（被观察者）
2. 给主题对象添加存储观察者的列表和一些添加和删除观察者对象的方法
3. 定义一个观察者对象
4. 在观察者对象中为主题对象添加观察者
5. 定义具体观察者对象，并实现通知方式

观察者模式实例1：用户登录验证

以用户登录验证为例，以下是完整示例代码：

主题对象（被观察者）

var LoginSubject = function() {
  this.observers = []; // 存储观察者列表
}

LoginSubject.prototype = {
  add: function(observer) {
    this.observers.push(observer);
  },
  remove: function(observer) {
    this.observers = this.observers.filter(function(item){
      return item !== observer;
    });
  },
  notify: function() {
    this.observers.forEach(function(observer){
      observer.update();
    });
  }
}

我们定义了一个名为LoginSubject的主题对象，其中定义了observers成员变量用于存储观察者列表，并分别定义了add、remove和notify方法，分别用于添加观察者、删除观察者和通知所有观察者。

观察者对象

var LoginObserver = function() {};

LoginObserver.prototype = {
  update: function() {
    console.log('用户已登录');
  }
}

定义了一个名为LoginObserver的观察者对象，其中定义了update方法，被主题对象LoginSubject调用时会输出一条“用户已登录”的消息。

具体观察者对象

var LoginSuccessObserver = function() {};

LoginSuccessObserver.prototype = new LoginObserver();

LoginSuccessObserver.prototype.update = function() {
  console.log('登录成功');
}

定义了一个名为LoginSuccessObserver的具体观察者对象，它继承自LoginObserver，并重写了update方法，被主题对象LoginSubject调用时会输出一条“登录成功”的消息。

使用

var loginSubject = new LoginSubject();
var loginSuccessObserver = new LoginSuccessObserver();

loginSubject.add(loginSuccessObserver); // 将具体观察者对象添加到主题对象中
loginSubject.notify(); // 调用通知方法，会输出“登录成功”的消息

最后，我们实例化了LoginSubject对象和LoginSuccessObserver对象，并将观察者对象loginSuccessObserver添加到主题对象中。调用loginSubject.notify()方法，会输出“登录成功”的消息。

观察者模式实例2：商品价格变动

以下是商品价格变动的完整示例代码：

主题对象（被观察者）

var ProductPriceSubject = function() {
  this.observers = []; // 存储观察者列表
  this.price = 0;
}

ProductPriceSubject.prototype = {
  add: function(observer) {
    this.observers.push(observer);
  },
  remove: function(observer) {
    this.observers = this.observers.filter(function(item){
      return item !== observer;
    });
  },
  notify: function() {
    this.observers.forEach(function(observer){
      observer.update();
    });
  },
  setPrice: function(price) {
    this.price = price;
    this.notify(); // 商品价格变动时自动通知观察者们
  },
  getPrice: function() {
    return this.price;
  }
}

定义了一个名为ProductPriceSubject的主题对象，其中定义了observers和price成员变量分别用于存储观察者列表和记录商品价格，并继承了add、remove和notify三个方法，即对观察者的添加和删除以及通知观察者的操作。另外，这里定义了setPrice和getPrice方法，分别用于设置和获取商品价格，这个主题对象在商品价格变动时会自动通知它的观察者们。

观察者对象

var ProductPriceObserver = function(product) {
  this.product = product;
  this.product.add(this); // 将自己添加到商品价格主题对象中
}

ProductPriceObserver.prototype = {
  update: function() {
    console.log('商品价格变动为：' + this.product.getPrice());
  }
}

定义了一个名为ProductPriceObserver的观察者对象，其构造函数接收一个商品主题对象作为参数，将自己本身添加到主题对象的观察者列表中，并定义update方法，新的价格输出到控制台。

使用

var productPriceSubject = new ProductPriceSubject();
var productPriceObserver1 = new ProductPriceObserver(productPriceSubject);
var productPriceObserver2 = new ProductPriceObserver(productPriceSubject);

productPriceSubject.setPrice(78); // 更新商品价格，会自动通知观察者们

实例化ProductPriceSubject对象以及两个ProductPriceObserver对象，将观察者对象们添加到主题对象中，并调用productPriceSubject.setPrice(78)方法更新商品价格，会自动通知观察者们输出新的价格。

总结

观察者模式是一种实现对象间松散耦合的设计模式，主要由主题对象、观察者和具体观察者对象组成。主题对象管理观察者列表，并在线通知观察者时遍历列表，让观察者执行相应的方法。在JavaScript中，我们可以利用面向对象的思想来简单地实现观察者模式，为实现松耦合的结构提供了简单可行的方法。