Wenn Sie Anweisungen in NG verwenden, ist die Linkfunktion, die die meisten verwenden, normalerweise das Link -Attribut. Der folgende Artikel zeigt Ihnen die Verwendung und Unterschiede zwischen Compli, Pre-Link und Post-Link.
Die Anweisungen in AngularJs sind sehr magisch, sodass Sie sehr semantische und sehr wiederverwendbare Komponenten erstellen können, die als Pionier von Webkomponenten verstanden werden können.
Es gibt bereits viele Artikel und verwandte Bücher im Internet, die einführen, wie Anweisungen verwendet werden. Wenn Sie sie vergleichen, führen Sie selten den Unterschied zwischen Kompilierung und Link ein, geschweige denn vor der Link und nach der Link.
Die meisten Tutorials sagen lediglich, dass Compile in NG verwendet wird, und es wird empfohlen, dass Sie nur das Link -Attribut verwenden, was in den meisten Anweisungen der Fall ist.
Dies ist sehr bedauerlich, da das korrekte Verständnis des Unterschieds zwischen diesen Funktionen Ihr Verständnis des internen Laufmechanismus von NG verbessern und Ihnen dabei helfen, bessere benutzerdefinierte Anweisungen zu entwickeln.
Folgen Sie mir also, um den folgenden Inhalt Schritt für Schritt zu sehen, um zu verstehen, was diese Funktionen sind und wann sie verwendet werden sollten
In diesem Artikel geht davon aus, dass Sie ein gewisses Verständnis der Anweisungen haben. Wenn nicht, wird dringend empfohlen, diesen Artikel AngularJS Developer Guide zu Richtlinien zu lesen
Wie man Anweisungen in NG bearbeitet
Lassen Sie uns vor Beginn der Analyse sehen, wie NG-Chinese Anweisungen behandelt.
Wenn der Browser eine Seite rendert, liest er im Wesentlichen die HTML -Identität, erstellt dann einen DOM -Knoten und sendet ein Ereignis an uns, nachdem der DOM -Baum erstellt wurde.
Wenn Sie Skript-Tags zum Laden von NG-Anwendungscode in der Seite verwenden, hört NG das oben genannte DOM-Abschluss-Ereignis und findet Elemente mit NG-App-Attributen.
Nachdem NG ein solches Element gefunden hat, beginnt es, DOM mit dem Ausgangspunkt dieses Elements zu verarbeiten. Wenn also NG-App zum HTML-Element hinzugefügt wird, beginnt NG die Verarbeitung von DOM mit dem HTML-Element.
Ausgehend von diesem Startpunkt beginnt NG, alle untergeordneten Elemente rekursiv zu durchsuchen, was den in der Anwendung definierten Anweisungsregeln entspricht.
Wie man mit den Anweisungen von NG umgeht, hängt tatsächlich von den von ihm definierten Objekteigenschaften ab. Sie können eine Kompilierung oder eine Linkfunktion definieren oder anstelle von Link Pre-Link- und Post-Link-Funktionen verwenden.
Was ist der Unterschied zwischen diesen Funktionen? Warum es benutzen? Und wann?
Folgen Sie mir mit diesen Fragen Schritt für Schritt, um diese Geheimnisse zu beantworten
Ein Stück Code
Um die Unterschiede zwischen diesen Funktionen zu erklären, werde ich unten ein einfaches und leicht verständliches Beispiel verwenden
1. Wenn Sie Fragen haben, zögern Sie bitte nicht, Ihre Kommentare unten hinzuzufügen.
Schauen Sie sich den folgenden HTML -Tag -Code an
Die Codekopie lautet wie folgt:
<velageins>
<level-two>
<level-Three>
Hallo
</Level-Drei>
</Level-zwei>
</Level-One>
Dann gibt es ein Stück JS -Code
Die Codekopie lautet wie folgt:
var app = angular.module ('Plunker', []);
Funktion createdIRective (Name) {
return function () {
zurückkehren {
einschränken: 'e',
kompilieren: Funktion (telem, tattrs) {
console.log (name + ': compile');
zurückkehren {
PRE: Funktion (Scope, Ielem, Iattrs) {
console.log (name + ': pre link');
},
Beitrag: Funktion (Scope, Ielem, Iattrs) {
console.log (name + ': post link');
}
}
}
}
}
}
App.Directive ('LevelOne', CreateDIRective ('LevelOne'));
app.directive ('LevelTWO', CreateDIRective ('LevelTwo'));
app.directive ('LevelThree', createdirective ('LevelThree'));
Das Ergebnis ist sehr einfach: Lassen Sie NG drei verschachtelte Anweisungen ausführen, und jede Anweisung hat seine eigenen Funktionen für Komplile, Vorkörper und Post-Link-Funktionen. Jede Funktion druckt eine Zeile in der Konsole, um sich selbst zu identifizieren.
In diesem Beispiel können wir den internen Prozess von NG bei der Bearbeitung von Anweisungen kurz verstehen
Codeausgabe
Unten finden Sie einen Screenshot des Ausgabeergebnisses auf der Konsole
Wenn Sie dieses Beispiel selbst ausprobieren möchten, klicken Sie bitte auf diese PLNKR und sehen Sie sich die Ergebnisse in der Konsole an.
Analysecode
Das erste, was zu beachten ist, ist die Reihenfolge der Anrufe dieser Funktionen:
Die Codekopie lautet wie folgt:
// Phase kompilieren
// LevelOne: Die Kompilierungsfunktion heißt
// LevelTWO: Die Kompilierungsfunktion heißt
// LevelThree: Die Kompilierungsfunktion heißt
// Phase vor der Link
// LevelOne: Die Vorverbindungsfunktion wird aufgerufen
// LevelTWO: Die Vorverbindungsfunktion wird aufgerufen
// LevelThree: Die Vorverbindungsfunktion wird aufgerufen
// Post-Link-Phase (Beachten Sie die umgekehrte Reihenfolge)
// LevelThree: Die Post -Link -Funktion wird aufgerufen
// LevelTWO: Post -Link -Funktion wird aufgerufen
// LevelOne: Post -Link -Funktion wird aufgerufen
Dieses Beispiel zeigt deutlich, dass NG alle Anweisungen vor dem Link zusammenstellt und dann Link in Vorverbindung und Post-Link-Stufen unterteilt ist.
Beachten Sie, dass die Ausführungsreihenfolge von Compile und Pre-Link nacheinander ausgeführt wird, aber nach der Link genau das Gegenteil ist.
Das obige hat also eindeutig unterschiedliche Stufen identifiziert, aber was ist der Unterschied zwischen Kompilierung und Vorverbindung? Sie sind beide in der gleichen Ausführungsreihenfolge. Warum müssen wir sie also in zwei verschiedene Funktionen unterteilen?
Dom
Um tiefer zu graben, ändern wir einfach den oben genannten Code, wodurch auch Elementvariablen in der Parameterliste in jeder Funktion gedruckt werden können
Die Codekopie lautet wie folgt:
var app = angular.module ('Plunker', []);
Funktion createdIRective (Name) {
return function () {
zurückkehren {
einschränken: 'e',
kompilieren: Funktion (telem, tattrs) {
console.log (name + ': compile =>' + telem.html ());
zurückkehren {
PRE: Funktion (Scope, Ielem, Iattrs) {
console.log (name + ': pre link =>' + ielem.html ());
},
Beitrag: Funktion (Scope, Ielem, Iattrs) {
console.log (name + ': post link =>' + ielem.html ());
}
}
}
}
}
}
App.Directive ('LevelOne', CreateDIRective ('LevelOne'));
app.directive ('LevelTWO', CreateDIRective ('LevelTwo'));
app.directive ('LevelThree', createdirective ('LevelThree'));
Achten Sie auf die Ausgabe in Console.log, mit Ausnahme der Ausgabe des ursprünglichen HTML -Tags gibt es im Grunde keine andere Änderung.
Dies sollte unser Verständnis des Kontextes dieser Funktionen vertiefen.
Führen Sie den Code erneut aus, um sie zu sehen
Ausgabe
Unten finden Sie einen Screenshot des Ausgabeergebnisses auf der Konsole
Wenn Sie es noch selbst ausführen möchten, um den Effekt zu sehen, können Sie auf diese PLNKR klicken und dann die Ausgabeergebnisse in der Konsole anzeigen.
beobachten
Die Ausgabe des DOM-Ergebniss kann einige interessante Dinge enthüllen: Der DOM-Inhalt unterscheidet sich in den beiden Funktionen Compile und Pre-Link
Also, was ist passiert?
Kompilieren
Wir wissen bereits, dass wir, wenn Ng feststellt, dass der DOM -Build abgeschlossen ist, die DOM verarbeitet.
Wenn NG das DOM durchquert, stößt er auf das Element der Stufe ein und erfährt aus seiner Definition, dass einige notwendige Funktionen ausgeführt werden müssen
Da die Kompilierungsfunktion im Befehlsobjekt der Befehlsstufe definiert ist, wird sie aufgerufen und ein Elementobjekt als Parameter übergeben
Wenn Sie genau hinschauen, werden Sie sehen, dass der Browser dieses Elementobjekt immer noch das originellste HTML -Tag ist.
1. In NG wird das ursprüngliche DOM normalerweise verwendet, um das Vorlagenelement zu identifizieren. Daher habe ich den Telemnamen bei der Definition der Kompilierungsfunktionsparameter verwendet, und diese Variable zeigt auf das Vorlagenelement.
Sobald die Kompilierungsfunktion im LevelOne-Befehl ausgeführt wird, durchquert NG seine Dom-Knoten in der Tiefe rekursiv und wiederholt diese Operationen auf Level-Two und Level-Three.
Post-Link
Bevor wir uns in die Vorverbindung einteilen, werfen wir einen Blick auf die Post-Link-Funktion.
2. Wenn Sie beim Definieren der Anweisung nur eine Linkfunktion verwenden, behandelt NG diese Funktion als Post-Link, sodass wir diese Funktion zuerst diskutieren müssen.
Nachdem NG alle DOMs durchquert und alle Kompilierfunktionen ausgeführt hat, wird die zugehörige Nachverbindungsfunktion umgekehrt aufgerufen.
Das DOM beginnt jetzt umzukehren und führt die Post-Link-Funktion aus. Daher schien dieser Reverse Call vorher etwas seltsam, aber es ist tatsächlich sinnvoll, dies zu tun.
Bei der Ausführung der Post-Link-Anweisung, die Unterabbau enthält, kann die umgekehrte Post-Link-Regel sicherstellen, dass die Nachverbindung seiner Unterabbauungen ausgeführt wurde.
Wenn wir die Nachverbindung der Anweisung auf Level-One ausgeführt haben, können wir daher sicherstellen, dass die Nachverbindung von Level-Two und Level-Three tatsächlich ausgeführt wurde.
Aus diesem Grund glauben die Leute, dass Post-Link der sicherste oder Standard-Ort für die Schreiben von Geschäftslogik ist.
Aber warum unterscheidet sich das Element hier von dem in Compile?
Sobald NG die Kompilierungsfunktion des Befehls aufruft, wird ein Element -Instanzobjekt des Vorlagenelements erstellt und ein Bereichsobjekt dafür bereitgestellt. Dieser Umfang kann eine neue Instanz sein oder es kann bereits existieren, es kann ein Subbereich sein, oder es kann ein unabhängiger Bereich sein. Diese alles hängen vom Bereich des Zielfernsatronenzattributs im Anweisungsdefinitionsobjekt ab.
Bei der Verknüpfung sind dieses Instanzelement- und Scope-Objekt bereits verfügbar und werden als Parameter von NG an die Parameterliste der Post-Link-Funktion übergeben.
1. Ich persönlich benutze den ielem -Namen immer, um den Parameter einer Linkfunktion zu definieren, und er verweist auf die Elementinstanz
Daher ist das Elementparameterobjekt der Funktion nach der Link (Vorverbindung) eine Elementinstanz anstelle eines Vorlagenelements.
Die Ausgabe im obigen Beispiel ist also unterschiedlich
Vorverbindung
Beim Schreiben einer Post-Link-Funktion können Sie sicherstellen, dass bei der Ausführung der Post-Link-Funktion die Post-Link-Funktionen aller ihrer untergeordneten Anweisungen ausgeführt wurden.
In den meisten Fällen kann es besser abschneiden, sodass wir es normalerweise zum Schreiben von Anweisungscode verwenden.
NG bietet uns jedoch einen zusätzlichen Hakenmechanismus, dh die Vorverbindung, die sicherstellen kann, dass ein anderer Code ausgeführt wird, bevor die Nachverbindungsfunktion aller Unterstörungen ausgeführt wird.
Dieser Satz ist einer wiederholten Überlegung wert
Die Vorverbindung kann sicherstellen, dass sie auf der Elementinstanz und vor der Nachverbindung seiner Unterabbauungen ausgeführt wird.
Daher ist es sinnvoll, die Post-Link-Funktion umzukehren, und es wird die Vorverbindung in der ursprünglichen Reihenfolge ausgeführt.
Dies bedeutet auch, dass die Vorverbindungsfunktion vor der Vorverbindung aller Unterstörungen ausgeführt wird. Der vollständige Grund ist daher:
Die Vorverbindungsfunktion eines Elements kann garantiert als Ausführung der Nachverbindung und der Vorverbindung aller seiner Sub-Inructions ausgeführt werden. Siehe Abbildung unten:
Rezension
Wenn wir auf die obige ursprüngliche Ausgabe zurückblicken, können wir deutlich erkennen, was los ist:
Die Codekopie lautet wie folgt:
// Hier sind die Elemente immer noch die ursprünglichen Vorlagenelemente
// Phase kompilieren
// LevelOne: Die Kompilierungsfunktion wird auf Original DOM aufgerufen
// LevelTWO: Die Kompilierungsfunktion wird auf Original DOM aufgerufen
// LevelThree: Die Kompilierungsfunktion wird auf Original DOM aufgerufen
// Ab hier wurden die Elemente instanziiert und
// sind an einen Bereich gebunden
// (zB NG-Repeat hätte mehrere Instanzen)
// Phase vor der Link
// LevelOne: Die Vorverbindungsfunktion wird zur Elementinstanz aufgerufen
// LevelTWO: Die Vorverbindungsfunktion wird zur Elementinstanz aufgerufen
// LevelThree: Die Vorverbindungsfunktion wird zur Elementinstanz aufgerufen
// Post-Link-Phase (Beachten Sie die umgekehrte Reihenfolge)
// LevelThree: Post -Link -Funktion wird zur Elementinstanz aufgerufen
// LevelTWO: Post -Link -Funktion wird auf Elementinstanz aufgerufen
// LevelOne: Post -Link -Funktion wird zur Elementinstanz aufgerufen
Zusammenfassung
Wenn wir auf die obige Analyse zurückblicken, können wir die Unterschiede und die Verwendung dieser Funktionen beschreiben:
Funktionsfunktion kompilieren
Verwenden Sie die Kompilierungsfunktion, um das ursprüngliche DOM (Template -Element) zu ändern, bevor NG die ursprüngliche DOM -Instanz- und Umfangsinstanz erstellt.
Es kann auf Situationen angewendet werden, in denen mehrere Elementinstanzen generiert werden müssen und es nur ein Vorlagenelement gibt. NG-Repeat ist das beste Beispiel. Es ändert das ursprüngliche DOM in der Kompilierungsfunktionsstufe, um mehrere ursprüngliche DOM -Knoten zu generieren, und erzeugt dann jeweils Elementinstanzen. Da Compile nur einmal ausgeführt wird, kann es die Leistung verbessern, wenn Sie mehrere Elementinstanzen generieren müssen.
Das Vorlagenelement und die zugehörigen Attribute werden als Parameter an die Kompilierungsfunktion übergeben, aber der Umfang kann zu diesem Zeitpunkt nicht verwendet werden:
Hier sieht die Funktion aus:
Die Codekopie lautet wie folgt:
/**
* Funktionsfunktion
*
* @param telem - Vorlagenelement
* @param tattrs - Attribute des Vorlagenelements
*/
Funktion (telem, tattrs) {
// ...
};
Vorverbindung
Verwenden Sie die Vorverbindungsfunktion, um eine Geschäftsordnung auszuführen, nachdem NG die Kompilierungsfunktion ausgeführt hat, aber bevor die Post-Link-Funktion aller Sub-Instructions ausgeführt wird, wird erledigt.
Das Zielfernrohrobjekt und die Elementinstanz werden als Parameter an die Vorverbindung übergeben:
Hier sieht die Funktion aus:
Die Codekopie lautet wie folgt:
/**
* Vorlinkfunktion
*
* @Param Scope - Umfang, die mit dieser ISance verbunden sind
* @param ielem - Instanzelement
* @param iattrs - Attribute des Instanzelements
*/
Funktion (Scope, Ielem, Iattrs) {
// ...
};
Post-Link-Funktion
Verwenden Sie die Post-Link-Funktion, um die Geschäftslogik auszuführen. In diesem Stadium weiß es bereits, dass alle Subinstruktionen zusammengestellt wurden und dass die Vorverbindungs- und Nachverbindungsfunktionen ausgeführt wurden.
Dies gilt als der sicherste und Standard -Schreibgeschäftslogikcode.
Die Ablaufinstanz- und Elementinstanz werden als Parameter an die Post-Link-Funktion übergeben:
Hier sieht die Funktion aus:
Die Codekopie lautet wie folgt:
/**
* Post-Link-Funktion
*
* @Param Scope - Umfang, die mit dieser ISance verbunden sind
* @param ielem - Instanzelement
* @param iattrs - Attribute des Instanzelements
*/
Funktion (Scope, Ielem, Iattrs) {
// ...
};
Zusammenfassen
Jetzt sollten Sie ein klares Verständnis der Unterschiede zwischen Kompilierung, Vorverbindung, Nachverbindung und dieser Funktion haben.
Wenn Sie es noch nicht getan haben und ein ernsthafter NG -Entwickler sind, empfehle ich Ihnen dringend, diesen Artikel noch einmal zu lesen, bis Sie ihn verstehen
Das Verständnis dieser Konzepte ist sehr wichtig, was Ihnen helfen kann, zu verstehen, wie NG Native -Anweisungen funktionieren, und Ihnen auch dabei helfen können, Ihre eigenen benutzerdefinierten Anweisungen zu optimieren.
Wenn Sie Fragen haben, fügen Sie Ihre Fragen in den Kommentaren unten hinzu
In Zukunft werden wir weiterhin zwei weitere Fragen zu den Anweisungen analysieren:
1. Wie funktioniert die Richtlinie Transclusion -Attribute?
2. Wie ist die Controller -Funktion der Anweisung zugeordnet?
Wenn Sie mit diesem Artikel etwas falsch finden, kommentieren Sie mich bitte rechtzeitig
Danke!