Mehrere Implementierungsbeispiele für Javascript-Designmuster-Observer-Pattern_Javascript-Kenntnisse

Einführung

Der Beobachtermodus wird auch als Publish/Subscribe-Modus (Publish/Subscribe) bezeichnet. Er definiert eine Eins-zu-Viele-Beziehung, die es mehreren Beobachterobjekten ermöglicht, ein bestimmtes Themenobjekt gleichzeitig zu überwachen Themenobjektänderungen. Alle Beobachterobjekte werden benachrichtigt, damit sie sich automatisch aktualisieren können.

Vorteile der Verwendung des Beobachtermusters:

1. Unterstützen Sie die einfache Broadcast-Kommunikation und benachrichtigen Sie automatisch alle abonnierten Objekte.
2. Nach dem Laden der Seite kann das Zielobjekt problemlos eine dynamische Beziehung zum Beobachter haben, was die Flexibilität erhöht.
3. Die abstrakte Kopplungsbeziehung zwischen dem Zielobjekt und dem Beobachter kann unabhängig erweitert und wiederverwendet werden.

Text (Version 1)

Die Implementierung des Beobachtermusters in JS wird durch Rückrufe erreicht. Definieren wir zunächst ein Pubsub-Objekt, das drei Methoden enthält: Abonnieren, Abmelden und Veröffentlichen.

Code kopieren Der Code lautet wie folgt:

var pubsub = {};
(Funktion (q) {

var topic = {}, // Array in Callback-Funktion gespeichert
        subUid = -1;
//Methode veröffentlichen
​ q.publish = Funktion (Thema, Argumente) {

           if (!topics[topic]) {
              return false;
}

setTimeout(function () {
               var Abonnenten = Themen[Thema],
                len = subscribers ? subscribers.length : 0;

              while (len--) {
                  subscribers[len].func(topic, args);
            }
         }, 0);

        return true;

};
//Abonnementmethode
​ q.subscribe = Funktion (Thema, Funktion) {

           if (!topics[topic]) {
themen[thema] = [];
}

      var token = ( subUid).toString();
themen[thema].push({
Token: Token,
               func: func
        });
         Token zurückgeben;
};
//So kündigen Sie das Abonnement
​ q.unsubscribe = Funktion (Token) {
für (var m in Themen) {
                if (topics[m]) {
for (var i = 0, j = topic[m].length; i If (topics[m][i].token === token) {
themen[m].splice(i, 1);
                                       Rückgabe-Token;
                 }
                }
            }
}
         return false;
};
} (pubsub));

Wie folgt verwenden:

Code kopieren Der Code lautet wie folgt:

//Komm und abonniere
pubsub.subscribe('example1', Funktion (Themen, Daten) {
console.log(topics ": " data);
});

//Benachrichtigung veröffentlichen
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

Wie wäre es damit? Ist es nicht großartig zu verwenden? Bei dieser Methode gibt es jedoch ein Problem, das heißt, es gibt keine Möglichkeit, sich abzumelden. Wenn Sie sich abmelden möchten, müssen Sie den Namen der Abmeldung angeben. Lassen Sie uns also eine andere Version finden:

Code kopieren Der Code lautet wie folgt:

//Weisen Sie das Abonnement einer Variablen zum Abbestellen zu
var testSubscription = pubsub.subscribe('example1', function (topics, data) {
console.log(topics ": " data);
});

//Benachrichtigung veröffentlichen
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

//Abmelden
setTimeout(function () {
pubsub.unsubscribe(testSubscription);
}, 0);

//Erneut veröffentlichen, um zu überprüfen, ob die Informationen noch ausgegeben werden können
pubsub.publish('example1', 'Hallo nochmal! (das wird fehlschlagen)');

Version 2

Wir können auch die Eigenschaften von Prototypen verwenden, um ein Beobachtermuster zu implementieren. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion Observer() {
This.fns = [];
}
Observer.prototype = {
Abonnieren: Funktion (fn) {
This.fns.push(fn);
},
Abmelden: Funktion (fn) {
This.fns = this.fns.filter(
                               Funktion (el) {
If (el !== fn) {
                                                                                                                                                                                                                                                          }                                                                                                        } );
},
Update: Funktion (o, thisObj) {
        var Scope = thisObj || This.fns.forEach(
                               Funktion (el) {
                           el.call(scope, o);
                                                                                                       } );
}
};

//Test
var o = neuer Beobachter;
var f1 = Funktion (Daten) {
console.log('Robbin: ' data ', schnell an die Arbeit!');
};

var f2 = Funktion (Daten) {
console.log('Randall: ' data ', bitte ihn, sein Gehalt zu erhöhen!');
};

o.subscribe(f1);
o.subscribe(f2);

o.update("Tom ist zurück!")

//Abbestellen f1
o.unsubscribe(f1);
//Erneut überprüfen
o.update("Tom ist zurück!");

Wenn Sie die Meldung erhalten, dass der Filter oder die forEach-Funktion nicht gefunden werden kann, liegt dies möglicherweise daran, dass Ihr Browser nicht neu genug ist und die neuen Standardfunktionen derzeit nicht unterstützt. Sie können ihn mit der folgenden Methode selbst definieren:

Code kopieren Der Code lautet wie folgt:

if (!Array.prototype.forEach) {
Array.prototype.forEach = function (fn, thisObj) {
        var Scope = thisObj || für (var i = 0, j = this.length; i                    fn.call(scope, this[i], i, this);
}
};
}
if (!Array.prototype.filter) {
Array.prototype.filter = function (fn, thisObj) {
        var Scope = thisObj ||       var a = [];
für (var i = 0, j = this.length; i If (!fn.call(scope, this[i], i, this)) {
                         weiter;
            }
            a.push(this[i]);
}
         return a;
};
}

Version 3

Wenn wir möchten, dass mehrere Objekte die Beobachterfunktion zum Veröffentlichen und Abonnieren haben, können wir eine allgemeine Funktion definieren und dann die Funktion dieser Funktion auf die Objekte anwenden, die die Beobachterfunktion benötigen. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

//Allgemeiner Code

var Observer = {
//Abonnieren
AddSubscriber: Funktion (Rückruf) {
This.subscribers[this.subscribers.length] = Rückruf;
},
//Abmelden
​ RemoveSubscriber: Funktion (Rückruf) {
for (var i = 0; i If (this.subscribers[i] === Rückruf) {
                    delete (this.subscribers[i]);
            }
}
},
//Veröffentlichen
veröffentlichen: Funktion (was) {
for (var i = 0; i If (typeof this.subscribers[i] === 'function') {
This.subscribers[i](what);
            }
}
},
// Objekt so gestalten, dass es eine Beobachterfunktion hat
Machen Sie: Funktion (o) {
for (var i in this) {
            o[i] = this[i];
               o.subscribers = [];
}
}
};

Abonnieren Sie dann zwei Objekte, Blogger und Benutzer, und verwenden Sie die Observer.make-Methode, damit diese beiden Objekte Beobachterfunktionen haben. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

var blogger = {
Empfohlen: Funktion (id) {
        var msg = 'Beiträge empfohlen von dudu:' id;
This.publish(msg);
}
};

var user = {
Abstimmung: Funktion (id) {
        var msg = 'Jemand hat abgestimmt! ID=' id;
This.publish(msg);
}
};

Observer.make(blogger);
Observer.make(user);

Die Verwendungsmethode ist relativ einfach. Abonnieren Sie verschiedene Rückruffunktionen, sodass Sie sich bei verschiedenen Beobachterobjekten registrieren können (Sie können sich auch bei mehreren Beobachterobjekten gleichzeitig registrieren):

Code kopieren Der Code lautet wie folgt:

var tom = {
Lesen Sie: Funktion (was) {
console.log('Tom hat die folgende Meldung gesehen: ' what)
}
};

var mm = {
show: Funktion (was) {
console.log('mm sah die folgenden Informationen: ' was)
}
};
// Abonnieren
blogger.addSubscriber(tom.read);
blogger.addSubscriber(mm.show);
blogger.recommend(123); //Aufruf zur Veröffentlichung

//Abmelden
blogger.removeSubscriber(mm.show);
blogger.recommend(456); //Aufruf zur Veröffentlichung

//Abonnement eines anderen Objekts
user.addSubscriber(mm.show);
user.vote(789); //Aufruf veröffentlichen

jQuery-Version

Gemäß der neuen Ein-/Aus-Funktion von jQuery Version 1.7 können wir auch die jQuery-Version von Beobachtern definieren:

Code kopieren Der Code lautet wie folgt:

(Funktion ($) {

var o = $({});

$.subscribe = function () {
o.on.apply(o, Argumente);
};

$.unsubscribe = function () {
o.off.apply(o, Argumente);
};

$.publish = function () {
o.trigger.apply(o, Argumente);
};

} (jQuery));

Die Aufrufmethode ist einfacher als die oben genannten drei Versionen:

Code kopieren Der Code lautet wie folgt:

//Rückruffunktion
Funktionshandle(e, a, b, c) {
// „e“ ist ein Ereignisobjekt, kein Grund zur Beachtung
console.log(a b c);
};

//Abonnieren
$.subscribe("/some/topic", handle);
//Veröffentlichen
$.publish("/some/topic", ["a", "b", "c"]); // Ausgabe abc
                             

$.unsubscribe("/some/topic", handle); // Abmelden

//Abonnieren
$.subscribe("/some/topic", Funktion (e, a, b, c) {
console.log(a b c);
});

$.publish("/some/topic", ["a", "b", "c"]); // Ausgabe abc

//Unsubscribe (unsubscribe verwendet den /some/topic-Namen anstelle der Rückruffunktion, was sich vom Beispiel in Version 1 unterscheidet
$.unsubscribe("/some/topic");

Wie Sie sehen können, verwenden seine An- und Abmeldungen Zeichenfolgennamen anstelle von Callback-Funktionsnamen, sodass wir uns auch dann abmelden können, wenn eine anonyme Funktion übergeben wird.

Zusammenfassung

Der Anwendungsfall von Beobachtern ist: Wenn Änderungen an einem Objekt gleichzeitig Änderungen an anderen Objekten erfordern und nicht weiß, wie viele Objekte geändert werden müssen, sollten Sie die Verwendung des Beobachtermusters in Betracht ziehen.

Im Allgemeinen entkoppelt das Beobachtermuster, sodass sich beide Parteien der Kopplung eher auf Abstraktion als auf Konkretheit verlassen. Damit Änderungen auf der einen Seite keine Auswirkungen auf die Änderungen auf der anderen Seite haben.