js-Entwurfsmuster: Was ist das Beobachtermuster (Publish-Subscribe-Muster)? Einführung in das JS-Beobachtermuster

Dieser Artikel enthält Inhalte zu js-Designmustern: Was ist das Beobachtermuster (Publish-Subscribe-Muster)? Die Einführung des js-Beobachtermodus hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Was ist das Beobachtermuster (Publish-Subscribe-Muster)?

Definition: definiert eine Eins-zu-viele-Abhängigkeitsbeziehung zwischen Objekten. Wenn sich der Status eines Objekts ändert, werden alle davon abhängigen Objekte benachrichtigt und automatisch aktualisiert.

Löst hauptsächlich: Das Problem, andere Objekte über Statusänderungen eines Objekts zu benachrichtigen und Benutzerfreundlichkeit und geringe Kopplung zu berücksichtigen, um ein hohes Maß an Zusammenarbeit sicherzustellen.

Verwendungszweck: Wenn sich der Zustand eines Objekts (Zielobjekts) ändert, werden alle abhängigen Objekte (Beobachterobjekte) benachrichtigt und es werden Broadcast-Benachrichtigungen erstellt.

So lösen Sie: Durch den Einsatz objektorientierter Technologie kann diese Abhängigkeit abgeschwächt werden.

Schlüsselcode: Verwenden Sie für ein bestimmtes Topci ein Array zum Speichern von Abonnenten.

Anwendungsbeispiele: 1. Während der Auktion der Auktionator beobachtet den höchsten Wert. Geben Sie ein Gebot ab und benachrichtigen Sie dann andere Bieter zum Bieten. 2. In „Reise in den Westen“ bat Wukong den Bodhisattva, den Roten Jungen zu übergeben, und lockte eine alte Schildkröte an. Er beobachtete die Aktion des Bodhisattvas.

Vorteile des Beobachtermusters: 1. Der Beobachter und das Beobachtete sind abstrakt gekoppelt. 2. Richten Sie einen Auslösemechanismus ein.

Nachteile des Beobachtermusters: 1. Wenn ein beobachtetes Objekt viele direkte und indirekte Beobachter hat, kostet es viel Zeit, alle Beobachter zu benachrichtigen. 2. Wenn zwischen dem Beobachter und dem Beobachtungsziel eine zyklische Abhängigkeit besteht, löst das Beobachtungsziel zyklische Aufrufe zwischen ihnen aus, was zum Absturz des Systems führen kann. 3. Der Beobachtermodus verfügt nicht über einen entsprechenden Mechanismus, mit dem der Beobachter wissen kann, wie sich das beobachtete Zielobjekt geändert hat, sondern nur, um zu wissen, dass sich das Beobachtungsziel geändert hat.

Beobachtermuster-Nutzungsszenarien:

• Ein abstraktes Modell hat zwei Aspekte, von denen einer vom anderen abhängt. Durch die Kapselung dieser Aspekte in separaten Objekten können sie unabhängig voneinander geändert und wiederverwendet werden.

• Eine Änderung an einem Objekt führt dazu, dass sich auch ein oder mehrere andere Objekte ändern. Es ist nicht bekannt, wie viele Objekte sich ändern, was die Kopplung zwischen Objekten verringern kann.

• Ein Objekt muss andere Objekte benachrichtigen, ohne zu wissen, wer sie sind.

• Sie müssen eine Triggerkette im System erstellen. Das Verhalten von Objekt A wirkt sich auf Objekt B aus, und das Verhalten von Objekt B wirkt sich auf Objekt C aus ... Sie können die verwenden Beobachtermuster, um einen Kettenauslösemechanismus zu erstellen.

Hinweise: 1. Vermeiden Sie Zirkelbezüge. 2. Bei sequentieller Ausführung führt ein Beobachterfehler zum Einfrieren des Systems, und im Allgemeinen wird eine asynchrone Methode verwendet.

Observer-Mustercode-Implementierung

/*
     *发布-订阅模式（观察者模式）
     */
function pubsub() {
    var _pubsub = {},//全局对象，即发布订阅对象
        _topics = {}, // 回调函数存放的数组
        _subUid = 0;

    // 发布方法
    _pubsub.publish = function (topic) {
        if (!_topics[topic]) {
            return false;
        }
        var args = [].slice.call(arguments, 1);
        setTimeout(function () {
            var subscribers = _topics[topic];
            for (var i = 0, j = subscribers.length; i < j; i++) {
                subscribers[i].callback.apply(null, args);
            }
        }, 0);
        return true;
    };
    //订阅方法
    _pubsub.subscribe = function (topic, callback) {
        if (!_topics[topic]) {
            _topics[topic] = [];
        }
        var token = (++_subUid).toString();
        _topics[topic].push({
            token: token,
            callback: callback
        });
        return token;
    };
    //退订方法
    _pubsub.unsubscribe = function (token) {
        for (var m in _topics) {
            if (_topics[m]) {
                for (var i = 0, j = _topics[m].length; i < j; i++) {
                    if (_topics[m][i].token === token) {
                        _topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };

    return {
        subscribe: _pubsub.subscribe,
        publish: _pubsub.publish,
        unsubscribe: _pubsub.unsubscribe
    }
}

Verwandte Empfehlungen:

js-Entwurfsmuster: Was ist das Iteratormuster? Einführung in das js-Iteratormuster

js-Entwurfsmuster: Was ist das Proxy-Muster? Einführung in den JS-Proxy-Modus

Das obige ist der detaillierte Inhalt vonjs-Entwurfsmuster: Was ist das Beobachtermuster (Publish-Subscribe-Muster)? Einführung in das JS-Beobachtermuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!