1. Welcher Mechanismus wird für die Datenbindung in Angular verwendet? Ausführliche Prinzipantwort
: Dirty-Checking-Mechanismus.
Analyse:
Die bidirektionale Datenbindung ist einer der Kernmechanismen von AngularJS. Wenn sich Daten in der Ansicht ändern, werden diese im Modell aktualisiert. Wenn sich die Daten im Modell ändern, wird die Ansicht natürlich auch synchron aktualisiert. [Verwandte Tutorial-Empfehlung: „Angular Tutorial“]
Das Prinzip besteht darin, dass Angular eine Überwachungswarteschlange für das Bereichsmodell einrichtet, um Datenänderungen zu überwachen und die Ansicht zu aktualisieren. Jedes Mal, wenn Sie etwas an eine Ansicht binden, fügt AngularJS ein $watch in die $watch-Warteschlange ein, um zu erkennen, ob es Änderungen im überwachten Modell gibt. Wenn der Browser ein Ereignis empfängt, das vom Angular-Kontext verarbeitet werden kann, wird die $digest-Schleife ausgelöst, durchläuft alle $watches und aktualisiert schließlich den Dom.
2. Wie wird die bidirektionale Datenbindung von AngularJS implementiert?
Antwort:
1. Jedes bidirektional gebundene Element verfügt über einen Beobachter.
2. Wenn bestimmte Ereignisse auftreten, wird die Digest-Dirty-Data-Erkennung aufgerufen.
Zu diesen Ereignissen gehören: Inhaltsänderungen von Formularelementen, Antworten auf Ajax-Anfragen, durch Klicken auf Schaltflächen ausgeführte Funktionen usw.
3. Die Dirty-Data-Erkennung erkennt alle Watcher-Elemente unter dem Rootscope.
Die $digest-Funktion ist die Überwachung schmutziger Daten
. 3. Welche Plug-Ins von Drittanbietern haben Sie bei der Entwicklung von AngularJS-Projekten verwendet?
Antwort: AngularUi UI-Router Oclazyload usw. Im Anhang finden Sie einen Artikel zur genaueren Betrachtung: https://segmentfault. com/a /1190000003858219
4. Was ist der Unterschied zwischen ng-show/ng-hide und ng-if?
Antwort: Wir alle wissen, dass ng-show/ng-hide tatsächlich über die Anzeige ausgeblendet und angezeigt wird. Und ng-if steuert tatsächlich das Hinzufügen und Löschen von Dom-Knoten. Wenn wir also Dom-Knoten basierend auf unterschiedlichen Bedingungen laden, ist die Leistung von ng-if besser als die von ng-show.
5. Erklären Sie, was Root-S-Crope ist und den Unterschied zwischen RootScrope, RootScrope und Scope.
Antwort: Laienhaft ausgedrückt ist die Root-S-Crope-Seite der Vater aller RootScrope-Seiten und aller RootScrope-Seiten und aller Bereiche.
Analyse:
Werfen wir einen Blick darauf, wie Root-S-Cope und RootScope sowie RootScope und Scope generiert werden.
Schritt 1: Angular analysiert ng-app und erstellt $rootScope im Speicher.
Schritt 2: Angular setzt die Analyse fort, findet den Ausdruck {{}} und analysiert ihn in eine Variable.
Schritt 3: Dann wird das Div mit ng-Controller analysiert und auf eine Controller-Funktion verwiesen. Zu diesem Zeitpunkt wird die Controller-Funktion zu einer $scope-Objektinstanz.
6. Nennen Sie mindestens drei Möglichkeiten, die Kommunikation zwischen verschiedenen Modulen zu implementieren?
Antwort:
7. Ausdruck { Wie funktioniert {yourModel}}?
Antwort:
Es verlässt sich auf den $interpolation-Dienst. Nach der Initialisierung des Seiten-HTML werden diese Ausdrücke gefunden und markiert, sodass jedes Mal, wenn ein { auftritt. {}}, ein $watch wird gesetzt. Und $interpolation gibt eine Funktion mit Kontextparametern zurück. Wenn die Funktion schließlich ausgeführt wird, wird der Ausdruck $parse auf diesen Bereich angewendet.
8. $http in Angular
Antwort: $http ist ein Kerndienst in AngularJS, der zum Lesen von Daten von Remote-Servern verwendet wird.
Über den integrierten HTTP-Dienst können wir direkt mit der Außenwelt kommunizieren. Der http-Dienst kommuniziert direkt mit der Außenwelt. Der http-Dienst kommuniziert direkt mit der Außenwelt. Der http-Dienst kapselt einfach das native XMLHttpRequest-Objekt des Browsers.
9. Was passiert, wenn ng-repeat ein Array iteriert und das Array dieselben Werte enthält, und wie kann das Problem gelöst werden?
Antwort: Es wird angezeigt, dass Duplikate in einem Repeater nicht zulässig sind. Track nach $index hinzufügen, um das Problem zu lösen. Natürlich können Sie auch jeden gewöhnlichen Wert verfolgen, solange er jedes Element im Array eindeutig identifizieren kann (die Verbindung zwischen Dom und Daten herstellen kann).
10. Ist AngularJS MVC oder MVVM-Framework?
Antwort: MVVM-
Analyse:
Zuerst ausarbeiten. Hier ist Ihre Verständnis von MVC und MVVM:
Warum brauchen wir zunächst MVC? Da die Größe des Codes immer größer wird, ist die Aufteilung der Verantwortlichkeiten der allgemeine Trend. Aus Gründen der Bequemlichkeit der späteren Wartung hat die Änderung einer Funktion keine Auswirkungen auf andere Funktionen. Und zur Wiederverwendung, weil ein Großteil der Logik gleich ist. MVC ist nur ein Mittel, das ultimative Ziel ist Modularisierung und Wiederverwendung.
Die Vorteile von mvvm
liegen in der geringen Kopplung: Die Ansicht kann unabhängig vom Modell geändert und geändert werden, und dasselbe Ansichtsmodell kann von mehreren Ansichten wiederverwendet werden. Änderungen in Ansicht und Modell können unabhängig voneinander vorgenommen werden:
Einige Ansichtslogiken sind möglich In ViewModel können mehrere Ansichten wiederverwendet werden.
Unabhängige Entwicklung: Entwickler könnensich
auf die Entwicklung von Geschäftslogik und Daten konzentrieren (ViewModemvvmdi). Designer können sich auf das Design der Benutzeroberfläche (Ansicht) konzentrieren
Das Testen der Geschäftslogik der Präsentationsschicht ist einfacher und einfacher.
In Angular ist das MVVM-Muster hauptsächlich in vier Teile unterteilt:
Ansicht: Es konzentriert sich auf die Anzeige und Darstellung der Schnittstelle. InAngular
enthält es eine Reihe deklarativer Direktivenansichten Vorlagen
: Es ist die Verbindung zwischen Ansicht und Modell, die für die Interaktion und Zusammenarbeit zwischen Ansicht und Modell verantwortlich ist. Es ist für die Bereitstellung angezeigter Daten für Ansicht verantwortlich und bietet dem Befehlsereignis in Ansicht die Möglichkeit, das Modell in Winkelform zu betreiben. Das $scope-Objekt dient als die Rolle des ViewModels
: Es ist ein Kapselungsträger für die Geschäftslogik der Anwendung. Dem Modell ist es egal, wie es angezeigt wird betrieben, sodass das Modell keine schnittstellenbezogenen Logikinformationen enthält. In Webseiten geben die meisten Modelle Daten vom Ajax-Server zurück oder sind globale Konfigurationsobjekte, und der Dienst in Angular ist der Ort, an dem die Geschäftslogik gekapselt und verarbeitet wird Diese Art von Geschäftsdienst ist ein Domänendienst, der von mehreren Controllern oder anderen Diensten wiederverwendet werden kann:
Dies ist nicht das Kernelement des MVVM-Musters, aber er ist für die Initialisierung des ViewModel-Objekts verantwortlich . Es kombiniert einen oder mehrere Dienste, um das ViewModel-Objekt der Geschäftsdomäne zu erhalten, sodass die Anwendungsschnittstelle zu Beginn des Ladens einen verwendbaren Zustand erreicht.
Die Schnittstelle von mvc ist eng mit der Logik verbunden und die Daten werden direkt gelesen Die Schnittstelle von mvvm ist lose mit dem Ansichtsmodus gekoppelt und die Schnittstellendaten werden aus dem Ansichtsmodell abgerufen. Angularjs bevorzugt also mvvm
11.
Welche Rollen spielen $scope, Controller, Direktive und Service in mvvm?
Wenn Sie es nicht wissen, ist die Analyse der ersten Frage sehr klar, lesen Sie sie noch einmal sorgfältig durch.
12. Wie steuern Sie in Angular die angemessene Belastung statischer Ressourcen im Projekt?
Antwort: Keine.
13. Was müssen Sie bezahlen? Was ist beim Schreiben der Controller-Logik zu beachten?
Antwort:
1. Vereinfachen Sie den Code (dies ist, was alle Entwickler haben müssen)
2. Sie können den Dom-Knoten definitiv nicht bedienen. Zu diesem Zeitpunkt fragen Sie sich möglicherweise, warum nicht
: DOM-Operationen können nur in Anweisungen angezeigt werden. Der letzte Ort, an dem es erscheinen sollte, ist der Betrieb. Angular befürwortet eine testgetriebene Entwicklung. Wenn DOM-Operationen im Dienst oder Controller auftreten, bedeutet dies, dass der Test nicht bestanden werden kann. Dies ist natürlich nur ein Punkt. Wichtig ist einer der Vorteile der Verwendung von Angular, nämlich der bidirektionalen Datenbindung, sodass Sie sich auf die Verarbeitung der Geschäftslogik konzentrieren können, ohne sich mit Unmengen von DOM-Operationen befassen zu müssen. Wenn der Angular-Code immer noch voller verschiedener DOM-Operationen ist, warum nicht jquery direkt für die Entwicklung verwenden?
Was ist testgetriebene Entwicklung? Um es populärer zu machen:
Testgetriebene Entwicklung, der vollständige englische Name lautet Testgetriebene Entwicklung, kurz TDD, ist eine neue Entwicklungsmethode, die sich vom traditionellen Softwareentwicklungsprozess unterscheidet. Es erfordert das Schreiben von Testcode, bevor der Code für eine bestimmte Funktion geschrieben wird, und dann nur das Schreiben des Funktionscodes, der den Test erfolgreich macht, und das Vorantreiben der gesamten Entwicklung durch Tests. Dies hilft beim Schreiben von prägnantem, benutzerfreundlichem und qualitativ hochwertigem Code und beschleunigt den Entwicklungsprozess.
14.
Antworten zur Kommunikation zwischen Controllern:
1.
Hier gibt es zwei Methoden für Ereignisse: Eine ist Scope.scope.scope.emit, und die andere ist das Ereignis von rootScope zum Abrufen von Parametern; das andere ist das Ereignis von rootScope zum Abrufen von Parametern; das andere ist rootScope.broadcast, das Parameter durch Abhören von Broadcasts und durch Abhören von Scope-Ereignissen erhält.
In der neuesten Version von Angular gibt es keinen Leistungsunterschied. Der Hauptgrund ist, dass die Richtung des Ereignisversands je nach tatsächlicher Situation unterschiedlich ist.
2. Der Dienst
kann einen dedizierten Ereignisdienst erstellen oder ihn entsprechend der Geschäftslogik aufteilen und die Daten im entsprechenden Dienst speichern.
3.
Die Methode $rootScope ist möglicherweise etwas schmutzig, aber praktischer. Die Daten werden im Root-S-Cope gespeichert, sodass in jedem Sub-RootScope, also in jedem Sub-RootScope, jeder Sub-Scope aufgerufen werden kann, Sie müssen jedoch auf den Lebenszyklus 4 achten
. Verwenden Sie den Scope direkt .scope.scope.$nextSibling und ähnliche Eigenschaften
. Diese Methode hat weitere Nachteile. Offiziell wird nicht empfohlen, Attribute zu verwenden, die mit $$ beginnen, was nicht nur die Kopplung erhöht, sondern auch die Behandlung asynchroner Probleme erfordert und die Reihenfolge der Bereiche nicht festgelegt ist.
Eswird nicht empfohlen,
Parameter in modernen Browsern über lokalen Speicher, globale Variablen oder PostMessage zu übergeben, sofern keine besonderen Umstände vorliegen.
15. Mehrere Parameter benutzerdefinierter Anweisungen
. Antwort:
Lassen Sie uns über einige häufig verwendete Parameter sprechen, z. B.:
Einschränkung: Deklarationsform der Anweisung in Dom E (Element) A (Attribut) C (Klassenname) M (Kommentar)
Vorlage: zwei Formen, ein Typ von HTML-Text; eine Funktion, die zwei Parameter, tElemetn und tAttrs, akzeptiert und eine Zeichenfolge zurückgibt, die die Vorlage darstellt. Die Vorlagenzeichenfolge muss ein Root-DOM-Element
templateUrl haben: zwei Formen, eine ist eine Zeichenfolge, die den Pfad der externen HTML-Datei darstellt, und die andere ist eine Funktion, die zwei Parameter akzeptieren kann. Die Parameter sind tElement und tAttrs und geben die Zeichen des externen HTML zurück Dateipfad String
kompilieren (Objekt oder Funktion): Die Kompilierungsoption kann ein Objekt oder eine Funktion zurückgeben. Wenn die Kompilierungsfunktion festgelegt ist, bedeutet dies, dass wir DOM-Operationen ausführen möchten, bevor Anweisungen und Echtzeitdaten im DOM platziert werden. Es ist sicher, DOM-Operationen wie das Hinzufügen und Löschen von Knoten in dieser Funktion auszuführen. Wenn wir die Link-Option festlegen, erstellen wir im Wesentlichen eine PostLink()-Link-Funktion, damit die Compile()-Funktion die Link-Funktion definieren kann.
Dann gibt es noch das Portal: http://www.cnblogs.com/mliudong/p/4180680.html
Der Unterschied zwischen Compile und Link:
Beim Kompilieren konvertiert Compile den Dom und speichert ihn zuerst, wenn er auf den Ort trifft, an dem sich der Listener befindet Mehrere werden gespeichert und schließlich in einer Linkfunktion zusammengefasst und gemeinsam ausgeführt, was die Leistung verbessert.
16. Die Antwort auf den Unterschied zwischen Angular und JQuery
:
Angular basiert auf Daten, sodass Angular für Projekte mit komplizierten Datenoperationen geeignet ist (hier können Sie Single-Page-Anwendungen noch einmal erwähnen, wenn Sie nicht wissen, wie das geht). Hier sind die Vorteile: http://www.zhihu.com/question/20792064)
Jquery basiert auf dem Dom-Treiber.
17. Wie viel wissen Sie über das Formular? Angular?
Antwort:
Angular hat die Art der Eingabeelemente erweitert und bietet insgesamt die folgenden 10 Typen:
Text,
Nummer
, URL
, Radio,
Kontrollkästchen
versteckter
Button,
Senden,
Zurücksetzen
Angular verfügt über 4 integrierte CSS-Stile für das Formular.
ng-valid überprüft den legalen Status.
ng-invalid überprüft den illegalen Status.
ng-pristine Wenn Sie das native Formular verwenden möchten, müssen Sie diesen Wert festlegen.
ng-dirty Das Formular befindet sich im fehlerhaften Datenstatus.
Angular überprüft das Modell, wenn Automatische Überprüfung des Formulars. Wenn ng-model nicht festgelegt ist, kann Angular nicht wissen, ob der Wert von myForm.$invalid wahr ist.
Der für die Überprüfung erforderliche Inhalt
ng-maxlength, maximale Länge,
ng-minlength, minimale Länge
eingegeben werden soll
Beispiel: Portal https://github.com/18500047564/clutter
18. Was ist Filter? Implementieren Sie eine benutzerdefinierte Filterantwort
:
Datum (Datum)
Währung (Währung)
limitTo (Länge eines Arrays oder einer Zeichenfolge begrenzen)
orderBy (sortieren)
Kleinbuchstaben (Kleinbuchstaben)
Großbuchstaben (Großbuchstaben)
Zahl (Formatieren Sie eine Zahl, fügen Sie ein Tausendertrennzeichen hinzu und empfangen Sie Parameter begrenzen die Anzahl der Dezimalstellen)
Filter (ein Array verarbeiten, Elemente herausfiltern, die einen bestimmten Teilstring enthalten)
JSON (JSON-Objekt formatieren)
Es gibt zwei Möglichkeiten, Filter zu verwenden,
eine direkt auf der Seite:
<p>{{now | date: 'yyyy-MM-dd'}}</p> Die andere Möglichkeit besteht darin, es in js zu verwenden:
$filter('filter name')(object to be filter, parameter 1, parameter 2,...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss'); Passen Sie ein Deduplizierungsarray
an app.filter("unique", function() {
Rückgabefunktion(arr) {
var n = [];
var obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
n.push(arr[i]);
obj[arr[i]] = 1;
}
}
Rückkehr n;
};
});