Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung der Anwendungsfälle für JS-Fassadenmuster

Ausführliche Erläuterung der Anwendungsfälle für JS-Fassadenmuster

php中世界最好的语言
Freigeben: 2018-06-04 10:48:55
Original
1433 Leute haben es durchsucht

Dieses Mal werde ich Ihnen den Anwendungsfall des JS-Fassadenmodus ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung des JS-Fassadenmodus?

Fassadenmuster ist ein beliebtes Designmuster, das eine neue Schnittstelle für ein vorhandenes Objekt erstellt. Die Fassade ist ein brandneues Objekt, hinter dem ein bestehendes Objekt arbeitet. Fassaden werden manchmal auch Wrapper genannt. Sie nutzen unterschiedliche Schnittstellen, um vorhandene Objekte zu umhüllen. Wenn die Vererbung für Ihren Anwendungsfall nicht ausreicht, ist es logisch, dass der nächste Schritt die Erstellung einer Fassade sein sollte.

jQuery und YUI verwenden beide Fassaden für ihre DOM-Schnittstellen. Wie oben erwähnt, können Sie nicht von einem DOM-Objekt erben. Daher besteht die einzige Möglichkeit, ihm sicher Funktionalität hinzuzufügen, darin, eine Fassade zu erstellen. Hier ist ein Beispiel für einen DOM-Objekt-Wrapper-Code:

function DOMWrapper (element) {  this.element = element;
}
DOMWrapper.prototype.addClass = function (className) {  this.element.className += ' ' + className;
}
DOMWrapper.prototype.remove = function () {  this.element.parentNode.removeChild(this.element);
}// 用法var wrapper = new DOMWrapper(
document
.getElementById('my-div'));
wrapper.addClass('selected');
wrapper.remove();
Nach dem Login kopieren

Der Typ DOMWrapper erwartet, dass ein DOM-Element an seinen Konstruktor übergeben wird. Das Element wird zur späteren Referenz gespeichert und definiert einige Methoden zur Bearbeitung des Elements. Die Methode addClass() ist eine einfache Möglichkeit, className zu Elementen hinzuzufügen, die das HTML5-Attribut classList noch nicht implementiert haben. Die Methode „remove()“ kapselt den Vorgang des Löschens eines Elements aus dem DOM und erspart Entwicklern so die Notwendigkeit, auf den übergeordneten Knoten des Elements zuzugreifen. Im Hinblick auf die Wartbarkeit von JS sind Fassaden eine sehr geeignete Methode. Sie können diese Schnittstellen vollständig steuern. Sie können den Zugriff auf die Eigenschaften oder Methoden jedes zugrunde liegenden Objekts zulassen und umgekehrt, wodurch der Zugriff auf dieses Objekt effektiv gefiltert wird. Sie können auch vorhandene Methoden ändern, um sie einfacher und benutzerfreundlicher zu machen (der obige Beispielcode ist ein Beispiel). Unabhängig davon, wie sich die zugrunde liegenden Objekte ändern, kann die Anwendung weiterhin normal funktionieren, solange die Fassade geändert wird.

Eine Fassade, die eine bestimmte Schnittstelle implementiert, um ein Objekt wie ein anderes Objekt aussehen zu lassen, wird als Adapter bezeichnet. Der einzige Unterschied zwischen Fassaden und Adaptern besteht darin, dass erstere neue Schnittstellen erstellt, während letztere vorhandene Schnittstellen implementiert.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So vermeiden Sie Nullvergleiche in der Webentwicklung


So erkennen Sie Originalwerte im Web Entwicklung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsfälle für JS-Fassadenmuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage