Անկյունային կոդավորման ընդհանուր խնդիրները և ինչպես դրանք շտկել Մաս 2

Այս շարքի առաջին մասում մենք քննարկեցինք Angular կոդավորման որոշ ընդհանուր խնդիրներ և դրանց լուծումները: Այս երկրորդ մասում մենք ավելի խորը կխորացնենք ավելի առաջադեմ տեխնիկայի և լավագույն փորձի մեջ՝ ձեր Անկյունային զարգացման հմտությունները հետագա զարգացնելու համար:

1. Ծույլ բեռնումը չօգտագործելը

Lazy loading-ը Angular-ում դիզայնի օրինաչափություն է, որը թույլ է տալիս բեռնել JavaScript-ի բաղադրիչները ասինխրոն կերպով, երբ որոշակի երթուղի է ակտիվանում: Սա կարող է զգալիորեն բարելավել կատարողականությունը՝ բեռնելով ձեր հավելվածի միայն անհրաժեշտ մասերը:

Լուծում. օգտագործեք Angular-ի ներկառուցված աջակցությունը ծույլ բեռնման համար: Սա ներառում է յուրաքանչյուր հատկանիշի համար առանձին մոդուլի ստեղծում և ձեր երթուղիների կազմաձևում՝ դրանք ասինխրոն բեռնելու համար:

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

2. Փոփոխությունների հայտնաբերման ռազմավարության անտեսում

Լռելյայնորեն, Angular-ն օգտագործում է ChangeDetectionStrategy.Default-ը, որը ստուգում է յուրաքանչյուր բաղադրիչ ծառի փոփոխությունները, երբ ինչ-որ բան փոխվում է: Սա կարող է հանգեցնել մեծ ծրագրերում կատարողականի խնդիրների:

Լուծում. հնարավորության դեպքում օգտագործեք ChangeDetectionStrategy.OnPush: Սա Angular-ին հրահանգում է ստուգել բաղադրիչի ներսում փոփոխությունները միայն այն դեպքում, եթե դրա մուտքային հատկությունները փոխվեն:

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {}

3. Չօգտագործել TrackBy-ը *ngFor-ով

Երբ օգտագործում եք *ngFor՝ կաղապարներում զանգվածի վրայով պտտելու համար, Angular-ը հետևում է յուրաքանչյուր տարրի ներքին օբյեկտի ID-ով: Եթե ​​զանգվածը փոխվում է, Angular-ը վերարտադրում է ամբողջ DOM ծառը: Բայց եթե օբյեկտներն ունեն եզակի id, դա կարելի է խուսափել:

Լուծում. օգտագործեք trackBy ֆունկցիան *ngFor-ում: Այս ֆունկցիան վերցնում է ինդեքսը և ընթացիկ տարրը և վերադարձնում է եզակի ID-ն:

<div *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</div>
trackByFn(index, item) {
  return item.id; // unique id corresponding to the item
}

4. Չօգտագործել Բովանդակության պրոյեկցիան

Բովանդակության պրոյեկցիան (նախկինում AngularJS-ում հայտնի է որպես ներառում) թույլ է տալիս ստեղծել բազմակի օգտագործման բաղադրիչներ՝ դրսից HTML ներարկելով:

Լուծում. օգտագործեք ‹ng-content› բաղադրիչի ձևանմուշում այն ​​տեղը նշելու համար, որտեղ պետք է գնա նախագծված բովանդակությունը:

<app-my-component>
  <div>This will be projected</div>
</app-my-component>
<!-- my-component.component.html -->
<div>
  <ng-content></ng-content>
</div>

5. Չօգտագործել TypeScript-ը իր ամբողջական պոտենցիալ TypeScript-ի համար

Լեզուն, որով գրված է Angular-ը, ապահովում է ստատիկ տիպեր: Սա կարող է օգնել շուտ հայտնաբերել սխալները, բարելավել գործիքակազմը և ձեր կոդը դարձնել ավելի ինքնափաստաթղթավորվող:

Լուծում. օգտագործեք TypeScript-ի առաջադեմ գործառույթները, ինչպիսիք են ինտերֆեյսները, տիպի պահակները և թվերը: Նաև մտածեք TSLint-ի օգտագործման մասին՝ կոդավորման ստանդարտները կիրառելու համար:

interface User {
  name: string;
  age: number;
}

function isUser(user: any): user is User {
  return typeof user.name === 'string' && typeof user.age === 'number';
}

Խուսափելով Angular կոդավորման առաջադեմ խնդիրներից՝ դուք կարող եք գրել ավելի արդյունավետ, պահպանվող և ամուր կոդ: Մնացեք Երրորդ մասի համար, որտեղ մենք կուսումնասիրենք նույնիսկ ավելի առաջադեմ Angular տեխնիկան:

Ուրախ կոդավորում: