


Erlernen Sie JavaScript-Designmuster-Observer-Pattern_Javascript-Fähigkeiten
1. Definition
Beobachtermuster (Publish-Subscribe-Muster): Es definiert eine Eins-zu-Viele-Abhängigkeitsbeziehung zwischen Objekten. Wenn sich der Status eines Objekts ändert, werden alle davon abhängigen Objekte benachrichtigt.
In JavaScript wird das Ereignismodell im Allgemeinen verwendet, um das traditionelle Beobachtermuster zu ersetzen.
Vorteile:
- (1) kann in der asynchronen Programmierung häufig verwendet werden und ist eine Alternative zur Übergabe von Rückruffunktionen.
- (2) kann den fest codierten Benachrichtigungsmechanismus zwischen Objekten ersetzen. Ein Objekt muss nicht mehr explizit eine Schnittstelle eines anderen Objekts aufrufen. Die beiden Objekte lassen sich leicht entkoppeln.
2. DOM-Ereignisse – typisches Beispiel für den Beobachtermodus
Wir müssen die Klickaktion des Benutzers auf document.body überwachen, können jedoch nicht vorhersagen, wann der Benutzer klicken wird.
Daher abonnieren wir das Klickereignis auf document.body. Wenn auf den Body-Knoten geklickt wird, veröffentlicht der Body-Knoten diese Nachricht an die Abonnenten!
document.body.addEventListener("click", function() { console.log(1); }, false); // 可以多个订阅者 document.body.addEventListener("click", function() { console.log(2); }, false); doucment.body.click();
Eine bestimmte Website verfügt über Header-, Navigations-, Nachrichtenlisten- und andere Module. Für die Darstellung dieser Module müssen Benutzeranmeldeinformationen eingeholt werden.
(1) Allgemeines Schreiben:
$.ajax({ url: './login', type: 'post', contentType: 'application/json', dataType:'json', success: function(data) { if(data.status === "success") { // 登录成功,渲染header、nav header.setInfo(data.headerInfo); nav.setInfo(data.navInfo); } } });
(2) Mit dem Beobachtermuster ist die Entkopplung einfach!
$.ajax({ ..., success: function(data) { if(data.status === "success") { // 登录成功,发布登陆成功消息 login.trigger("loginsuccess", data); } } }); var header = (function() { // 监听消息 login.listen("loginsuccess", function(data){ header.setInfo(data.headerInfo); }); return { setInfo: function(data) { console.log("设置header信息"); } }; })(); var nav = (function() { login.listen("loginsuccess", function(data){ nav.setInfo(data.navInfo); }); return { setInfo: function(data) { console.log("设置nav信息"); } } })();
3. Universeller Beobachtermodus
/* * 示例: * Event.create("namespace1").listen('click', function(a){ * console.log(a); * }); * Event.create("namespace1").trigger("click", 1); */ var Event = (function() { var global = this, Event, _default = 'default'; Event = function() { var _listen, _trigger, _remove, _slice = Array.prototype.slice, _shift = Array.prototype.shift, _unshift = Array.prototype.unshift, namespaceCache = [], _create, find, each = function( ary, fn) { var ret; for(var i = 0, l = ary.length; i < l; i++) { var n = ary[i]; ret = fn.call(n, i, n); } return ret; }; // 订阅 _listen = function(key, fn, cache) { if(!cache[key]) { cache[key] = []; } cache[key].push(fn); }; // 移除订阅 _remove = function(key, cache, fn) { if(cache[key]) { if(fn) { for(var i = cache[key].length; i >=0; i++) { if(cache[key][i] === fn) { cache[key].splice(i, 1); } } }else { cache[key] = []; } } }; // 发布 _trigger = function() { var cache = _shift.call(arguments), key = _shift.call(arguments), args = arguments, _self = this, ret, stack = cache[key]; if(!stack || !stack.length) { return; } return each(stack, function() { return this.apply(_self, args); }); }; // 创建命名空间 _create = function(namespace) { var namespace = namespace || _default; var cache = {}, offlineStack = [], // 离线事件 ret = { listen: function (key, fn, last) { _listen(key, fn, cache); if (offlineStack == null) { return; } if (last === 'last') { offlineStack.length && offlineStack.pop()(); } else { each(offlineStack, function () { this(); }); } offlineStack = null; }, one: function (key, fn, last) { _remove(key, cache); this.listen(key, fn, last); }, remove: function(key, fn, last) { _remove(key, cache, fn); }, trigger: function() { var fn, args, _self = this; _unshift.call(arguments, cache); args = arguments; fn = function() { return _trigger.apply(_self, args); }; if(offlineStack) { return offlineStack.push(fn); } return fn; } }; return namespace ? (namespaceCache[namespace] ? namespaceCache[namespace] : namespaceCache[namespace] = ret) : ret; }; return { create: _create, one: function(key, fn, last) { var event = this.create(); event.one(key, fn, last); }, remove: function(key, fn) { var event = this.create(); event.remove(key, fn); }, listen: function(key, fn, last) { var event = this.create(); event.listen(key, fn, last); }, trigger: function() { var event = this.create(); event.trigger.apply(this, arguments); } }; }(); return Event; })();
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Im Java-Framework besteht der Unterschied zwischen Entwurfsmustern und Architekturmustern darin, dass Entwurfsmuster abstrakte Lösungen für häufige Probleme beim Softwaredesign definieren und sich dabei auf die Interaktion zwischen Klassen und Objekten konzentrieren, beispielsweise Fabrikmuster. Architekturmuster definieren die Beziehung zwischen Systemstrukturen und Modulen und konzentrieren sich auf die Organisation und Interaktion von Systemkomponenten, wie z. B. eine geschichtete Architektur.

Das Dekoratormuster ist ein strukturelles Entwurfsmuster, das das dynamische Hinzufügen von Objektfunktionen ermöglicht, ohne die ursprüngliche Klasse zu ändern. Es wird durch die Zusammenarbeit von abstrakten Komponenten, konkreten Komponenten, abstrakten Dekoratoren und konkreten Dekoratoren implementiert und kann Klassenfunktionen flexibel erweitern, um sich ändernden Anforderungen gerecht zu werden. In diesem Beispiel werden Milch- und Mokka-Dekoratoren zu Espresso für einen Gesamtpreis von 2,29 $ hinzugefügt, was die Leistungsfähigkeit des Dekoratormusters bei der dynamischen Änderung des Verhaltens von Objekten demonstriert.

1. Factory-Muster: Trennen Sie Objekterstellung und Geschäftslogik und erstellen Sie Objekte bestimmter Typen über Factory-Klassen. 2. Beobachtermuster: Ermöglicht Subjektobjekten, Beobachterobjekte über ihre Zustandsänderungen zu benachrichtigen, wodurch eine lose Kopplung und ein Beobachtermuster erreicht werden.

Das Adaptermuster ist ein strukturelles Entwurfsmuster, das die Zusammenarbeit inkompatibler Objekte ermöglicht. Es wandelt eine Schnittstelle in eine andere um, sodass die Objekte reibungslos interagieren können. Der Objektadapter implementiert das Adaptermuster, indem er ein Adapterobjekt erstellt, das das angepasste Objekt enthält, und die Zielschnittstelle implementiert. In einem praktischen Fall kann der Client (z. B. MediaPlayer) über den Adaptermodus Medien im erweiterten Format (z. B. VLC) abspielen, obwohl er selbst nur normale Medienformate (z. B. MP3) unterstützt.

Entwurfsmuster lösen Herausforderungen bei der Codewartung, indem sie wiederverwendbare und erweiterbare Lösungen bereitstellen: Beobachtermuster: Ermöglicht Objekten, Ereignisse zu abonnieren und Benachrichtigungen zu erhalten, wenn sie auftreten. Factory-Muster: Bietet eine zentralisierte Möglichkeit, Objekte zu erstellen, ohne auf konkrete Klassen angewiesen zu sein. Singleton-Muster: stellt sicher, dass eine Klasse nur eine Instanz hat, die zum Erstellen global zugänglicher Objekte verwendet wird.

TDD wird verwendet, um hochwertigen PHP-Code zu schreiben. Die Schritte umfassen: Testfälle schreiben, die erwartete Funktionalität beschreiben und sie zum Scheitern bringen. Schreiben Sie Code so, dass nur die Testfälle ohne übermäßige Optimierung oder detailliertes Design erfolgreich sind. Nachdem die Testfälle bestanden wurden, optimieren und überarbeiten Sie den Code, um die Lesbarkeit, Wartbarkeit und Skalierbarkeit zu verbessern.

Das Guice-Framework wendet eine Reihe von Entwurfsmustern an, darunter: Singleton-Muster: Durch die @Singleton-Annotation wird sichergestellt, dass eine Klasse nur eine Instanz hat. Factory-Methodenmuster: Erstellen Sie eine Factory-Methode über die Annotation @Provides und rufen Sie die Objektinstanz während der Abhängigkeitsinjektion ab. Strategiemodus: Kapseln Sie den Algorithmus in verschiedene Strategieklassen und geben Sie die spezifische Strategie über die Annotation @Named an.

Zu den Vorteilen der Verwendung von Entwurfsmustern in Java-Frameworks gehören: verbesserte Lesbarkeit, Wartbarkeit und Skalierbarkeit des Codes. Zu den Nachteilen gehören Komplexität, Leistungsaufwand und eine steile Lernkurve aufgrund übermäßiger Nutzung. Praktischer Fall: Der Proxy-Modus wird zum verzögerten Laden von Objekten verwendet. Setzen Sie Entwurfsmuster mit Bedacht ein, um ihre Vorteile zu nutzen und ihre Nachteile zu minimieren.
