如何编写变异观察者 js - Javascript

变异观察者是一种设计模式，其目的是实现对象/属性的监控与通知。当一个属性发生变化时，该模式允许我们通知其他对象，允许它们在出现变化时采取行动。本文将介绍如何使用Javascript编写变异观察者。

实现

我们将通过创建一个简单的示例来说明如何使用Javascript编写变异观察者。在此示例中，我们将创建一个与DOM元素关联的对象，当元素的内容更新时，对象将执行特定的操作。

首先，我们需要定义观察者对象。观察者对象将包含有关DOM元素和操作的信息。

function Observer(element, callback) {
    this.element = element;
    this.callback = callback;
}

在构造函数中，我们指定要观察的DOM元素和要执行的操作。callback函数将在元素的内容更新时被调用。

接下来，我们需要定义目标对象。目标对象是DOM元素，需要具有添加、删除和通知观察者的方法。

function Target(element) {
    this.element = element;
    this.observers = [];

    this.addObserver = function(observer) {
        this.observers.push(observer);
    };

    this.removeObserver = function(observer) {
        var index = this.observers.indexOf(observer);
        if (index > -1) {
            this.observers.splice(index, 1);
        }
    };

    this.notifyObservers = function() {
        for (var i = 0; i < this.observers.length; i++) {
            this.observers[i].callback();
        }
    };
}

在构造函数中，我们指定要观察的DOM元素，并初始化观察者列表。

添加观察者的函数将新观察者添加到观察者列表中。

删除观察者的函数将从观察者列表中删除特定的观察者。

通知观察者的函数将遍历整个观察者列表，并调用每个观察者的回调函数。

最后，我们需要将观察者和目标对象连接起来，允许观察者观察目标对象。

var element = document.getElementById("targetElement");
var target = new Target(element);

var observer = new Observer(target.element, function() {
    console.log("Element content has changed.");
});

target.addObserver(observer);

// Modify the target element's content.
element.innerHTML = "New content!";

target.notifyObservers();

在此示例中，我们使用getElementById函数获取要监控的DOM元素。我们然后使用Target对象初始化目标对象，并使用Observer对象初始化观察者对象。我们添加观察者到目标对象中，并使用innerHTML属性更新元素的内容。最后，我们在目标对象上调用notifyObservers方法，以便当元素内容更改时通知观察者。

结论

变异观察者是一个强大的设计模式，它允许我们对对象的变化进行监控，并在出现变化时通知其他对象。本文介绍了如何使用Javascript编写变异观察者，并提供了一个简单的示例。通过使用此模式，我们可以提高代码的可维护性和可重用性。