Heim > Web-Frontend > js-Tutorial > Einführung in Darstellungsmuster von JavaScript-Entwurfsmustern_Javascript-Fähigkeiten

Einführung in Darstellungsmuster von JavaScript-Entwurfsmustern_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:24:09
Original
1165 Leute haben es durchsucht

Beschreibung des Darstellungsmodus

Erklärung: Der Darstellungsmodus ist aufgrund der komplexen Zusammensetzung von Subsystemen oder Programmen einfacher auf das zugrunde liegende Programm oder die Systemschnittstelle zuzugreifen

Der Darstellungsmodus ist ein Modus, auf den wir häufig stoßen. Die von uns häufig verwendeten Funktionen erfordern möglicherweise mehrere Unterschnittstellen oder Untersysteme, und eine unserer Funktionen benötigt möglicherweise nur eine oder mehrere Unterschnittstellen sequentielle Pakete. Wenn die Geschäftsfunktion direkt einer Unterschnittstelle oder einem Untersystem entspricht, muss der Entwickler möglicherweise über ein gutes Verständnis der Interna verfügen. Möglicherweise muss er verstehen, wie der Geschäftsprozess abläuft, in welcher Reihenfolge er abläuft usw. Dies erfordert, dass Entwickler das Geschäft verstehen, und macht die Client-Programmierung ziemlich kompliziert

Wenn es hier eine Ebene oder eine Klasse gibt, die speziell die Methoden kapselt, die wir verwenden möchten, muss die Clientfunktion nur mit dieser Mittelschichtklasse interagieren. Die entsprechenden Methoden der Mittelschichtklasse werden von relevanten Entwicklern organisiert, die dies verstehen Durch die Kapselung wird das Programm sehr einfach. Der Programmierer muss nur wissen, welche Methode für diese Funktion erforderlich ist, und muss nicht die interne Logik kennen.

Diese mittlere Schichtklasse nennen wir die Erscheinungsklasse. Dies ist die Idee des Erscheinungsmodus.

Szenariobeispiel:

1>. Nehmen Sie das Beispiel eines Hauptschalters, der ein Licht an der Tür Ihres Hauses, mehrere Lichter im Flur und die Stromversorgung Ihres Fernsehers, Kühlschranks usw. steuern kann. Welcher kleine Knopf Drücken Sie „EIN“, und alles wird mit Strom versorgt oder gibt sogar direkt Licht und Wärme ab. Sie müssen nicht wissen, wie der Knopf am Hauptschalter herauskommt, um Strom zu erzeugen, oder wie man ihn drückt Wie auch immer, drücken Sie einfach darauf und der Strom wird eingeschaltet.

Diese Lichter, Fernseher usw. sind die Schnittstellen und kleinen Systeme, die wir verwenden möchten; dieser Hauptschalter ist unsere Erscheinungsklasse, wir können ihn direkt bedienen, indem wir ihm gegenüberstehen.

2>. Es ist wie in einem Unternehmen mit mehreren funktionalen Abteilungen. Wenn der Chef den Ausführungsstatus verschiedener Aspekte der Arbeit benötigt, wird er die Mitarbeiter fragen, wie diese bestimmte Sache läuft Wenn Sie die richtige Person haben, können Sie dem Chef eine direkte Antwort geben. Wenn diese Person nicht verantwortlich ist, wird sie dem Chef sagen, wer dafür verantwortlich ist, und der Chef muss diese Person fragen, wie problematisch das ist .

Wenn jede Funktionsabteilung einen Verantwortlichen hat, kann sich der Chef direkt an ihn wenden, um die Situation zu verstehen. Dem Chef ist es egal, woher der Verantwortliche das weiß. Er muss nur diese 1 wissen. 2 oder 3 Dinge. Verfolgen Sie einfach die Situation und den Fortschritt der Angelegenheit.

Beispiel-Quellcode

Implementieren Sie nun den Quellcode gemäß dem Szenario der zweiten Instanz:

1. Mehrere Abteilungsfunktionen:

Abteilung 1 (Geschäftsabteilung):


Code kopieren Der Code lautet wie folgt:
Funktion BusinessDept() {
this.manager = 'Manager Chen'; //Verantwortliche Person
}
BusinessDept.prototype = {
MonthSales: function() {
console.log(this.manager 'Said: Der Umsatz in diesem Monat beträgt xxx');
},
NextPlan: function() {
console.log(this.manager 'Said: Der nächste Plan sieht so aus, xxxx');
}
}

Abteilung 2 (F&E-Abteilung):

Code kopieren Der Code lautet wie folgt:
Funktion RDdept() {
this.manager = 'Manager Huang';
}
RDdept.prototype = {
Fortschritt: function() {
console.log(this.manager 'Sagte: Die aktuelle Projektsituation und der aktuelle Fortschritt sind wie folgt: xxx');
},
deptPlan: function() {
console.log(this.manager 'Said: Der nächste Abteilungsplan sieht so aus xxx');
}
}

Die oben genannten Fragen sollten die Leiter jeder Abteilung dem Chef beantworten;

Als nächstes erstellen Sie einen Auftrittskurs, um die Fragen zu organisieren, die der Chef stellen möchte


Funktion Facade() {
this.business = new BusinessDept() ;
this.rddept = new RDdept();
}
Facade.prototype = {
DeptSituation: function() {
This.business.MonthSales(); //Der Vertriebsleiter wird zuerst sprechen;
This.rddept.progress();
},
deptPlan: function() {
This.business.NextPlan(); //Nächsten Plan melden;
This.rddept.deptPlan();
}
}

Dann rief der Chef die beiden Manager vor ihm an und begann zu befragen:

Code kopieren Der Code lautet wie folgt:

var Fassade = neue Fassade();
console.log('Der Chef fragte: Stellen Sie jetzt die Situation Ihrer Abteilung vor?');
Fassade.DeptSituation();
console.log('Der Chef fragte: Was sind die nächsten Pläne?');
Fassade.deptPlan();

Weitere Anweisungen

Durch die Verwendung des Darstellungsmodus können Schnittstellen oder Klassen entkoppelt werden, sodass keine Abhängigkeit zwischen Klassen erforderlich ist. Wenn dies nicht erforderlich ist, muss A B enthalten, oder B muss A enthalten. Dies verstößt gegen das Prinzip der geschlossenen Änderung Die Paketierung von Erscheinungsklassen auf mittlerer Ebene kann Schnittstellenaufrufe einfacher machen und Aufrufe über Unterschnittstellen oder Subsystemobjekte werden freier und organisierter.

Darstellungsmuster werden häufig in den Musterdefinitionen von Architektursystemen verwendet und fügen häufig eine Fassadenebene hinzu, um verfügbare Geschäftsschnittstellen zu organisieren

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