Hallo Habr!Heute wollte ich das Thema des richtigen Codes bei der Arbeit mit Angular ansprechen. Diese Empfehlungen machen Ihren Code in der Praxis effektiver und ermöglichen es mir, weniger Anforderungen an den Junior-Code zu stellen.
1. Vermeiden Sie Logik in Mustern
Und das erste, was ich erwähnen möchte, ist die Logik in den Vorlagen. Wenn Ihre Vorlagen eine Logik enthalten, auch wenn diese einfach ist, ist es hilfreich, sie in Ihre Komponente zu extrahieren. Das Vorhandensein von Logik in der Vorlage bedeutet, dass es unmöglich ist, sie zu testen, und daher ist sie anfälliger für Fehler beim Ändern des Vorlagencodes.
<p *ngIf="isShow"> Example </p>
public ngOnInit(): void { this.isShow = true; }
2. "Sichere" Leitungen
Angenommen, Sie haben eine Variable vom Typ string, die nur einen bestimmten Satz von Werten haben kann. Anstatt es als Zeichenfolgentyp zu deklarieren, können Sie genau diese Liste möglicher Werte als Typ deklarieren.
private value: 'One' | 'Two'; if (isShow) { value = 'One'; } else { value = 'Two' }
Wenn Sie den Typ einer Variablen auf diese Weise deklarieren, können Sie Fehler beim Schreiben von Code zur Kompilierungszeit und nicht zur Laufzeit vermeiden.
3. Die Regel der langen Methoden
Hier ist eine Code-Demo überflüssig. Es ist wichtig zu verstehen, dass niemand lange Methoden mag.
Lange Methoden weisen normalerweise darauf hin, dass sie zu viele Dinge tun. Vielleicht macht die Methode selbst eine Sache, aber in ihr gibt es mehrere andere Operationen, die in eine andere eigene Methode eingefügt werden können, um ihren logischen Zweck zu verfolgen. Lange Methoden sind schwer zu lesen, zu verstehen und zu pflegen. Sie sind auch fehleranfällig, da das Ändern einer Sache viele andere Dinge bei dieser Methode beeinflussen kann. Ich bin mir sicher, dass solche Methoden nicht nur für mich das Refactoring (das der Schlüssel in jeder Anwendung ist) schwieriger machen, als es sein könnte.
4. Codeduplizierung
Wenn Sie Code haben, der sich an verschiedenen Stellen im Projekt wiederholt. Extrahieren Sie den sich wiederholenden Code in eine separate Methode und verwenden Sie ihn anstelle des sich wiederholenden Codes.
Das Problem bei der Codeduplizierung besteht darin, dass wir Änderungen an der Logik dieses Codes an mehreren Stellen vornehmen müssen. Dies macht es schwierig, Code zu pflegen, was wiederum das Risiko von Fehlern erhöht. Es dauert auch länger, Änderungen an der Logik vorzunehmen. Mit weniger doppeltem Code ist die Anwendung schneller.
5. trackBy
Lassen Sie uns die Liste der Feinheiten der Arbeit mit Angular verwässern.
Wird häufig von ngFor verwendet, um ein Array in Vorlagen zu durchlaufen, wird es in der Praxis häufig einer Funktion wie trackBy beraubt. Verwenden Sie es bei der Arbeit mit ngFor. Dank einer solchen Kleinigkeit erhalten Sie für jedes Element eine eindeutige Kennung.
<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
trackByFn(index, item) { return item.id;
Wenn sich das Array ändert, zeigt Angular den gesamten DOM-Baum erneut an. Wenn Sie jedoch trackBy verwenden, weiß Angular, welches Element sich geändert hat, und ändert nur das DOM für dieses bestimmte Element.
6. Abonnieren Sie die Vorlage
Beachten Sie das Beispiel für das Abonnieren der beobachteten Komponente:
<p>{{ text }}</p>
blablaObservable .pipe( map(value => value.item), takeUntil(this._destroyed$) ) .subscribe(item => this.text = item);
Jetzt haben Sie gesehen, wie man es nicht macht. Es ist nicht so, dass ich Sie aufgefordert hätte, meine Empfehlungen strikt zu befolgen, sondern nur, dass Entwickler häufig nicht darauf eingehen, was in ihrem Code geschieht. Warum ist es schlecht und wie macht man es gut? Tatsache ist, dass wir das Risiko eingehen, uns versehentlich von einem Abonnement in einer Komponente abzumelden, was zu einem Speicherverlust führen kann. Am besten verwenden Sie ein Abonnement in der Vorlage selbst:
<p>{{ text$ | async }}</p>
this.text$ = blablaObservable .pipe( map(value => value.item) );
Dank Async müssen wir uns nicht um das Abbestellen kümmern, da dies automatisch erfolgt. Dies vereinfacht den Code und macht die manuelle Verwaltung von Abonnements überflüssig. Es verringert auch das Risiko, sich versehentlich von der oben genannten Komponente abzumelden.
7. Faules Laden
Verwenden Sie nach Möglichkeit das verzögerte Laden von Modulen in Ihrer Angular-Anwendung. Beim verzögerten Laden wird etwas nur heruntergeladen, wenn es verwendet wird. Beispielsweise wird eine Komponente nur geladen, wenn Sie sie sehen müssen. Dies reduziert die Größe der herunterladbaren Anwendung und kann die Ladezeit der Anwendung verbessern, ohne nicht verwendete Module zu laden.
// app.routing.ts
{ path: 'dashboard', loadChildren: 'lazy-load.module#DashboardModule' }
8. Abonnement innerhalb des Abonnements
Manchmal benötigen Sie möglicherweise Werte von mehr als einer beobachtbaren Größe, um eine Aktion abzuschließen. Vermeiden Sie in diesem Fall das Abonnieren eines Observable im Abonnementblock eines anderen Observable. Verwenden Sie stattdessen die entsprechenden Verkettungsoperatoren. Kettenanweisungen werden auf Observablen aus der Anweisung vor ihnen ausgeführt. Einige Kettenoperatoren, z. B. withLatestFrom, combinLatest usw.
An:
oneObservable$.pipe( take(1) ) .subscribe(oneValue => { twoObservable$.pipe( take(1) ) .subscribe(twoValue => { console.log([oneValue, twoValue].join(', ')); }); });
Nachher:
oneObservable$.pipe( withLatestFrom(twoObservable$), first() ) .subscribe(([oneValue, twoValue]) => { console.log([oneValue, twoValue].join(', ')); });
9. Caching
Wenn Sie Anforderungen an die API stellen, ändern sich die Antworten einiger von ihnen häufig nicht. In diesen Fällen können Sie einen Caching-Mechanismus hinzufügen und den Wert aus der API speichern. Wenn die Anforderung an dieselbe API wiederholt werden soll, überprüfen Sie, ob sie einen Wert im Cache enthält, und verwenden Sie ihn gegebenenfalls. Andernfalls führen Sie einen API-Aufruf durch und speichern Sie das Ergebnis im Cache. Bei Bedarf können Sie die Cache-Zeit eingeben, in der Sie überprüfen können, wann sie zuletzt verwendet wurde, und entscheiden, ob die API aufgerufen werden soll. Ein Caching-Mechanismus vermeidet unerwünschte API-Anforderungen. Durch diese Vermeidung doppelter Anforderungen wird die Anwendungsgeschwindigkeit verbessert, da wir nicht auf eine Antwort warten müssen und dadurch immer wieder dieselben Informationen herunterladen müssen.
10. Zerkleinern in wiederverwendbare Komponenten
Teilen Sie große Komponenten in kleinere. Vereinfachen Sie solche Komponenten und machen Sie sie so dumm wie möglich, da sie dadurch in mehr Szenarien funktionieren. Die Erstellung einer solchen Komponente bedeutet, dass die Komponente keine spezielle Logik an sich hat und ausschließlich auf der Grundlage der ihr zur Verfügung gestellten Ein- und Ausgänge arbeitet. In der Regel ist der letzte Nachkomme im Komponentenbaum der einfachste von allen. Dies erfolgt auf der Grundlage der Benutzerfreundlichkeit solcher Komponenten. Es ist weniger wahrscheinlich, dass solche Komponenten Fehler erhalten. Wiederverwendbare Komponenten reduzieren auch die Codeduplizierung, was die Wartung und Durchführung von Änderungen erleichtert.
Möchten Sie eine solche Kolumne fortsetzen?