Konzept
Der Aussehensmodus (Fassademodus) ist ein relativ einfacher und allgegenwärtiger Modus. Der Aussehensmodus bietet eine Schnittstelle auf hoher Ebene, die es einfacher macht, Clients oder Subsysteme anzurufen.
Der Aussehensmodus ist kein Adaptermodus, ein Adaptermodus ist ein Wrapper, der die Schnittstelle anpassen kann, um sie in einem inkompatiblen System zu verwenden. Das Erstellen von Aussehenselementen ist eine Bequemlichkeit. Es wird nicht verwendet, um mit Kundensystemen umzugehen, die bestimmte Schnittstellen erfordern, sondern eine vereinfachte Schnittstelle bereitstellen.
Beispiele für JavaScript -Code
Verwenden Sie einen einfachen Code, um ihn auszudrücken
var getName = function () {return '' svenzeng "} var getSex = function () {return 'Man'}Wenn Sie die Funktionen GetName bzw. GetSex anrufen müssen, können Sie eine höhere Schnittstelle GetUserInfo verwenden, um es aufzurufen.
var getUserInfo = function () {var info = a () + b (); Rückgabe info;}Vielleicht werden Sie fragen, warum Sie zum Beispiel den Code GetName und GetSex zu Beginn nicht gemeinsam geschrieben haben
var getNameAnDSEX = function () {return 'svenzeng " +" Man ";}Die Antwort ist offensichtlich. Die Kochköche der Kantine werden diese beiden Gerichte im selben Topf nicht rühren, nur weil Sie eine Braten Ente und einen Kohl gebucht haben. Er würde Ihnen lieber eine festgelegte Mahlzeit mit Braten -Entenreis zur Verfügung stellen. Auch bei der Programmierung müssen wir sicherstellen, dass die Funktionen oder Objekte so weit wie möglich in einer angemessenen Granularität sind. Schließlich isst nicht jeder gerne Braten Ente und isst auch gerne Kohl.
Ein weiterer Vorteil des Erscheinungsmodus besteht darin, dass die realen Implementierungsdetails von Benutzern ausblenden können und Benutzer nur die Schnittstelle auf höchster Ebene haben. Zum Beispiel ist es Ihnen egal, ob der Meister die Grüße des Braten Enten-Reis-Reis-Set-Mahls zuerst oder den Kohl mit dem Braten zuerst macht, und es ist Ihnen egal, wo die Ente aufgewachsen ist.
Schließlich schrieb ich ein Beispiel für das Erscheinungsmuster, das wir alle verwendet haben
var stopEvent = function (e) {// Ereignis Standardverhalten und blasen gleichzeitig E.StopPropagation (); E.PreventDefault ();}Ich weiß, dass das Konzept der Aussehensmuster leicht zu beherrschen ist, und Sie benötigen möglicherweise nicht unbedingt ein Beispiel für JavaScript -Code, aber einige Leute kümmern sich immer mehr um den Code und denken, dass es einfacher zu verstehen ist. Darüber hinaus überzeugen JavaScript -Artikel ohne Code -Muster überhaupt nicht, daher sollten sie aus dem Internet gelöscht werden. Beginnen wir mit einem einfachen Beispiel eines Ereignishörers. Jeder weiß, dass das Hinzufügen eines Event -Listeners nicht einfach ist, es sei denn, Sie möchten nur, dass der Code auf einigen Browsern ausgeführt wird. Sie müssen viele Möglichkeiten testen, um sicherzustellen, dass der Code für verschiedene Browser ordnungsgemäß funktioniert. In diesem Code -Beispiel fügen wir dieser Methode nur die Funktionserkennung hinzu:
Funktion addEvent (Element, Typ, func) {if (window.adDeVentListener) {element.adDeVentListener (Typ, func, false); } else if (window.attachEvent) {element.attachEvent ('on'+type, func); } else {element ['on'+type] = func; }}Es ist einfach! Ich wünschte wirklich, ich könnte keine unnötigen Codes schreiben und sie einfacher machen, desto besser, aber wenn das der Fall ist, wäre es bedeutungslos und Sie würden es nicht lesen wollen, oder? Ich glaube nicht, ich denke, ich möchte Ihnen etwas komplizierteres zeigen. Ich möchte nur sagen, dass Ihr Code ungefähr so aussehen würde:
var foo = document.getElementById ('foo'); foo.style.color = 'rot'; foo.style.width = '150px'; var bar = document.getElementById ('bar'); bar.style.color = 'rot'; bar.style.width = '150px'; var baz = document.getElementById ('baz'); baz.style.color = 'rot'; baz.style.width = '150px'; var baz = document.getElementById ('baz'); baz.style.color = 'rot'; baz.style.width = '150px';Zu lahm! Du hast genau das Gleiche für jedes Element gemacht! Ich denke, wir können es ein bisschen einfacher machen:
Funktionsetstyle (Elemente, Eigenschaft, Wert) {für (var i = 0, length = elements.length; i <length; i ++) {document.getElementById (Elemente [i]). Stil [Eigenschaft] = Wert; }} // Jetzt können Sie so schreiben: setStyle (['foo', 'baz', 'baz'], 'color', 'rot'); setStyle (['foo', 'bar', 'baz'], 'width', '150px');Glaubst du, unsere NB ist kaputt? Du vergisst es! Wir sind JavaScript -Programmierer! Können Sie ein paar Gehirne verwenden, um echte Dinge zu bekommen? Vielleicht können wir alle Stile nur einmal einstellen. Schauen Sie sich das an:
Funktionsetstile (Elemente, Styles) {für (var i = 0, Länge = Elemente.Length; i <Länge; i ++) {var element = document.getElementById (Elemente [i]); für (var Eigenschaft in Stilen) {Element.Style [Eigenschaft] = Styles [Eigenschaft]; }}} // Jetzt müssen Sie nur so schreiben: setStyles (['foo', 'baz', 'baz'], {color: 'rot', width: '150px'});Wenn wir viele Elemente haben, die den gleichen Stil festlegen möchten, spart dieser Code uns wirklich viel Zeit.
Vorteile des Aussehensmodus:
Der Zweck der Verwendung des Aussehensmodus besteht darin, den Programmierern das Schreiben von Combo -Code zu erleichtern und dann wiederholt zu verwenden, wodurch Zeit und Mühe sparen. Stellen Sie eine vereinfachte Schnittstelle für einige komplexe Probleme bereit.
Die Erscheinungsmethode ist für Entwickler geeignet. Bin hat relativ hohe Funktionen bereitgestellt, die die Abhängigkeit von externem Code verringert und der Entwicklung von Anwendungssystemen zusätzliche Flexibilität hinzufügt. Durch die Verwendung des Aussehensmodus kann eine enge Kopplung an das zugrunde liegende Subsystem vermieden werden. Auf diese Weise kann das System geändert werden, ohne den Clientcode zu beeinflussen.
Nachteile des Aussehensmodus:
Manchmal können die Erscheinungselemente auch eine unnötige zusätzliche Belastung bringen. Bevor Sie einige Routinen implementieren, sollten Sie ihre Praktikabilität sorgfältig berücksichtigen. Manchmal im Vergleich zu einer komplexen Erscheinungsfunktion ist seine Zusammensetzungsfunktion in Bezug auf Kraft attraktiver. Dies liegt daran, dass Erscheinungsfunktionen häufig Aufgaben ausführen können, die Sie nicht benötigen.
Für eine einfache persönliche Website oder eine kleine Anzahl von Marketingseiten ist es möglicherweise nicht ratsam, diese JavaScript-Bibliothek für ein wenig verbessertes Verhalten wie Tooltips und Pop-ups zu importieren. Verwenden Sie zu diesem Zeitpunkt nur wenige einfache Aussehenselemente anstelle einer Bibliothek voller dieser Dinge.
Erscheinungsfunktionen bieten eine einfache Schnittstelle für die Ausführung verschiedener komplexer Aufgaben, die den Code erleichtert, um zu warten und zu verstehen. Sie können auch die Kopplung zwischen Subsystemen und Clientcode schwächen. Kombinieren Sie gemeinsame Funktionen, die oft zusammen erscheinen. Dieser Modus wird bei DOM -Skripting sehr häufig verwendet, was inkonsistente Browser -Schnittstellen erfordert.