Burchlarni toza va yaxshi bajaradigan eng yaxshi amaliyotlar

Men ikki yildan beri Trade Me (Yangi Zelandiya) da keng burchakli dastur asosida ishlamoqdaman. So'nggi bir necha yil ichida bizning jamoamiz dasturni kodlash standartlari va ishlash jihatidan ularni eng yaxshi holatga keltirish uchun yaxshilamoqda.

Ushbu maqolada biz dasturimizda foydalanadigan amallar tavsiflangan va Angular, Typcriptcript, RxJs va @ ngrx / store-ga tegishli. Ilovani yanada toza qilishga yordam berish uchun biz ba'zi umumiy kodlash yo'riqlarini ko'rib chiqamiz.

1) trackBy

NgFor-ni shablonlarda massivni aylanib o'tish uchun ishlatganda, trackBy funktsiyasidan foydalaning, u har bir element uchun o'ziga xos identifikatorni qaytaradi.

Nima uchun?

Bir qator o'zgarganda, Burchak butun DOM daraxtini qayta joylashtiradi. Ammo agar siz trackBy-dan foydalansangiz, Angular qaysi element o'zgarganligini bilib oladi va faqat o'sha element uchun DOM-ni o'zgartiradi.

Bu haqida batafsil tushuntirish uchun Netanel Basalning ushbu maqolasiga murojaat qiling.

Oldin

 {{element}} 

Keyin

// shablonda

 {{item}} 

// tarkibiy qismda

trackByFn (indeks, band) {
   return item.id; // mos keladigan noyob id
}

2) const vs let

O'zgaruvchilarni e'lon qilganda, qiymat qayta tayinlanmaganida const dan foydalaning.

Nima uchun?

Kerakli hollarda let va const-dan foydalanish deklaratsiyalarning maqsadini aniqroq qiladi. Bundan tashqari, bu qiymatni kompilyatsiya qilish vaqtidagi xato bilan tasodifan qayta tayinlashda muammolarni aniqlashda yordam beradi. Shuningdek, kodni o'qishni yaxshilashga yordam beradi.

Oldin

let car = 'kulgili mashina';

ruxsat berish myCar = `Mening $ {mashina} ';
sizning $ {avtomobilingiz} ga ruxsat bering;

if (iHaveMoreThanOneCar) {
   myCar = `$ {myCar} s`;
}

if (sizHoreMoreThanOneCar) {
   yourCar = `$ {youCar} s`;
}

Keyin

// avtomobilning qiymati qayta tayinlanmagan, shuning uchun uni const qilib qo'yishimiz mumkin
const car = 'kulgili mashina';

ruxsat berish myCar = `Mening $ {mashina} ';
sizning $ {avtomobilingiz} ga ruxsat bering;

if (iHaveMoreThanOneCar) {
   myCar = `$ {myCar} s`;
}

if (sizHoreMoreThanOneCar) {
   yourCar = `$ {youCar} s`;
}

3) Quvur bilan ishlaydigan operatorlar

RxJs operatorlaridan foydalanganda quvurli operatorlardan foydalaning.

Nima uchun?

Quvur o'tkazadigan operatorlar bu daraxtlarni silkitadigan narsa, ular import qilinganida faqat bajarilishi kerak bo'lgan kodni o'z ichiga oladi.

Bu shuningdek fayllarda foydalanilmagan operatorlarni aniqlashni osonlashtiradi.

Izoh: Buning uchun 5.5+ versiya kerak.

Oldin

'rxjs / add / operator / map' ni import qilish;
import 'rxjs / add / operator / take';

iAmAnObservable
    .map (value => value.item)
    .tekish (1);

Keyin

'rxjs / operatorlar' dan import {map, take};

iAmAnObservable
    .quvur(
       xarita (value => value.item),
       olmoq (1)
     );

4) Izolate API hacklari

Hamma API-lar ham o'q bilan tasdiqlanmaydi - ba'zan biz API-dagi xatolarni tuzatish uchun kodga ba'zi mantiqlarni qo'shishimiz kerak bo'ladi. Kerakli tarkibiy qismlarda bo'shliqlar mavjud bo'lishining o'rniga, ularni bir joyda - masalan, xizmatda izolyatsiya qilish va xizmatdan tarkibiy qismdan foydalanish yaxshiroqdir.

