suchen
HeimWeb-Frontendjs-TutorialDetaillierte Erläuterung der Methode $apply() in angleJS_AngularJS

Für mich, einen absoluten Neuling im Frontend, weiß ich noch wenig über Javascript. Wenn ich direkt mit Angular JS beginnen möchte, stoße ich auf großen Widerstand. Ich glaube jedoch, dass selbst menschenfeindliche Designs kein großes Problem darstellen werden, solange wir hart arbeiten.

Okay, kein Unsinn mehr. Um zu verstehen, was Angular JS ist, habe ich mit Scope begonnen. Was ist Scope? Ausleihe einer Passage aus dem offiziellen Dokument:

Code kopieren Der Code lautet wie folgt:

„Bereich ist ein Objekt, das auf das Anwendungsmodell verweist. Es ist ein Ausführungskontext für Ausdrücke. Bereiche sind in einer hierarchischen Struktur angeordnet, die die DOM-Struktur der Anwendung nachahmt. Bereiche können Ausdrücke überwachen und Ereignisse weitergeben.“

Nachdem ich dies gelesen habe, habe ich in Analogie zu anderen Programmiersprachen das Gefühl, dass der Bereich wie der Bereich des Datenmodells ist und den Kontext für die Ausführung von Ausdrücken bereitstellt. Lassen Sie es uns zunächst so verstehen.

Merkmale des Geltungsbereichs

Als nächstes wollen wir sehen, welche Funktionen Scope hat?

Scope stellt die Methode $watch zur Überwachung von Modelländerungen bereit.
Scope stellt die Methode $apply zur Weitergabe von Modelländerungen bereit.
Der Bereich kann vererbt werden, um verschiedene Anwendungskomponenten und Eigenschaftenzugriffsberechtigungen zu isolieren.
Der Bereich bietet Kontext für die Auswertung von Ausdrücken.

In Bezug auf diese vier Funktionen sind der erste, dritte und vierte Punkt nicht schwer zu verstehen, da ich zuvor ActionScript, C und Java studiert habe, aber der zweite Punkt fühlt sich etwas unklar an. Ganz nach dem Prinzip, nach Antworten zu fragen, habe ich einige Dinge trotzdem über Google gefunden. Erfahrene Veteranen tippen bitte auf die Steine!

Origin Javascript

Zunächst einmal scheint Scope.apply() auf den ersten Blick eine gewöhnliche Methode zum Aktualisieren von Bindungen zu sein. Aber denken Sie noch ein wenig darüber nach: Warum brauchen wir es? Wann wird es normalerweise verwendet? Um diese beiden Probleme zu verstehen, müssen wir mit Javascript beginnen. In Javascript-Code wird es in einer bestimmten Reihenfolge ausgeführt. Wenn ein Codefragment an der Reihe ist, führt der Browser nur das aktuelle Fragment aus und führt keine weiteren Aktionen aus. Manchmal bleiben einige Webseiten, die nicht sehr gut gemacht sind, hängen, nachdem sie auf etwas geklickt haben. Die Art und Weise, wie Javascript funktioniert, ist einer der Gründe für dieses Phänomen! Unten haben wir einen Code, um es zu fühlen:

Code kopieren Der Code lautet wie folgt:

var button = document.getElementById('clickMe');
FunktionstasteClicked () {
warning('auf die Schaltfläche wurde geklickt');
}
button.addEventListener('click', buttonClicked);
Funktion timerComplete () {
Alert('Timer abgeschlossen');
}
setTimeout(timerComplete, 5000);

Suchen Sie beim Laden von Javascript-Code zunächst nach einer Schaltfläche mit der ID „clickMe“, fügen Sie dann einen Listener hinzu und legen Sie dann ein Timeout fest. 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, kann die Funktion „timerComplete“ nie ausgeführt werden.

So aktualisieren Sie Bindungen

Okay, nachdem wir über einige scheinbar irrelevante Dinge gesprochen haben, kehren wir zum Thema zurück. Woher weiß Angular JS, wann sich Daten ändern und die Seite aktualisiert werden muss? Der Code muss wissen, wann die Daten geändert wurden, aber es gibt derzeit keine Möglichkeit, direkt zu benachrichtigen, dass sich die Daten eines Objekts geändert haben (obwohl ECMAScript 5 versucht, dieses Problem zu lösen, befindet es sich noch im experimentellen Stadium). Zu den derzeit eher Mainstream-Strategien gehören die folgenden zwei Lösungen. Eine besteht darin, ein spezielles Objekt zu verwenden, sodass alle Daten nur durch Aufrufen der Methode des Objekts festgelegt werden können, anstatt sie direkt über die Eigenschaft anzugeben. Auf diese Weise können alle Änderungen aufgezeichnet werden und Sie wissen, wann die Seite aktualisiert werden muss. Der Nachteil dabei ist, dass wir ein spezielles Objekt erben müssen. Die Zuweisung kann nur über object.set('key', 'value') statt über object.key=value erfolgen. In Frameworks wie EmberJS und KnockoutJS geschieht dies (obwohl ich noch nie damit in Berührung gekommen bin – peinlich). Die andere Methode ist die von Angular JS übernommene Methode, die nach der Ausführung jeder Javascript-Code-Ausführungssequenz prüft, ob Datenänderungen vorliegen. Dies erscheint ineffizient und kann sogar die Leistung ernsthaft beeinträchtigen. Angular JS verwendet jedoch einige clevere Methoden, um dieses Problem zu lösen (es wurde noch nicht untersucht und ist noch nicht klar). Dies hat den Vorteil, dass wir jedes beliebige Objekt beliebig verwenden können, es keine Einschränkungen bei der Zuweisungsmethode gibt und wir auch Änderungen in den Daten erkennen können.
Bei dieser von Angular JS übernommenen Lösung geht es uns darum, wann sich die Daten ändern, und hier kommt „scope.apply()“ zum Einsatz. Die Überprüfung, ob sich die gebundenen Daten geändert haben, wird tatsächlich von Scope.digest () durchgeführt. Wir rufen diese Methode jedoch fast nie direkt auf, sondern rufen die Methode Scope.apply () auf, da in Scope die Methode .apply () aufgerufen wird Scope.digest()-Methode. Die Methode „scope.apply()“ nimmt eine Funktion oder einen Ausdruck, führt sie aus und ruft schließlich die Methode „scope.digest()“ auf, um Bindungen oder Watcher zu aktualisieren.

