Für mich, der im vorderen Ende ein reiner Anfänger ist, ist JavaScript immer noch ein bisschen klar. Wenn Sie direkt mit Angular JS beginnen möchten, gibt es wirklich viel Widerstand. Aber ich glaube, solange Sie hart arbeiten, wird selbst Anti-Human-Design kein großes Problem sein.
Okay, sag nicht viel Unsinn. Um herauszufinden, was Angular JS ist, begann ich mit Geltungsbereich. Also, was ist Umfang? Ausleihen einer Passage aus dem offiziellen Dokument:
Die Codekopie lautet wie folgt:
"Geltungsbereich ist ein Objekt, das sich auf das Anwendungsmodell bezieht. Es ist ein Ausführungskontext für Ausdrücke. Scopes sind in hierarchischer Struktur angeordnet, die die Dom -Struktur der Anwendung nachahmen. Scopes können Ausdrücke beobachten und Ereignisse ausbreiten."
Nachdem ich es gelesen hatte, habe ich es mit anderen Programmiersprachen verglichen und hatte das Gefühl, dass der Umfang wie der Umfang des Datenmodells ist und einen Kontext für die Ausführung von Ausdrücken bereitstellt. Lassen Sie es uns vorerst so verstehen.
Merkmale des Umfangs
Lassen Sie uns als nächstes sehen, welche Funktionen Umfang haben?
Scope bietet die $ Watch -Methode zur Überwachung der Änderungen im Modell.
SCOPE bietet $ anwenden -Methode, um Änderungen des Modells zu verbreiten.
Umfang kann vererbt werden und isoliert verschiedene Anwendungskomponenten und Attributzugriffsberechtigungen.
Geltungsbereich bietet einen Kontext für die Berechnung von Ausdrücken.
Für diese vier Merkmale, weil ich zuvor Actioncript, C ++ und Java gelernt habe, ist es nicht schwer, die ersten, dritten und vierten Punkte zu verstehen, aber der zweite Punkt fühlt sich ein bisschen verwirrend an. Basierend auf dem Prinzip, den Auflauf zu brechen und das Ende zu fragen, fand ich immer noch einige Dinge über Google. Für erfahrene Veteranen tupfen Sie bitte die Ziegel!
Ursprung von JavaScript
Zunächst scheint auf den ersten Blick Scope.Apply () eine gewöhnliche Methode zu sein, um Bindungen zu aktualisieren. Aber überlegen Sie ein bisschen mehr, warum brauchen wir es? Wann benutzt du es normalerweise? Um diese beiden Probleme zu verstehen, müssen wir mit JavaScript beginnen. In JavaScript Code werden sie in einer bestimmten Reihenfolge ausgeführt. Wenn es sich um die Ausführung eines Code -Snippets handelt, führt der Browser nur das aktuelle Snippet aus und tut nichts anderes. Manchmal stecken einige Webseiten, die nicht gut gemacht sind, beim Klicken auf etwas hängen. JavaScript arbeitet einer der Gründe, warum dieses Phänomen verursacht wird! Hier haben wir einen Code, um ihn zu erleben:
Die Codekopie lautet wie folgt:
var button = document.getElementById ('ClickMe');
Funktion buttonclicked () {
alarm ('Die Schaltfläche wurde geklickt');
}
Button.AdDeVentListener ('Click', Button Clicked);
Funktion TimerComplete () {
Alert ('Timer vollständig');
}
setTimeout (TimerComplete, 5000);
Wenn Sie den JavaScript -Code laden, finden Sie zuerst eine Schaltfläche mit einer ID mit dem Namen "ClickMe", fügen Sie dann einen Listener hinzu und setzen Sie dann das Timeout. Warten Sie 5 Sekunden und ein Dialogfeld wird angezeigt. Wenn Sie die Seite aktualisieren und sofort auf die Schaltfläche ClickMe klicken, wird ein Dialogfeld angezeigt. Wenn Sie nicht auf OK klicken, hat die TimerComplete -Funktion niemals die Möglichkeit, auszuführen.
So aktualisieren Sie Bindungen
Okay, nachdem wir über etwas gesprochen haben, das irrelevant erscheint, kehren wir zum Thema zurück. Woher wissen Angular JS, wann Datenänderungen und Seiten aktualisiert werden müssen? Der Code muss wissen, wann die Daten geändert wurden, aber jetzt gibt es keine Möglichkeit, die Daten zu einem Objekt, das sich geändert hat, direkt zu informieren (obwohl ECMAScript 5 versucht, dieses Problem zu lösen, ist er noch in der experimentellen Phase). Derzeit gibt es zwei Lösungen für die wichtigeren Mainstream -Strategien. Man muss spezielle Objekte verwenden, damit alle Daten nur durch Aufrufen der Objektmethode festgelegt werden können, anstatt sie direkt über die Eigenschaft anzugeben. Auf diese Weise können alle Modifikationen aufgezeichnet werden, und Sie werden wissen, wann die Seite aktualisiert werden muss. Der Nachteil davon ist, dass wir ein spezielles Objekt erben müssen. Für die Zuweisung kann es nur durch Object.set ('Schlüssel', 'Wert') anstelle von Object.Key = Value erfolgen. In Frameworks tun dies das, was Emberjs und Knockoutjs tun (obwohl ich es vorher nicht berührt habe). Eine andere Methode ist die Methode, die von Angular JS angewendet wurde und überprüft, ob sich Datenänderungen nach jeder JavaScript -Codeausführungssequenz ausführen. Dies scheint nicht effizient zu sein und wirkt sich sogar ernsthaft auf die Leistung aus. Angular JS verwendet jedoch einige clevere Mittel, um dieses Problem zu lösen (es wurde noch nicht untersucht, und es ist noch nicht klar). Der Vorteil, dies zu tun, besteht darin, dass wir jedes Objekt nach Belieben verwenden können, es gibt keine Begrenzung für die Zuordnungsmethode und wir können auch Datenänderungen bewusst sein.
Für diese von Angular JS übernommene Lösung kümmert wir uns, wann sich die Daten ändert, und dort ist SCOPE.Apply () nützlich. Wenn Sie überprüfen, ob sich die gebundenen Daten geändert haben, wird dies tatsächlich von Scope.Digest () durchgeführt, aber wir haben diese Methode fast nie direkt bezeichnet, sondern die Methode von Scope.Apply (), weil sie in der Methode von Scope.Apply () die Methode Scope.Digest () aufgerufen wird. Die Methode Scope.Apply () nimmt eine Funktion oder einen Ausdruck aus, führt sie anschließend aus und ruft schließlich die Methode Scope.Digest () auf, um Bindungen oder Beobachter zu aktualisieren.
Wann zu verwenden $ bewerben ()
Die gleiche Frage lautet. Wann müssen wir also die Methode für apply () aufrufen? Es gibt nur sehr wenige Fälle. Tatsächlich sind fast alle unserem Code in Scope.Apply () wie NG-Klick, Controller-Initialisierung, HTTP-Rückruffunktionen usw. In diesen Fällen müssen wir uns nicht anrufen, und wir können uns nicht selbst aufrufen, sonst rufen wir die Methode anwenden () in der Methode an, in der () Methode aufgerufen wird. Wenn wir den Code in einer neuen Ausführungssequenz ausführen müssen, müssen wir ihn wirklich verwenden. Wenn und nur, wenn die neue Ausführungssequenz nicht von der Angular JS -Bibliotheksmethode erstellt wird, müssen wir den Code in Scope.Apply () einwickeln. Hier ist ein Beispiel zu erklären:
Die Codekopie lautet wie folgt:
<div ng: App ng-controller = "Strg"> {{message}} </div>
Die Codekopie lautet wie folgt:
functionCtrl ($ scope) {
$ scope.message = "Waiting 2000 ms auf Update";
setTimeout (function () {
$ scope.message = "Timeout Calling!";
// AngularJs, die sich des Updates auf $ Scope nicht bewusst sind
}, 2000);
}
Nachdem der obige Code ausgeführt wurde, wird auf der Seite angezeigt: Warten von 2000 ms auf das Update. Offensichtlich wurde die Aktualisierung der Daten von Angular JS nicht erkannt.
Als nächstes ändern wir den JavaScript -Code leicht und wickeln ihn mit Scope.Apply () ein.
Die Codekopie lautet wie folgt:
functionCtrl ($ scope) {
$ scope.message = "Waiting 2000 ms auf Update";
setTimeout (function () {
$ scope. $ bewerben (function () {
$ scope.message = "Timeout Calling!";
});
}, 2000);
}
Der Unterschied ist diesmal darin, dass die Seite zuerst angezeigt wird: Warten von 2000 ms auf das Update. Nach 2 Sekunden Wartezeit wird der Inhalt geändert in: Timeout Calling! . Offensichtlich wurde die Aktualisierung der Daten durch Angular JS erkannt.
HINWEIS: Wir sollten dies nicht tun, sondern die von Angular JS bereitgestellte Zeitüberschreitungsmethode verwenden, damit sie automatisch mit der Anwendenmethode umwickelt werden.
Die Wissenschaft ist ein zweischneidiges Schwert
Schauen wir uns schließlich den SCOPE.Apply () und den SCOPE.Apply (Funktion) Methoden noch einmal an! Obwohl Angular JS viel für uns getan hat, haben wir auch einige Möglichkeiten verloren. Sie können aus dem folgenden Pseudocode sehen:
Die Codekopie lautet wie folgt:
Funktion $ anwenden (expr) {
versuchen {
Return $ eval (expr);
} catch (e) {
$ exceptionHandler (e);
} Endlich {
$ root. $ digest ();
}
}
Es wird alle Ausnahmen erfassen und sie nicht wieder werfen und schließlich die $ digest () -Methode nennen.
Lassen Sie uns zusammenfassen
Die Methode $ apply () kann Angular JS-Ausdrücke außerhalb des Winkelgerüsts ausführen, wie z. B. DOM-Ereignisse, SetTimeout, XHR oder andere Bibliotheken von Drittanbietern. Dies ist nur der Anfang, das Wasser ist immer noch tief, willkommen, zusammen zu tauchen!