Nima uchun?

Bu xakerlarni "APIga yaqinroq" saqlashga yordam beradi, shuning uchun tarmoq so'rovi iloji boricha yaqinroq bo'ladi. Shunday qilib, sizning kodingizning kamroq qismi buzilmagan kod bilan shug'ullanadi. Bundan tashqari, bu barcha uyalar yashaydigan joy va ularni topish osonroq. Xatolarni API-larda tuzatayotganda, ularni kod bazasida tarqalishi mumkin bo'lgan hacklarni qidirishdan ko'ra ularni bitta faylda izlash osonroq.

Bundan tashqari, siz TODO-ga o'xshash API_FIX kabi maxsus teglarni yaratishingiz mumkin va tuzatishlarni topish osonroq bo'ladi.

5) shablonga obuna bo'lish

Komponentlardan kuzatiladigan narsalarga obuna bo'lmang va shablondan kuzatiladigan obunalarni amalga oshiring.

Nima uchun?

async quvurlari avtomatik ravishda obunani bekor qiladi va obunani qo'lda boshqarish zaruriyatini bartaraf qilib, kodni soddalashtiradi. Shuningdek, bu xotira buzilishiga olib keladigan tarkibiy qismga obunani bekor qilishni unutishni xavfini kamaytiradi. Obunani bekor qilinishini aniqlash uchun tint qoidasi yordamida ushbu xavfni kamaytirish mumkin.

Bu shuningdek tarkibiy qismlarning holati va xatolarni kiritishni to'xtatadi, bu erda obunadan tashqari ma'lumotlar mutatsiyaga uchraydi.

Oldin

// shablon

 {{textToDisplay}} 

// komponent

iAmAnObservable
    .quvur(
       xarita (value => value.item),
       takeUntil (this._destroyed $)
     )
    obunani bekor qilish (element => this.textToDisplay = element);

Keyin

// shablon

 {{textToDisplay $ | async}} 

// komponent

this.textToDisplay $ = iAmAnObservable
    .quvur(
       xarita (value => value.item)
     );

6) Obunalarni tozalash

Kuzatiladigan narsalarga obuna bo'lganda, take, takeUntil va hk kabi operatorlardan foydalangan holda har doim tegishli ravishda obunani bekor qilganingizga ishonch hosil qiling.

Nima uchun?

Kuzatiladigan obunalarni bekor qilmaslik, istalmagan xotira buzilishiga olib keladi, chunki kuzatilayotgan oqim o'chirib qo'yilishi mumkin, hatto komponent yo'q qilinganidan / foydalanuvchi boshqa sahifaga o'tgandan keyin ham.

Bundan ham yaxshisi, obunani bekor qilish mumkin bo'lgan kuzatuvlarni aniqlash uchun lint qoidasini tuzing.

Oldin

iAmAnObservable
    .quvur(
       xarita (value => value.item)
     )
    obunani bekor qilish (element => this.textToDisplay = element);

Keyin

O'zgarishlarni tinglash uchun takeUntil-dan foydalanib, boshqa bir qiymat paydo bo'lguncha:

xususiy _destroyed $ = new Subject ();

ommaviy ngOnInit (): void {
    iAmAnObservable
    .quvur(
       xarita (value => value.item)
      // Biz komponentni yo'q qilgunga qadar iAmAnObservable-ni tinglashni xohlaymiz,
       takeUntil (this._destroyed $)
     )
    obunani bekor qilish (element => this.textToDisplay = element);
}

jamoat ngOnDestroy (): void {
    $.next () ni yo'q qildi.
    this._destroy $ .complete ();
}

Bu kabi shaxsiy mavzudan foydalanish, tarkibiy qismdagi ko'plab kuzatiladigan obunalarni bekor qilishni boshqarish uchun namuna.

Siz foydalanadigan faqat kuzatiladigan birinchi qiymatni istaganingizda:

iAmAnObservable
    .quvur(
       xarita (value => value.item),
       olmoq (1),
       takeUntil (this._destroyed $)
    )
    obunani bekor qilish (element => this.textToDisplay = element);