Wann sollte $apply() verwendet werden?

Es ist immer noch die gleiche Frage: Wann müssen wir die apply()-Methode aufrufen? Die Situation ist sehr selten. Tatsächlich ist fast unser gesamter Code in Scope.apply () eingeschlossen, z. B. ng-click, Controller-Initialisierung, http-Rückruffunktion usw. In diesen Fällen müssen wir es nicht selbst aufrufen. Tatsächlich können wir es nicht selbst aufrufen, da sonst der Aufruf der apply()-Methode innerhalb der apply()-Methode einen Fehler auslöst. Wir müssen es wirklich verwenden, wenn wir den Code in einer neuen Ausführungssequenz ausführen müssen, und genau dann, wenn diese neue Ausführungssequenz nicht durch die Angular-JS-Bibliotheksmethode erstellt wird, müssen wir zu diesem Zeitpunkt den Bereich für den Code verwenden. apply() umschlossen. Lassen Sie uns dies anhand eines Beispiels erklären:

Code kopieren Der Code lautet wie folgt:

{{message}}

Code kopieren Der Code lautet wie folgt:

functionStrg($scope) {
$scope.message = „2000 ms auf Aktualisierung warten“; setTimeout(function () {
​ ​$scope.message="Timeout aufgerufen!";
// AngularJS ist sich der Aktualisierung auf $scope
nicht bewusst }, 2000);
}

Nachdem der obige Code ausgeführt wurde, wird auf der Seite Folgendes angezeigt: Warten 2000 ms auf Aktualisierung. Anscheinend wird die Datenaktualisierung von Angular JS nicht bemerkt.

Als nächstes modifizieren wir den Javascript-Code leicht und umschließen ihn mit „scope.apply()“.

Code kopieren Der Code lautet wie folgt:
functionStrg($scope) {
$scope.message = „2000 ms auf Aktualisierung warten“; setTimeout(function () {
​ ​$scope.$apply(function () {
​ ​ ​$scope.message="Timeout aufgerufen!";
});
}, 2000);
}

Der Unterschied besteht dieses Mal darin, dass auf der Seite zunächst Folgendes angezeigt wird: Warten 2000 ms auf Aktualisierung. Nach 2 Sekunden Wartezeit ändert sich der Inhalt in: Timeout aufgerufen!. Offensichtlich wird die Datenaktualisierung von Angular JS bemerkt.
HINWEIS: Wir sollten dies nicht tun, sondern die von Angular JS bereitgestellte Timeout-Methode verwenden, damit sie automatisch mit der Apply-Methode umschlossen wird.

Wissenschaft ist ein zweischneidiges Schwert
Schauen wir uns abschließend noch einmal die Methoden „scope.apply()“ und „scope.apply(function)“ an! Obwohl Angular JS viel für uns getan hat, haben wir auch einige Chancen verpasst. Sie können es auf einen Blick anhand des folgenden Pseudocodes erkennen:

Code kopieren Der Code lautet wie folgt:

function$apply(expr) {
versuche es mit {
​​return$eval(expr);
} Catch(e) {
​​$ExceptionHandler(e);
} endlich {
​​$root.$digest();
}
}

Es werden alle Ausnahmen abgefangen und nicht erneut ausgelöst. Schließlich wird die Methode $digest() aufgerufen.

Um es zusammenzufassen

Die Methode $apply() kann Angular-JS-Ausdrücke außerhalb des Angular-Frameworks ausführen, z. B. DOM-Ereignisse, setTimeout, XHR oder andere Bibliotheken von Drittanbietern. Das ist erst der Anfang, das Wasser ist noch sehr tief, jeder ist herzlich willkommen, gemeinsam tief zu tauchen!

Stellungnahme
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
JavaScript -Engines: Implementierungen vergleichenJavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltJenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

JavaScript: Erforschung der Vielseitigkeit einer WebspracheJavaScript: Erforschung der Vielseitigkeit einer WebspracheApr 11, 2025 am 12:01 AM

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenDie Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Entmystifizieren JavaScript: Was es tut und warum es wichtig istEntmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Ist Python oder JavaScript besser?Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AM

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft