Detaillierte Erklärung der Entwurfsmuster des JavaScript-Frameworks

mvc

Model（模型） – Ein Modell stellt ein Objekt oder JAVA-POJO dar, das Daten speichert und abruft. Es kann auch eine Logik zum Aktualisieren des Controllers enthalten, wenn sich die Daten ändern.

View（視圖） – Eine Ansicht stellt die Visualisierung der in einem Modell enthaltenen Daten dar.

Controller（控制器） – Der Controller wirkt auf das Modell und die Ansicht. Es steuert den Datenfluss zu den Modellobjekten und aktualisiert die Ansicht, wenn sich die Daten ändern. Es trennt die Ansicht vom Modell.

Es ist eine Einbahnstraße

MVP

Der Kern von MVP liegt in der Presenter-Ebene. Der Kern dieser Ebene ist die Bedienung von DOM-Elementen. Am Beispiel der Implementierung einer Listenseite mit jQuery kombiniert der Presenter hauptsächlich die Daten im Modell über eine Schleife mit den HTML-Tags und fügt sie der Ansicht hinzu.

mvv

Der Kern von MVVM liegt in der Modellschicht, deren Kern die Datenoperation ist. Im Vergleich zum MVP-Modus hat sich unser Codierungsfokus von der DOM-Operation auf die Datenoperation verlagert. Die VM-Ebene zeigt der Ansichtsebene Daten an und übergibt die Daten der Ansichtsebene an die Modellebene. Vue ist ein typisches Beispiel für viewModel

Die Quelle von Vue

Vue nutzt die Virtual-Dom-Technologie von React und die ng-directive-Technologie von Angular.

Spa-MPA

MPA: mehrseitiger Antrag

Funktionen: Das erste Laden ist schneller und das nachfolgende Laden ist langsamer. Die anfänglichen Entwicklungskosten sind gering, die späteren Wartungskosten sind jedoch hoch.

SPA: Einzelseitenanwendung

Die erste Ladung ist langsamer und die nachfolgenden Ladungen sind schneller. Die anfänglichen Entwicklungskosten sind hoch, die späteren Wartungskosten jedoch niedrig. (Hauptsächlich mehr wiederverwendet)

Element erstellen

var li = document.createElement(ele,src,content);
//ele Das zu erstellende Element //src Die Attribute des Elements //content Der Inhalt des Elementsvar li = document.createElement('li',{className='list-li'},'123');
<li Klassenname="Liste-li">123<li>

Klasse

Klasse Person {
   Konstruktor(x,y) {
      dies.x = x;
   }
   hinzufügen() {
      konsole.log(dies.x);
   }
}
var person = neue Person(1,2);
typeof Person // function Die Essenz der Klasse ist ein Konstruktor Person === Person.prototype.constructor //true Die Klasse zeigt auf den Prototyp des Konstruktors person.hasOwnProperty(x); //true
person.hasOwnProperty(y); //false
person.hasOwnProperty(add); // falsch
Dies im Konstruktor zeigt auf das instanziierte Objekt, also ist x eine Eigenschaft von Person und y und add sind gleichbedeutend mit dem Hinzufügen zu Person.prototype person.__proto__.hasOwnProperty(add) //true

Die Funktion in der Klasse entspricht dem Hinzufügen zum Prototyp des Konstruktors.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!