TakeUntil-dan foydalanishga e'tibor bering. Buning sababi, tarkibiy qism yo'q qilinishidan oldin obuna qiymati qabul qilinmasa, xotira tushishining oldini olishdir. Bu erda takeUntil qilinmasa, obuna birinchi qiymatni olmaguncha hanuzgacha saqlanib qoladi, lekin komponent allaqachon yo'q bo'lib ketganligi sababli, u hech qachon qiymatga ega bo'lmaydi - bu xotira buzilishiga olib keladi.

7) Tegishli operatorlardan foydalaning

O'zingizning kuzatadigan narsalaringiz bilan tekislash operatorlaridan foydalanganda vaziyat uchun tegishli operatordan foydalaning.

switchMap: yangi emissiya bo'lganda oldingi emissiyalarni e'tiborsiz qoldirmoqchi bo'lganingizda

mergeMap: barcha chiqindilarni bir vaqtning o'zida boshqarishni istaganingizda

concatMap: chiqindilarni birin-ketin qayta ishlashni xohlaganingizda

exhaustMap: oldingi emissiyani qayta ishlash paytida barcha yangi chiqindilarni bekor qilmoqchi bo'lganingizda

Bu haqida batafsil tushuntirish uchun, Nikolay Jeymsonning ushbu maqolasiga murojaat qiling.

Nima uchun?

Agar bitta effektga erishish uchun bir nechta boshqa operatorlarni birlashtirishning o'rniga iloji bo'lsa, bitta operatordan foydalanish, foydalanuvchiga kamroq kod yuborilishiga olib kelishi mumkin. Noto'g'ri operatorlardan foydalanish nomaqbul xatti-harakatlarga olib kelishi mumkin, chunki turli xil operatorlar kuzatiladigan narsalarni turli usullar bilan ishlaydi.

8) Yolg'on yuk

Iloji bo'lsa, modullarni o'zingizning burchakli dasturingizda yuklashga dangasa bo'lishga harakat qiling. Yolg'on yuklama - bu biror narsa faqat ishlatilayotgan paytda yuklanish, masalan, komponentni faqat ko'rish kerak bo'lganda yuklash.

Nima uchun?

Bu yuklanadigan dastur hajmini kamaytiradi va foydalanilmayotgan modullarni yuklamasdan dasturni yuklash vaqtini yaxshilaydi.

Oldin

// app.routing.ts

{yo'l: 'dangasa emas', tarkibiy qism: NotLazyLoadedComponent}

Keyin

// app.routing.ts

{
  yo'l: "dangasa yuk",
  loadChildren: 'dangasa-load.module # LazyLoadModule'
}

// dangasa-load.module.ts

"NgModule}" ni "@ burchak / yadro" dan import qilish;
import qilish {CommonModule} dan '@ burchak / common';
'RouterModule} ni' @ burchak / router 'dan import qilish;
'./lazy-load.component' dan {LazyLoadComponent} ni import qilish;

@ NgModule ({
  import: [
    CommonModule,
    RouterModule.forChild ([
         {
             yo'l: '',
             komponent: LazyLoadComponent
         }
    ])
  ],
  deklaratsiyalar: [
    LazyLoadComponent
  ]
})
LazyModule {} eksport klassi

9) Obunalar ichida obunalarni saqlamang

Ba'zan siz biron bir amalni bajarish uchun kuzatilishi mumkin bo'lgan bir nechta qiymatlarni talab qilishingiz mumkin. Bunday holda obuna bo'lishdan boshqasiga obuna bo'lishdan saqlaning. Buning o'rniga tegishli zanjirli operatorlardan foydalaning. Zanjirli operatorlar o'zlaridan oldingi operator kuzatuvlarida ishlaydi. Ba'zi zanjirli operatorlar: withLatestFrom, CombLatest va boshqalar.

Oldin

firstObservable $ .pipe (
   olmoq (1)
)
obunani bekor qilish (firstValue => {
    SecondObservable $ .pipe (
        olmoq (1)
    )
    . obunani bekor qilish (SecondValue => {
        console.log (`Birlashtirilgan qiymatlar: $ {firstValue} va $ {SecondValue}`);
    });
});

Keyin

firstObservable $ .pipe (
    LatestFrom (SecondObservable $) bilan,
    birinchi ()
)
.subsubs (([birinchiValue, SecondValue]) => {
    console.log (`Birlashtirilgan qiymatlar: $ {firstValue} va $ {SecondValue}`);
});

Nima uchun?

Kodni hidlash / o'qish qulayligi / murakkabligi: RxJ-larni to'liq ishlatmaslik, ishlab chiqaruvchi RxJs API yuzasi maydoni bilan tanish emasligini anglatadi.

Ishlash: Agar kuzatiladigan narsalar sovuq bo'lsa, u birinchi bo'lib kuzatiladi, obuna bo'lishini kuting, keyin ikkinchi kuzatuv ishini boshlang. Agar bu tarmoq so'rovlari bo'lsa, u sinxron / sharsharalar sifatida ko'rsatiladi.

10) har qanday narsadan qoching; hamma narsani yozing;

Doimiy ravishda o'zgaruvchini yoki turg'unligini har doimgidan boshqasini e'lon qiling.

Nima uchun?

O'zgaruvchilarni yoki turg'unlikni Typecript-da yozmasdan e'lon qilganda, o'zgaruvchini / doimiyni kiritish unga tayinlangan qiymat bo'yicha olib tashlanadi. Bu kutilmagan muammolarni keltirib chiqaradi. Bitta klassik misol:

const x = 1;
const y = 'a';
const z = x + y;

