JS中自定义事件与观察者模式详解

那我来为你详细讲解一下关于“JS中自定义事件与观察者模式”的攻略。

一、 什么是自定义事件和观察者模式？

1. 自定义事件

在JavaScript中，浏览器提供了一些自带的事件，如 click、mouseover 等等。但有时候，我们需要在我们自己的应用程序中创建自定义事件，这就需要用到自定义事件技术了。

自定义事件即我们自己定义的事件，类似于浏览器内置的事件。自定义事件可以用来处理与应用程序相关的特定情况。

2. 观察者模式

观察者模式（又称为发布-订阅模式）是一种行为设计模式，用于简化对象之间的通信。在该模式中，一个对象（称为“主题”或“被观察者”）维护一组观察者，并通知他们在状态发生变化时进行自我更新。

观察者模式的核心是将订阅者和发布者解耦，即发布者只关心它的任务，而不需要知道是哪些订阅者在处理它们。

二、如何使用自定义事件？

下面让我们来看看如何在JavaScript 中使用自定义事件：

1. 创建一个自定义事件

在JavaScript中，可以使用 CustomEvent() 构造函数来创建自定义事件。下面是一个创建自定义事件的示例：

// 创建一个名为 "myCustomEvent" 的自定义事件
var customEvent = new CustomEvent("myCustomEvent");

// 触发自定义事件
document.dispatchEvent(customEvent);

在上面的示例中，我们首先创建了一个名为 “myCustomEvent”的自定义事件，然后通过 dispatchEvent() 方法触发了这个事件。

2. 监听自定义事件

为了监听自定义事件，可以使用 addEventListener() 方法。下面是一个监听自定义事件的示例：

// 监听自定义事件
document.addEventListener("myCustomEvent", function(event) {
  console.log("自定义事件被触发：", event);
});

在上面的示例中，我们通过 addEventListener() 方法监听了我们之前创建的自定义事件。在回调函数中，我们把事件对象作为参数，并在控制台中记录了这个事件对象。

三、如何使用观察者模式？

下面让我们来看看如何使用观察者模式：

1. 创建一个主题对象

首先，我们需要创建一个主题对象，它将包含我们要通知的观察者。下面是一个创建主题对象的示例：

var subject = {
  observers: [],
  attach: function(observer) {
    this.observers.push(observer);
  },
  detach: function(observer) {
    var index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  },
  notify: function() {
    for(var i = 0; i < this.observers.length; i++) {
      this.observers[i].update();
    }
  }
};

在上面的示例中，我们创建了一个名为 subject 的对象，其中包含了 observers 数组属性、一个 attach() 方法用于添加观察者、一个 detach() 方法用于删除观察者、以及一个 notify() 方法用于通知所有的观察者。

2. 创建观察者对象

接下来，我们需要为我们的应用程序创建一组观察者对象。观察者对象将实现一个 update() 方法，用于在主题对象状态发生变化时执行自己的代码。下面是一个创建观察者对象的示例：

var observer1 = {
  update: function() {
    console.log("观察者1: 主题对象已经更新");
  }
};

var observer2 = {
  update: function() {
    console.log("观察者2: 主题对象已经更新");
  }
};

在上面的示例中，我们创建了两个观察者对象，分别实现了一个 update() 方法。当主题对象的状态发生变化时，这两个观察者对象都将执行自己的代码。

3. 连接主题对象和观察者对象

最后，我们需要将观察者对象连接到主题对象上。通过调用主题对象的 attach() 方法，我们可以将一个或多个观察者对象添加到主题对象中。下面是一个连接主题对象和观察者对象的示例：

// 将观察者对象添加到主题对象中
subject.attach(observer1);
subject.attach(observer2);

// 发布通知，触发更新
subject.notify();

在上面的示例中，我们首先调用 attach() 方法将两个观察者对象添加到主题对象中，并然后调用 notify() 方法来通知这些观察者对象。当主题对象的状态发生变化时，这些观察者对象将会执行它们的 update() 方法。

四、示例

下面，我们来看两个简单的示例，分别是使用自定义事件和观察者模式来实现。

示例一：使用自定义事件

假设我们正在构建一个视频播放器，我们希望在视频播放、暂停和停止时触发自定义事件。在这种情况下，我们可以这样做：

// 创建一个视频播放器对象
var videoPlayer = {
  play: function() {
    // 执行视频播放代码
    console.log("视频已经开始播放");

    // 触发自定义事件
    var event = new CustomEvent("play");
    document.dispatchEvent(event);
  },
  pause: function() {
    // 执行视频暂停代码
    console.log("视频已经暂停");

    // 触发自定义事件
    var event = new CustomEvent("pause");
    document.dispatchEvent(event);
  },
  stop: function() {
    // 执行视频停止代码
    console.log("视频已经停止");

    // 触发自定义事件
    var event = new CustomEvent("stop");
    document.dispatchEvent(event);
  }
};

// 监听自定义事件
document.addEventListener("play", function() {
  console.log("自定义事件：视频已经开始播放");
});

document.addEventListener("pause", function() {
  console.log("自定义事件：视频已经暂停");
});

document.addEventListener("stop", function() {
  console.log("自定义事件：视频已经停止");
});

// 开始播放视频
videoPlayer.play();   // 输出: 视频已经开始播放 自定义事件：视频已经开始播放
videoPlayer.pause();  // 输出: 视频已经暂停 自定义事件：视频已经暂停
videoPlayer.stop();   // 输出: 视频已经停止 自定义事件：视频已经停止

在上面的示例中，我们创建了一个视频播放器对象，并使用自定义事件来触发“play”、“pause”和“stop”事件。通过 addEventListener() 方法，我们监听了这些自定义事件，当这些事件被触发时，将在控制台中记录相应的消息。

示例二：使用观察者模式

假设我们正在构建一个聊天程序，我们希望在接收到聊天消息时通知所有已连接的客户端。在这种情况下，我们可以使用观察者模式实现，示例如下：

// 创建一个聊天主题对象
var chatSubject = {
  observers: [],
  attach: function(observer) {
    this.observers.push(observer);
  },
  detach: function(observer) {
    var index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  },
  notify: function(message) {
    for(var i = 0; i < this.observers.length; i++) {
      this.observers[i].update(message);
    }
  }
};

// 创建两个客户端观察者对象
var client1 = {
  update: function(message) {
    console.log("客户端1: 接收到新的聊天消息：", message);
  }
};

var client2 = {
  update: function(message) {
    console.log("客户端2: 接收到新的聊天消息：", message);
  }
};

// 将客户端观察者对象添加到聊天主题对象中
chatSubject.attach(client1);
chatSubject.attach(client2);

// 发布新的聊天消息
chatSubject.notify("你好，欢迎加入聊天室！");   // 输出: 客户端1: 接收到新的聊天消息： 你好，欢迎加入聊天室！ 客户端2: 接收到新的聊天消息： 你好，欢迎加入聊天室！

在上面的示例中，我们创建了一个聊天主题对象和两个客户端观察者对象。主题对象包含了 attach()、detach() 和 notify() 等方法，用于添加、删除和通知观察者。客户端观察者对象实现了一个 update() 方法，用于在主题对象状态发生变化时执行自己的代码。通过 attach() 方法，我们将这两个客户端观察者对象添加到聊天主题对象中，在新的聊天消息发布时，这两个客户端观察者对象将会执行它们的 update() 方法。