Bonjour, Habr!Aujourd'hui, je voulais aborder le sujet du code correct en travaillant avec Angular. Ces recommandations rendront votre code plus efficace dans la pratique et me permettront d'être moins exigeant sur le code junior.
1. Évitez la logique dans les modèles
Et la première chose que je veux mentionner est la logique dans les modèles. Si vous avez une sorte de logique dans vos modèles, même si c'est simple &&, il est utile de l'extraire dans votre composant. La présence de logique dans le modèle signifie qu'il est impossible de le tester et qu'il est donc plus sujet aux erreurs lors du changement de code du modèle.
<p *ngIf="isShow"> Example </p>
public ngOnInit(): void { this.isShow = true; }
2. Lignes "sûres"
Supposons que vous ayez une variable de type chaîne qui ne peut avoir qu'un ensemble spécifique de valeurs. Au lieu de le déclarer comme un type de chaîne, vous pouvez déclarer cette liste même de valeurs possibles comme un type.
private value: 'One' | 'Two'; if (isShow) { value = 'One'; } else { value = 'Two' }
En déclarant le type d'une variable de cette façon, nous pouvons éviter les erreurs lors de l'écriture de code au moment de la compilation plutôt qu'au moment de l'exécution.
3. La règle des méthodes longues
Voici une démo de code redondante. Il est important de comprendre que personne n'aime les méthodes longues.
Les méthodes longues indiquent généralement qu'elles font trop de choses. Il est possible que la méthode elle-même fasse une chose, mais à l'intérieur, il y a plusieurs autres opérations qui peuvent être placées dans une autre méthode qui a son propre objectif logique. Les méthodes longues sont difficiles à lire, à comprendre et à maintenir. Ils sont également sujets aux erreurs, car changer une chose peut affecter beaucoup d'autres choses dans cette méthode. Je suis sûr, pas seulement pour moi, que de telles méthodes rendent le refactoring (qui est la clé de toute application) plus difficile qu'il ne pourrait l'être.
4. Duplication de code
Si vous avez du code qui se répète à différents endroits du projet. Extrayez le code extensible dans une méthode distincte et utilisez-le à la place du code extensible.
Le problème avec la duplication de code est que si nous voulons apporter des modifications à la logique de ce code, nous devons le faire à plusieurs endroits. Cela rend difficile la maintenance du code, ce qui augmente le risque d'erreurs. Il faut également plus de temps pour apporter des modifications à la logique. Avec moins de code en double, l'application sera plus rapide.
5. trackBy
Diluons la liste des subtilités du travail avec Angular.
Souvent utilisé par ngFor pour parcourir un tableau dans des modèles, il est souvent privé dans la pratique d'une fonction telle que trackBy. Utilisez-le pour travailler avec ngFor. Grâce à une telle bagatelle, vous recevrez un identifiant unique pour chaque élément.
<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
trackByFn(index, item) { return item.id;
Lorsque le tableau change, Angular réaffiche tout l'arborescence DOM. Mais si vous utilisez trackBy, Angular saura quel élément a changé et ne changera que le DOM pour cet élément particulier.
6. Abonnez-vous dans le modèle
Faites attention à l'exemple de souscription au composant observé:
<p>{{ text }}</p>
blablaObservable .pipe( map(value => value.item), takeUntil(this._destroyed$) ) .subscribe(item => this.text = item);
Maintenant, vous avez vu comment ne pas le faire. Ce n'est pas que je vous ai exhorté à suivre strictement mes recommandations, c'est juste que les développeurs ne se plongent pas souvent dans ce qui se passe dans leur code. Alors pourquoi est-ce mauvais et comment bien faire? Le fait est que nous courons le risque de se désabonner accidentellement d'un abonnement à un composant, ce qui peut entraîner une fuite de mémoire. La meilleure option consiste à utiliser un abonnement dans le modèle lui-même:
<p>{{ text$ | async }}</p>
this.text$ = blablaObservable .pipe( map(value => value.item) );
Grâce à async, nous n'avons pas à nous soucier de la désinscription, car il le fait automatiquement, ce qui simplifie le code, éliminant ainsi la nécessité de gérer manuellement les abonnements. Il réduit également le risque de se désabonner accidentellement du composant que j'ai mentionné ci-dessus.
7. Chargement paresseux
Dans la mesure du possible, utilisez le chargement de module paresseux dans votre application angulaire. Le chargement différé est lorsque vous téléchargez quelque chose uniquement lorsqu'il est utilisé, par exemple, le chargement d'un composant uniquement lorsque vous avez besoin de le voir. Cela réduira la taille de l'application téléchargeable et peut améliorer le temps de chargement de l'application sans charger les modules qui ne sont pas utilisés.
// app.routing.ts
{ path: 'dashboard', loadChildren: 'lazy-load.module#DashboardModule' }
8. Abonnement à l'intérieur de l'abonnement
Parfois, vous pouvez avoir besoin de valeurs de plus d'un observable pour terminer une action. Dans ce cas, évitez de vous abonner à un observable dans le bloc d'abonnement d'un autre observable. Utilisez plutôt les opérateurs de chaînage appropriés. Les instructions en chaîne sont exécutées sur des observables à partir de la déclaration devant eux. Certains opérateurs de chaîne, tels que withLatestFrom, combineLatest, etc ...
À:
oneObservable$.pipe( take(1) ) .subscribe(oneValue => { twoObservable$.pipe( take(1) ) .subscribe(twoValue => { console.log([oneValue, twoValue].join(', ')); }); });
Après:
oneObservable$.pipe( withLatestFrom(twoObservable$), first() ) .subscribe(([oneValue, twoValue]) => { console.log([oneValue, twoValue].join(', ')); });
9. Mise en cache
Lorsque vous faites des demandes à l'API, les réponses de certains d'entre eux ne changent souvent pas. Dans ces cas, vous pouvez ajouter un mécanisme de mise en cache et enregistrer la valeur à partir de l'API. Lorsque la demande doit être répétée pour la même API, vérifiez si elle a une valeur dans le cache et, si c'est le cas, utilisez-la. Sinon, effectuez un appel API et mettez en cache le résultat. Si nécessaire, vous pouvez entrer l'heure du cache, où vous pouvez vérifier la dernière fois et décider d'appeler l'API. Avoir un mécanisme de mise en cache évite les demandes d'API indésirables. Grâce à cet évitement des demandes en double, la vitesse d'application est améliorée, car nous n'avons pas besoin d'attendre une réponse et de télécharger ainsi les mêmes informations encore et encore.
10. Écraser en composants réutilisables
Divisez les gros composants en plus petits. Simplifiez ces composants et rendez-les aussi stupides que possible, car cela les fera fonctionner dans plus de scénarios. La création d'un tel composant signifie que le composant n'a pas de logique particulière en soi et fonctionne uniquement sur la base des entrées et sorties qui lui sont fournies. En règle générale, le dernier descendant de l'arborescence des composants sera le plus simple de tous. Cela se fait en fonction de la facilité d'utilisation de ces composants, ces composants sont moins susceptibles de générer des erreurs. Les composants réutilisables réduisent également la duplication de code, ce qui facilite la maintenance et les modifications.
Souhaitez-vous continuer une telle chronique?