Zusammenstellung von Angular8+-Interviewfragen: Analyse grundlegender Wissenspunkte

Dieser Artikel wird Ihnen einige Interviewfragen basierend auf Angular8+ mitteilen und Ihnen ein detailliertes Verständnis der grundlegenden Wissenspunkte von Angular8+ vermitteln. Ich hoffe, dass er Ihnen hilfreich sein wird! 🎙 um die Effizienz zu verbessern. Angular-Apps, Komponenten, Dienste usw. können einfach generiert und über Parameter entsprechend Ihren eigenen Anforderungen erstellt werden. Man kann sagen, dass es ein unverzichtbares Werkzeug für die Winkelentwicklung ist. [Verwandte Tutorial-Empfehlungen: „

angular Tutorial

“] Referenz: https://cli.angular.io/

ng generieren: Neue Komponenten, Dienste, Pipes, Klassen usw. erstellen. ng neu: Neu erstellen Angular-App

ng-Update: Angular selbst und seine Abhängigkeiten aktualisieren

ng-Version: Zeigt die globale Version von Angular CLI und lokale Versionen von Angular CLI, Angular-Code usw. an.

ng-Hinzufügen: Fügen Sie eine neue Bibliothek eines Drittanbieters hinzu . Es wird zwei Dinge tun: 1) node_modules basierend auf npm installieren, 2) die Konfigurationsdatei automatisch ändern, um sicherzustellen, dass neue Abhängigkeiten ordnungsgemäß funktionieren Implementierung Anwendungsdesignmuster sind eines der Kernkonzepte von Angular.
Eine Abhängigkeit ist ein Dienst mit einer Reihe von Funktionen. Verschiedene Komponenten und Anweisungen (Derivate) in der Anwendung können die Funktionen des Dienstes erfordern. Angular bietet einen reibungslosen Mechanismus, mit dem wir diese Abhängigkeiten in unsere Komponenten und Anweisungen einfügen können. Wir bauen also lediglich Abhängigkeiten auf, die zwischen allen Komponenten der Anwendung eingefügt werden können.

Die Verwendung der Abhängigkeitsinjektion hat auch die folgenden Vorteile:
• Keine Instanziierung (neue Instanz) erforderlich. Sie müssen sich keine Gedanken darüber machen, welche Parameter im Konstruktor der Klasse benötigt werden.
• Nach der Injektion (das App-Modul wird über Provider injiziert) können alle Komponenten verwendet werden. Darüber hinaus wird dieselbe Dienstinstanz (Singleton) verwendet, was bedeutet, dass die Daten in einem Dienst gemeinsam genutzt werden und für den Datentransfer zwischen Komponenten verwendet werden können.
• Über Angular-Kompilierung, den Unterschied zwischen AOT und JIT

Jede Angular-Anwendung enthält Komponenten und Vorlagen, die der Browser nicht verstehen kann. Daher müssen alle Angular-Anwendungen kompiliert werden, bevor sie im Browser ausgeführt werden können.

Angular bietet zwei Arten der Kompilierung:

JIT-Kompilierung (Just-in-Time)

AOT-Kompilierung (Ahead-of-Time)

1. Der Unterschied besteht darin, dass bei der JIT-Kompilierung die Anwendung durchsucht, während die Kompilierung ausgeführt wird erfolgt im Compiler; bei der AOT-Kompilierung wird die Anwendung während der Erstellungszeit kompiliert.
2. Offensichtlich hat die AOT-Kompilierung viele Vorteile, daher ist sie die Standardkompilierungsmethode von Angular. Hauptvorteile

Da die Anwendung vor der Ausführung im Browser kompiliert wird, lädt der Browser den ausführbaren Code und rendert die Anwendung sofort, was zu einem schnelleren Rendering führt. Bei der AOT-Kompilierung sendet der Compiler externe HTML- und CSS-Dateien zusammen mit der Anwendung, wodurch separate AJAX-Anfragen für diese Quelldateien entfallen und somit Ajax-Anfragen reduziert werden. Entwickler können Fehler während der Build-Phase erkennen und beheben, was zur Fehlerminimierung beiträgt.