console.log (`Z qiymati: $ {z} '

// Chiqish
Z qiymati 1a

Agar siz y sonini ko'payishini kutsangiz, bu sizga keraksiz muammolarni keltirib chiqarishi mumkin. O'zgaruvchilarni tegishli ravishda kiritish orqali ushbu muammolarni oldini olish mumkin.

const x: soni = 1;
const y: raqam = 'a';
const z: raqam = x + y;

// Bu kompilyatsiya xatosini aytadi:

"" "" "Raqamni terish uchun tayinlash mumkin emas.

const y: raqam

Shunday qilib, biz etishmayotgan turlarning xatolaridan qochishimiz mumkin.

Sizning arizangizda yaxshi yozuvlarga ega bo'lishning yana bir afzalligi shundaki, bu qayta ishlashni oson va xavfsiz qiladi.

Ushbu misolni ko'rib chiqing:

ommaviy ngOnInit (): void {
    ruxsat berish myFlashObject = {
        ism: 'Mening ajoyib ismim',
        yosh: "Mening salqin asrim",
        loc: 'Mening ajoyib joyim'
    }
    this.processObject (myFlashObject);
}

public processObject (myObject: har qanday): void {
    console.log (`Ism: $ {myObject.name}`);
    console.log (`Yosh: $ {myObject.age}`);
    console.log (`Joylashuv: $ {myObject.loc}`);
}

// Chiqish
Ism: Mening ajoyib ismim
Yosh: Mening ajoyib yoshim
Joylashuv: Mening ajoyib joyim

Aytaylik, biz mulk xususiyatini myFlashObject-da joylashuvga o'zgartirmoqchimiz:

ommaviy ngOnInit (): void {
    ruxsat berish myFlashObject = {
        ism: 'Mening ajoyib ismim',
        yosh: "Mening salqin asrim",
        manzil: 'Mening ajoyib joyim'
    }
    this.processObject (myFlashObject);
}

public processObject (myObject: har qanday): void {
    console.log (`Ism: $ {myObject.name}`);
    console.log (`Yosh: $ {myObject.age}`);
    console.log (`Joylashuv: $ {myObject.loc}`);
}

// Chiqish
Ism: Mening ajoyib ismim
Yosh: Mening ajoyib yoshim
Joylashuv: aniqlanmagan

Agar bizda myFlashObject-da yozish imkoniyati bo'lmasa, u myFlashObject-dagi xususiyat haqiqiy emas deb emas, balki aniqlanmagan deb o'ylaydi.

Agar bizda myFlashObject uchun terish bo'lsa, quyida ko'rsatilgandek kompilyatsiya qilish vaqtining xatosi yuzaga keladi:

turi FlashObject = {
    nomi: satr,
    yosh: tor,
    manzil: satr
}

ommaviy ngOnInit (): void {
    ruxsat berish myFlashObject: FlashObject = {
        ism: 'Mening ajoyib ismim',
        yosh: "Mening salqin asrim",
        // Kompilyatsiya xatosi
        '{Name: string; yozing; yosh: tor; loc: satr; '' FlashObjectType 'turini tayinlash mumkin emas.
        Ob'ekt tom ma'noda faqat ma'lum xususiyatlarni ko'rsatishi mumkin, va "LOC" 'FlashObjectType' turida mavjud emas.
        loc: 'Mening ajoyib joyim'
    }
    this.processObject (myFlashObject);
}

public processObject (myObject: FlashObject): void {
    console.log (`Ism: $ {myObject.name}`);
    console.log (`Yosh: $ {myObject.age}`)
    // Kompilyatsiya xatosi
    'LOC' xususiyati 'FlashObjectType' turida mavjud emas.
    console.log (`Joylashuv: $ {myObject.loc}`);
}

Agar siz yangi loyihani boshlamoqchi bo'lsangiz, qat'iy belgilashga arziydi: tsconfig.json faylida barcha qat'iy tekshirish usullarini yoqish uchun to'g'ri.

11) Lint qoidalaridan foydalaning

tslint-da kodlar bazasida ma'lum qoidalarni bajarish uchun o'zingizning tslint.json-da sozlashingiz mumkin bo'lgan "yo'q", "sehrli raqamlar", "konsol" va boshqalar kabi turli xil variantlar mavjud.

Nima uchun?

Tartibga solingan qoidalarga rioya qilish, siz bo'lmasligi kerak bo'lgan ishni qilayotganda, sizda xato bo'ladi. Bu sizning arizangizdagi izchillikni va o'qish qulayligini ta'minlaydi. Iltimos, sozlashingiz mumkin bo'lgan qo'shimcha qoidalar uchun bu yerga murojaat qiling.

Ba'zi lint qoidalari hatto xatolarni hal qilish uchun tuzatishlar bilan birga keladi. Agar siz o'zingizning shaxsiy lint qoidangizni sozlamoqchi bo'lsangiz, buni ham qilishingiz mumkin. Iltimos, TSQuery-dan foydalanib, o'zingizning shaxsiy chiziq qoidalaringizni qanday yozishni Kreyg Spensning ushbu maqolasiga qarang.

Oldin

ommaviy ngOnInit (): void {
    console.log ('Men yaramas konsol jurnalining xabariman');
    console.warn ('Men yaramas konsol haqida ogohlantiruvchi xabarman');
    console.error ('Men qo'pol konsol haqida xato xabariman');
}

// Chiqish
Xatolar yo'q, konsol oynasida quyidagilarni bosib chiqaradi:
Men yaramas konsol xabariman
Men yaramas konsol haqida ogohlantiruvchi xabarman
Men yaramas konsol xato xabariman

Keyin

// tslint.json
{
    "qoidalar": {
        .......
        "konsolsiz": [
             rost,
             "log", // hech qanday konsol.log ruxsat berilmagan
             "ogohlantirish" // hech qanday konsol yo'q
        ]
   }
}

// ..component.ts

ommaviy ngOnInit (): void {
    console.log ('Men yaramas konsol jurnalining xabariman');
    console.warn ('Men yaramas konsol haqida ogohlantiruvchi xabarman');
    console.error ('Men qo'pol konsol haqida xato xabariman');
}

// Chiqish
Console.log va console.warn bayonotlari uchun chiziq xatolari va console.error uchun xato, chunki bu konfiguratsiyada aytilmagan.

"Console.log" ga qo'ng'iroq qilish mumkin emas.
"Console.warn" ga qo'ng'iroq qilish mumkin emas.

12) Kichik qayta ishlatiladigan komponentlar

Qismda qayta ishlatilishi mumkin bo'lgan qismlarni ajratib oling va uni yangisiga aylantiring. Qismni iloji boricha soqov qilib qo'ying, chunki bu ko'proq stsenariylarda ishlashga imkon beradi. Komponentni soqov qilish bu tarkibiy qismda hech qanday mantiq yo'qligini va faqat unga kiritilgan kirish va chiqishlarga asoslangan holda ish tutishni anglatadi.

Umumiy qoidaga ko'ra, tarkibiy qism daraxtidagi so'nggi bola barchaning eng soqovi bo'ladi.

Nima uchun?

Qayta ishlatiladigan komponentlar kodning takrorlanishini kamaytiradi, shuning uchun ularni saqlash va o'zgartirishni osonlashtiradi.

Soqov tarkibiy qismlari sodda, shuning uchun ularda xato ehtimoli kamroq. Soqov tarkibiy qismlari sizni ommaviy API tarkibiy qismi haqida o'ylashni qiyinlashtiradi va aralash tashvishlarni yo'q qilishga yordam beradi.

13) Komponentlar faqat displey mantig'i bilan shug'ullanishi kerak

Imkoniyat bo'lsa, tarkibiy qismingizda displey mantig'idan boshqa biron bir mantiqqa yo'l qo'ymang va komponentni faqat displey mantig'iga bag'ishlang.

Nima uchun?

Komponentlar taqdimot uchun mo'ljallangan va tomosha nima qilish kerakligini boshqaradi. Har qanday biznes mantiqini, kerak bo'lganda, biznes mantig'ini ko'rish mantig'idan ajratib, o'z usullariga / xizmatlariga ajratib olish kerak.

Xizmat mantiqiyligi odatda xizmatga chiqarilganda testlarni birlashtirish osonroq bo'ladi va boshqa mantiqiy komponentlar tomonidan qayta ishlatilishi mumkin.

14) Uzoq usullardan qoching

Uzoq usullar, odatda, ular juda ko'p ishlarni qilishayotganligini ko'rsatadi. Yagona javobgarlik tamoyilidan foydalanishga harakat qiling. Umuman olganda usulning o'zi bitta narsani bajarishi mumkin, ammo uning ichida bir nechta boshqa operatsiyalar mavjud. Biz ushbu usullarni o'z usullariga ajratib olamiz va ularni har birini bitta narsani bajarishga majburlaymiz va ularning o'rniga foydalanamiz.

Nima uchun?

Uzoq usullarni o'qish, tushunish va saqlash qiyin. Ular, shuningdek, xatolarga moyil bo'lishi mumkin, chunki bitta usulni o'zgartirish bu usulda boshqa ko'p narsalarga ta'sir qilishi mumkin. Ular, shuningdek, qayta ishlashni qiyinlashtiradi (bu har qanday dastur uchun muhim narsa).

Ba'zan bu "sekomokratik murakkablik" sifatida baholanadi. O'zingizning loyihangizda xatolarga yo'l qo'ymaslik va kod hidini aniqlash va xizmat ko'rsatish qobiliyatiga oid muammolarni aniqlash uchun foydalanishingiz mumkin bo'lgan sirli / kognitiv murakkablikni aniqlash uchun TSLint-ning ba'zi qoidalari mavjud.

15) QURUQ

O'zingizni takrorlamang. Sizda bitta kod mavjud emasligiga ishonch hosil qiling. Qaytariladigan kodni chiqarib oling va uni takrorlanadigan kod o'rniga foydalaning.

Nima uchun?

Xuddi shu kodni bir nechta joyda bo'lish, agar biz ushbu koddagi mantiqqa o'zgartirish kiritmoqchi bo'lsak, uni bir necha joyda qilishimiz kerakligini anglatadi. Bu saqlashni qiyinlashtiradi va biz har doim ham yangilashni o'tkazib yuboradigan xatolarga moyil. Mantiqni o'zgartirish uchun ko'proq vaqt talab etiladi va uni sinash ham uzoq jarayon.

Bunday hollarda, takrorlanadigan kodni oling va uning o'rniga foydalaning. Bu o'zgarishi mumkin bo'lgan bitta joyni va sinov uchun bitta narsani anglatadi. Foydalanuvchilarga kamroq nusxa kodi yuborilsa, dastur tezroq bo'ladi.

16) keshlash mexanizmlarini qo'shing

API qo'ng'iroqlarini amalga oshirganda, ulardan ba'zilarining javoblari tez-tez o'zgarmaydi. Bunday holatlarda siz keshlash mexanizmini qo'shishingiz va qiymatni API-dan saqlashingiz mumkin. Xuddi shu API-ga yana bir so'rov yuborilganda, keshda biron bir qiymat borligini tekshiring va agar so'ralsa, undan foydalaning. Aks holda, API qo'ng'iroqini amalga oshiring va natijani keshlang.

Agar qiymatlar tez-tez o'zgarib tursa, tez-tez o'zgarmasa, siz kesh vaqtini kiritishingiz mumkin, u erda oxirgi marta keshlanganligini tekshirib, API-ni chaqirish yoki qilmaslik to'g'risida qaror qabul qilishingiz mumkin.

Nima uchun?

Keshlash mexanizmiga ega bo'lish istalmagan API qo'ng'iroqlaridan qochishni anglatadi. Faqat kerak bo'lganda API qo'ng'iroqlarini amalga oshirish va takrorlanishni oldini olish orqali, dastur tezligi yaxshilanadi, chunki biz tarmoqni kutishga majbur emasmiz. Bu shuningdek, biz bir xil ma'lumotlarni qayta-qayta yuklamasligimizni anglatadi.

17) Shablonlarda mantiqdan qoching

Agar sizning shabloningizda biron bir mantiq bo'lsa, hatto bu oddiy va & parcha bo'lsa ham, uni tarkibiy qismga ajratib olish yaxshidir.

Nima uchun?

Shablonda mantiqqa ega bo'lish, uni sinovdan o'tkazishning iloji yo'qligini anglatadi va shuning uchun shablon kodini o'zgartirganda xatolarga ko'proq moyil bo'ladi.

Oldin

// shablon
 Holat: Dasturchi 

// komponent
ommaviy ngOnInit (): void {
    this.role = 'dasturchi';
}

Keyin

// shablon
 Holat: Tuzuvchi 

// komponent
ommaviy ngOnInit (): void {
    this.role = 'dasturchi';
    this.showDeveloperStatus = true;
}

18) Strings xavfsiz bo'lishi kerak

Agar sizda faqat qiymatlar to'plami bo'lishi mumkin bo'lgan o'zgaruvchan satr bo'lsa, uni mag'lubiyat turi sifatida e'lon qilishning o'rniga, siz ushbu turdagi qiymatlar ro'yxatini e'lon qilishingiz mumkin.

Nima uchun?

O'zgaruvchini turini mos ravishda e'lon qilish bilan biz ish vaqtida emas, balki kompilyatsiya vaqtida kodni yozishda xatolarni oldini olishimiz mumkin.

Oldin

xususiy myStringValue: string;

if (itShouldHaveFirstValue) {
   myStringValue = 'Birinchi';
} else {
   myStringValue = 'Ikkinchi'
}

Keyin

xususiy myStringValue: 'Birinchi' | 'Ikkinchi';

if (itShouldHaveFirstValue) {
   myStringValue = 'Birinchi';
} else {
   myStringValue = 'Boshqalar'
}

// Bu quyidagi xatoni beradi
'' Boshqa '' turini '' Birinchi '| yozishga tayinlash mumkin emas "Ikkinchi"'
(mulk) AppComponent.myValue: "Birinchi" | "Ikkinchi"

Kattaroq rasm

Davlat boshqaruvi

Ilovangiz holatini saqlab turish uchun @ ngrx / store va do'kon uchun yon ta'sir modeli sifatida @ ngrx / effektlaridan foydalanishni ko'rib chiqing. Shtat o'zgarishlari harakatlar bilan tavsiflanadi va o'zgarishlar reduktorlar deb nomlangan sof funktsiyalar bilan amalga oshiriladi.

Nima uchun?

@ ngrx / store barcha mantiqiy mantiqlarni bir joyda ajratib turadi va uni butun ilovada izchil qiladi. Bundan tashqari, do'konda ma'lumotlarga kirishda xotirani boshqarish mexanizmi mavjud bo'lib, u yanada samarali ijrochiga murojaat qiladi. @ ngrx / do'kon Angularning o'zgarishlarni aniqlash strategiyasi bilan birgalikda tezroq dasturga olib keladi.

O'zgarmas holat

@ Ngrx / store-dan foydalanganda, holat o'zgarmas bo'lishi uchun ngrx-store-freeze-dan foydalaning. ngrx-store -ze muzlatish holat istisnolarni qoldirib, mutatsiyaning oldini oladi. Bu holat tasodifiy mutatsiyasini oldini oladi, bu esa istalmagan oqibatlarga olib keladi.

Nima uchun?

Komponentlardagi o'zgaruvchan holat buyurtma tarkibiy qismlarining yuklanishiga qarab, ilovaning beqaror ishlashiga olib keladi. Redux naqshining aqliy modelini buzadi. Agar do'kon holati o'zgarsa va qayta chiqarilsa, o'zgartirishlar bekor qilinishi mumkin. Muammolarni ajratish - komponentlar bu ko'rish qatlamidir, ular holatni qanday o'zgartirish kerakligini bilmasliklari kerak.

Jest

Jest - bu Facebook-ning JavaScript-ni sinab ko'rish uchun birligi. Paralel test sinovini kod bazasi bo'ylab o'tkazish orqali birlik sinovini tezlashtiradi. Tomosha qilish rejimida faqat kiritilgan o'zgartirishlar bilan bog'liq testlar amalga oshiriladi, bu esa test usulini qaytarish doirasini qisqaroq qiladi. Jest shuningdek, sinovlarni kod bilan qamrab oladi va VS Code va Webstorm-da qo'llab-quvvatlanadi.

O'zingizning loyihangizda Jest-ni o'rnatishda siz uchun juda ko'p og'irlikni ko'taradigan Jest-ga oldindan sozlash vositasidan foydalanishingiz mumkin.

Karma

Karma - AngularJS jamoasi tomonidan ishlab chiqilgan sinov yuguruvchisi. Sinovlarni o'tkazish uchun haqiqiy brauzer / DOM kerak. Bundan tashqari, u turli xil brauzerlarda ishlashi mumkin. Sinovlarni o'tkazish uchun Jest-ga kromsiz boshli / fantomlar kerak emas va u toza tugunda ishlaydi.

Umumjahon

Agar siz o'z ilovangizni Universal dasturga aylantirmagan bo'lsangiz, endi buni qilishning yaxshi vaqti. Angular Universal sizga burchakli dasturni serverda ishga tushirish va html sahifalarida statik oldindan xizmat ko'rsatadigan server-rendering (SSR) qilish imkonini beradi. Bu dasturni juda tezkor qiladi, chunki JS-to'plamlarni yuklash va tahlil qilish yoki Burular-ning yuklanishini kutmasdan, ekrandagi tarkibni deyarli bir zumda namoyish etadi.

Bundan tashqari, SEO ham do'stdir, chunki Angular Universal statik tarkibni yaratadi va veb-qidiruvchilar uchun dasturni indekslashni va uni JavaScript-ni bajarmasdan izlab topishni osonlashtiradi.

Nima uchun?

Universal sizning ilovangizning ish faoliyatini keskin yaxshilaydi. Yaqinda biz dasturni server tomonidan amalga oshirish uchun yangiladik va saytni yuklash vaqti bir necha soniyadan o'nlab millisekundlargacha o'tdi !!

Shuningdek, bu sizning saytingizga ijtimoiy media-ning oldindan ko'riladigan parchalarini to'g'ri ko'rsatishga imkon beradi. Birinchi mazmunli bo'yoq haqiqatan ham tezkor va tarkibni foydalanuvchilarga istalmagan kechikishlarsiz ko'rinadigan qiladi.

Xulosa

Qurilish ilovalari - bu doimiy sayohat va narsalarni yaxshilash uchun doimo joy mavjud. Optimallashtirishning ushbu ro'yxati boshlash uchun yaxshi joy va ushbu naqshlarni izchil qo'llash sizning jamoangizni xursand qiladi. Sizning foydalanuvchilaringiz sizning kamroq yukli va ijrochi ilovangiz bilan yoqimli tajribangiz uchun sizni yaxshi ko'rishadi.

O'qiganingiz uchun tashakkur! Agar sizga ushbu maqola yoqsa, iltimos to va boshqalarga ushbu maqolani topishda yordam bering. Iltimos, quyidagi fikrlar bo'limida o'z fikrlaringizni bildiring. Ko'proq maqolalar uchun Medium yoki Twitter-da meni kuzatib boring. Baxtli kodlash millati !! ️