Der AOT-Compiler fügt HTML und Vorlagen zu JS-Dateien hinzu, bevor er sie im Browser ausführt. Daher müssen keine redundanten HTML-Dateien gelesen werden, was die Sicherheit der Anwendung erhöht.

Winkel-Zwei-Wege-Bindung

• Prinzip der Winkel-Zwei-Wege-Bindung

Winkel-Zwei-Wege-Bindung wird durch Dirty-Data-Check (Dirty-Check) implementiert.

• Das Grundprinzip der Erkennung schmutziger Werte besteht darin, den alten Wert zu speichern und bei der Erkennung den neuen Wert zum aktuellen Zeitpunkt mit dem alten Wert zu vergleichen. Wenn sie gleich sind, gibt es keine Änderung. Andernfalls wird eine Änderung erkannt und die Ansicht muss aktualisiert werden.
• Es gibt Zone.js in Angular2. Für setTimeout werden addEventListener, Promise usw. alle in ngZone ausgeführt (mit anderen Worten, sie werden von zone.js gekapselt und neu geschrieben, Angular richtet den entsprechenden Hook in ngZone ein, benachrichtigt Angular2, um die entsprechende Dirty-Check-Verarbeitung durchzuführen, und). aktualisiert dann DOM.

Angular-Zwei-Wege-BindungseffizienzproblemIn Situationen, in denen extrem viele DOM-Elemente (Hunderte oder Tausende) auf der Seite gebunden werden müssen, treten zwangsläufig Effizienzprobleme auf. (Die Einzelheiten hängen auch von der PC- und Browserleistung ab). Wenn die Dirty-Prüfung außerdem mehr als 10 Mal durchgeführt wird (Erfahrungswert?), wird davon ausgegangen, dass ein Problem mit dem Programm vorliegt, und es werden keine weiteren Prüfungen durchgeführt.

Sie können dies auf folgende Weise vermeiden:

• Für Daten, die nur zur Anzeige verwendet werden, verwenden Sie eine unidirektionale Bindung anstelle einer bidirektionalen Bindung

• Der Datenfluss von Angular erfolgt von oben nach unten und fließt in eine Richtung von den übergeordneten Komponenten zu den untergeordneten Komponenten. Der unidirektionale Datenfluss gewährleistet eine effiziente und vorhersehbare Änderungserkennung. Daher ist die Komponentisierung auch ein Mittel zur Leistungssteigerung.

• Schreiben Sie weniger komplexe Logik in Ausdrücke (und von durch Ausdrücke aufgerufenen Funktionen)

• Verbinden Sie keine zu langen Pipes (oft durchläuft die Pipe neue Arrays und generiert sie, Pipe in AnglarJS (v1) (Filter genannt)

• Änderungserkennungsstrategie onPush verfügt über zwei Änderungserkennungsstrategien. Standard ist die Standardstrategie zur Änderungserkennung von Angular, bei der es sich um die oben erwähnte Dirty-Prüfung handelt (überprüfen Sie alle Werte, solange sie sich ändern). Entwickler können basierend auf dem Szenario eine effizientere Methode zur Änderungserkennung einrichten: onPush. Die onPush-Strategie bedeutet, dass die Komponente nur dann eine Änderungserkennung durchführt, wenn sich der Verweis auf die Eingabedaten ändert oder ein Ereignis ausgelöst wird.

• NgFor sollte zusammen mit der trackBy-Gleichung verwendet werden. Andernfalls aktualisiert NgFor das DOM für jedes Element in der Liste während jedes Erkennungsprozesses für fehlerhafte Werte.

Drei Möglichkeiten der Angular-Datenbindung

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

• Direkte Bindung: In den meisten Fällen ist dies die beste Methode.

• Das Ergebnis des Bindungsmethodenaufrufs: Während jedes Dirty-Value-Erkennungsprozesses muss die Klassengleichung einmal aufgerufen werden. Wenn keine besonderen Bedürfnisse bestehen, sollte diese Verwendungsart weitestgehend vermieden werden.

• Pipe-Methode: Sie ähnelt der Bindungsfunktion und die Klasse „Pipe“ zur Erkennung schmutziger Werte wird jedes Mal aufgerufen. Allerdings hat Angular die Pipe optimiert und Caching hinzugefügt. Wenn das Element beim letzten Mal gleich ist, wird das Ergebnis direkt zurückgegeben.

Weitere Optimierungstipps finden Sie in den Tipps zur Leistungsoptimierung zur Winkelbindung (Dirty Checking)

Über das Modul von Angular

Was ist das Modul von Angular?

Modul (Modul) ist ein Modul, mit dem wir Komponenten, Dienste und Rohre gruppieren können. Module entscheiden, ob andere Module Komponenten, Anweisungen usw. verwenden können, indem sie diese Elemente exportieren oder ausblenden. Jedes Modul wird mit dem @NgModule-Dekorator definiert.

Der Unterschied zwischen Root-Modul und Feature-Modul.

Jede Angular-Anwendung kann nur ein Root-Modul (Root-Modul) und ein oder mehrere Feature-Module (Feature-Modul) haben. Das Root-Modul importiert BrowserModule, während das Funktionsmodul CommonModule importiert.

Lazy-Loading von Modulen

Um die Ladegeschwindigkeit des ersten Bildschirms zu verbessern, können Sie Lazy-Loading verwenden, um nur dann zu laden, wenn auf bestimmte spezifische URLs zugegriffen wird nicht häufig verwendet.

Implementierung: Funktionsmodul normal erstellen und Routing-Konfiguration ändern. Beispiel:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

Auf diese Weise ist dieses Funktionsmodul nach der Kompilierung ein unabhängiges JS. Nur wenn der Benutzer auf die URL (~/customers) zugreift, wird dieses unabhängige JS vom Server angefordert und dann geladen und ausgeführt .

Siehe https://angular.io/guide/lazy-loading-ngmodules

Was ist eine Direktive?

Direktive wird verwendet, um einem vorhandenen Element (DOM) oder einer Komponente (Component) Verhalten hinzuzufügen.
Gleichzeitig können mehrere Anweisungen auf ein Element oder eine Komponente angewendet werden.

Der Unterschied zwischen Promise und Observable

Erstens empfiehlt die neue Version von anuglar die Verwendung von Observable (gehört zu RxJS). Zweitens können Sie für Observable-Objekte .toPromise() verwenden, um sie in Promise-Objekte umzuwandeln.

• Versprochen, ob dann aufgerufen wird oder nicht. Versprechen werden sofort ausgeführt; Observablen werden nur erstellt und ausgeführt, wenn sie aufgerufen werden (abonnieren).

• Promise gibt einen Wert zurück; Observable gibt 0 bis N Werte zurück. Der Operator, der Promise entspricht, ist also .then(), und der entsprechende Operator für Observable ist .subscribe

• Wenn Sie die Leistung von Angular verbessern möchten

• Angular ist immer noch eine Webanwendung, daher sind die allgemeinen Techniken zur Verbesserung der Webleistung universell. Für Angular gibt es einige spezielle Optimierungstechniken:

AOT-Kompilierung. Wie bereits erwähnt, kompilieren Sie nicht auf der Clientseite.

Die Anwendung wurde minimiert (hässlich und verwackelt) Unnötige Importanweisungen wurden entfernt. Sollten Reste übrig bleiben, werden diese ebenfalls beim Verpacken mit einbezogen.

Stellen Sie sicher, dass nicht verwendete Bibliotheken von Drittanbietern aus der Anwendung entfernt wurden. Das Gleiche wie oben.

Wenn das Projekt groß ist, sollten Sie Lazy Loading (Lazy Loading) in Betracht ziehen, um die Ladegeschwindigkeit der Homepage sicherzustellen.
• So aktualisieren Sie die Angular-Version
• Angular CLI bietet einen Upgrade-Befehl (ng update). Gleichzeitig gibt es auf der offiziellen Website (https://update.angular.io/) auch eine Upgrade-Anleitung. Nachdem Sie ausgewählt haben, von welcher Version aktualisiert werden soll, werden Schritt-für-Schritt-Upgrade-Befehle angezeigt. Führen Sie diese einfach direkt aus.
• Weitere Kenntnisse zum Thema Programmierung finden Sie unter:
Programmieren lernen
• ! !

Das obige ist der detaillierte Inhalt vonZusammenstellung von Angular8+-Interviewfragen: Analyse grundlegender Wissenspunkte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!