JavaScript Dekoratorlari: Aksessorlar yordamida xususiyatlarni yaxshilash va tekshirish

JavaScript Dekoratorlari sinflar va ularning a'zolarini o'zgartirish va yaxshilashning kuchli va oqilona usulini taqdim etadi, bu esa kodni o'qilishi oson, qo'llab-quvvatlanadigan va kengaytiriladigan qiladi. Ushbu postda xususiyatlarni yaxshilash va tekshirish uchun aksessorlar (getterlar va setterlar) bilan dekoratorlardan foydalanishning o'ziga xos jihatlari chuqur o'rganiladi, zamonaviy JavaScript dasturlash uchun amaliy misollar va eng yaxshi amaliyotlar keltiriladi.

JavaScript Dekoratorlari nima?

ES2016 (ES7) da taqdim etilgan va standartlashtirilgan dekoratorlar mavjud kodga deklarativ va qayta foydalanish mumkin bo'lgan usulda funksionallik qo'shish imkonini beruvchi dizayn naqshidir. Ular @ belgisi va undan keyin dekorator nomidan foydalanadi va sinflarga, metodlarga, aksessorlarga yoki xususiyatlarga qo'llaniladi. Ularni metaprogrammalashni osonlashtiradigan va o'qilishi qulayroq qiladigan sintaktik shakar deb o'ylang.

Eslatma: Dekoratorlar sizning JavaScript muhitingizda eksperimental qo'llab-quvvatlashni yoqishni talab qiladi. Masalan, TypeScript-da tsconfig.json faylingizda experimentalDecorators kompilyator opsiyasini yoqishingiz kerak.

Asosiy Sintaksis

Dekorator aslida nishonni (bezatilayotgan sinf, metod, aksessor yoki xususiyat), bezatilayotgan a'zo nomini va xususiyat deskriptorini (aksessorlar va metodlar uchun) argument sifatida qabul qiladigan funksiyadir. Keyin u nishon elementini o'zgartirishi yoki almashtirishi mumkin.

            function MyDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // Dekorator mantig'i shu yerda
}

class MyClass {
  @MyDecorator
  myProperty: string;
}

            

              
                Copy
              
            
          

Dekoratorlar va Aksessorlar (Getterlar va Setterlar)

Aksessorlar (getterlar va setterlar) sinf xususiyatlariga kirishni nazorat qilish imkonini beradi. Aksessorlarni bezatish quyidagi kabi funksionallikni qo'shish uchun kuchli mexanizmni taqdim etadi:

• Tekshirish: Xususiyatga tayinlanayotgan qiymat ma'lum mezonlarga javob berishini ta'minlash.
• Transformatsiya: Qiymatni saqlashdan yoki qaytarishdan oldin o'zgartirish.
• Jurnal yozish: Nosozliklarni tuzatish yoki audit maqsadida xususiyatlarga kirishni kuzatish.
• Memoizatsiya: Ishlash samaradorligini optimallashtirish uchun getter natijasini keshda saqlash.
• Avtorizatsiya: Foydalanuvchi rollari yoki ruxsatlariga asoslanib xususiyatlarga kirishni nazorat qilish.

Misol: Tekshirish Dekoratori

Keling, xususiyatga tayinlanayotgan qiymatni tekshiradigan dekorator yarataylik. Bu misolda satr uchun oddiy uzunlik tekshiruvi ishlatiladi, lekin uni murakkabroq tekshirish qoidalari uchun osongina moslashtirish mumkin.

            function ValidateLength(minLength: number) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalSet = descriptor.set;

    descriptor.set = function (value: any) {
      if (typeof value === 'string' && value.length < minLength) {
        throw new Error(`'${propertyKey}' xususiyati kamida ${minLength} belgidan iborat bo'lishi kerak.`);
      }
      originalSet.call(this, value);
    };
  };
}

class User {
  private _username: string;

  @ValidateLength(3)
  set username(value: string) {
    this._username = value;
  }

  get username(): string {
    return this._username;
  }
}

const user = new User();

try {
  user.username = 'ab'; // Bu xatolikni keltirib chiqaradi
} catch (error) {
  console.error(error.message); // Chiqish: 'username' xususiyati kamida 3 belgidan iborat bo'lishi kerak.
}

user.username = 'abc'; // Bu to'g'ri ishlaydi
console.log(user.username); // Chiqish: abc

            

              
                Copy
              
            
          

Tushuntirish:

1. ValidateLength dekoratori argument sifatida minimal uzunlikni qabul qiladigan zavod funksiyasidir.
2. U target, propertyKey (xususiyat nomi) va descriptorni qabul qiluvchi dekorator funksiyasini qaytaradi.
3. Dekorator funksiyasi asl setterni (descriptor.set) to'xtatib turadi.
4. To'xtatilgan setter ichida u tekshirishni amalga oshiradi. Agar qiymat yaroqsiz bo'lsa, u xatolikni keltirib chiqaradi. Aks holda, u originalSet.call(this, value) yordamida asl setterni chaqiradi.

Misol: Transformatsiya Dekoratori

Ushbu misol, qiymatni xususiyatda saqlashdan oldin qanday o'zgartirishni ko'rsatadi. Bu yerda biz satr qiymatidan avtomatik ravishda bo'shliqlarni olib tashlaydigan dekorator yaratamiz.

            function Trim() {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalSet = descriptor.set;

    descriptor.set = function (value: any) {
      if (typeof value === 'string') {
        value = value.trim();
      }
      originalSet.call(this, value);
    };
  };
}

class Product {
  private _name: string;

  @Trim()
  set name(value: string) {
    this._name = value;
  }

  get name(): string {
    return this._name;
  }
}

const product = new Product();
product.name = '  Mening mahsulotim  ';
console.log(product.name); // Chiqish: Mening mahsulotim

            

              
                Copy
              
            
          

Tushuntirish:

1. Trim dekoratori name xususiyatining setterini to'xtatib turadi.
2. U tayinlanayotgan qiymat satr ekanligini tekshiradi.
3. Agar u satr bo'lsa, u boshidagi va oxiridagi bo'shliqlarni olib tashlash uchun trim() metodini chaqiradi.
4. Nihoyat, u tozalangan qiymat bilan asl setterni chaqiradi.

Misol: Jurnal Yozish Dekoratori

Ushbu misol, xususiyatga kirishni qanday qilib jurnalga yozishni ko'rsatadi, bu nosozliklarni tuzatish yoki audit uchun foydali bo'lishi mumkin.

            function LogAccess() {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalGet = descriptor.get;
    const originalSet = descriptor.set;

    if (originalGet) {
      descriptor.get = function () {
        const result = originalGet.call(this);
        console.log(`'${propertyKey}' olinmoqda: ${result}`);
        return result;
      };
    }

    if (originalSet) {
      descriptor.set = function (value: any) {
        console.log(`'${propertyKey}' o'rnatilmoqda: ${value}`);
        originalSet.call(this, value);
      };
    }
  };
}

class Configuration {
  private _apiKey: string;

  @LogAccess()
  set apiKey(value: string) {
    this._apiKey = value;
  }

  get apiKey(): string {
    return this._apiKey;
  }
}

const config = new Configuration();
config.apiKey = 'sizning_api_kalitingiz'; // Chiqish: 'apiKey' o'rnatilmoqda: sizning_api_kalitingiz
console.log(config.apiKey); // Chiqish: 'apiKey' olinmoqda: sizning_api_kalitingiz
                              // Chiqish: sizning_api_kalitingiz

            

              
                Copy
              
            
          

Tushuntirish:

1. LogAccess dekoratori apiKey xususiyatining getteri va setteri ikkalasini ham to'xtatib turadi.
2. Getter chaqirilganda, u olingan qiymatni konsolga yozadi.
3. Setter chaqirilganda, u tayinlanayotgan qiymatni konsolga yozadi.

Amaliy Qo'llanilishlar va Mulohazalar

Aksessorli dekoratorlar turli xil stsenariylarda ishlatilishi mumkin, jumladan:

• Ma'lumotlarni bog'lash: Xususiyat o'zgarganda foydalanuvchi interfeysini avtomatik yangilash. Angular va React kabi freymvorklar ko'pincha ichki ravishda shunga o'xshash naqshlardan foydalanadi.
• Obyekt-Relyatsion Xaritalash (ORM): Sinf xususiyatlarining ma'lumotlar bazasi ustunlariga qanday mos kelishini, shu jumladan tekshirish qoidalari va ma'lumotlar transformatsiyasini aniqlash. Masalan, dekorator satr xususiyatining ma'lumotlar bazasida kichik harflar bilan saqlanishini ta'minlashi mumkin.
• API integratsiyasi: Tashqi API'lardan olingan ma'lumotlarni tekshirish va o'zgartirish. Dekorator API'dan olingan sana satrini yaroqli JavaScript Date ob'ektiga aylantirilishini ta'minlashi mumkin.
• Konfiguratsiyani Boshqarish: Konfiguratsiya qiymatlarini muhit o'zgaruvchilari yoki konfiguratsiya fayllaridan yuklash va ularni tekshirish. Masalan, dekorator port raqamining yaroqli diapazonda ekanligini ta'minlashi mumkin.

Mulohazalar:

• Murakkablik: Dekoratorlardan haddan tashqari ko'p foydalanish kodni tushunish va tuzatishni qiyinlashtirishi mumkin. Ulardan oqilona foydalaning va ularning maqsadini aniq hujjatlashtiring.
• Ishlash samaradorligi: Dekoratorlar bilvosita qo'shimcha qatlam qo'shadi, bu esa ishlash samaradorligiga ta'sir qilishi mumkin. Dekoratorlar sezilarli sekinlashuvga olib kelmayotganiga ishonch hosil qilish uchun kodingizning ishlash uchun muhim qismlarini o'lchang.
• Moslik: Dekoratorlar endi standartlashtirilgan bo'lsa-da, eski JavaScript muhitlari ularni tabiiy ravishda qo'llab-quvvatlamasligi mumkin. Turli brauzerlar va Node.js versiyalari bo'ylab moslikni ta'minlash uchun Babel yoki TypeScript kabi transpilyatorlardan foydalaning.
• Metama'lumotlar: Dekoratorlar ko'pincha metama'lumotlar refleksi bilan birga ishlatiladi, bu sizga ish vaqtida bezatilgan a'zolar haqidagi ma'lumotlarga kirish imkonini beradi. reflect-metadata kutubxonasi metama'lumotlarni qo'shish va olishning standartlashtirilgan usulini taqdim etadi.

Ilg'or Texnikalar

Reflect API dan foydalanish

Reflect API kuchli introspeksiya imkoniyatlarini taqdim etadi, bu sizga ish vaqtida ob'ektlarning xatti-harakatlarini tekshirish va o'zgartirish imkonini beradi. U ko'pincha sinflarga va ularning a'zolariga metama'lumotlar qo'shish uchun dekoratorlar bilan birga ishlatiladi.

Misol:

            import 'reflect-metadata';

const formatMetadataKey = Symbol('format');

function format(formatString: string) {
  return Reflect.metadata(formatMetadataKey, formatString);
}

function getFormat(target: any, propertyKey: string) {
  return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
}

class Greeter {
  @format('Salom, %s')
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    let formatString = getFormat(this, 'greeting');
    return formatString.replace('%s', this.greeting);
  }
}

let greeter = new Greeter('dunyo');
console.log(greeter.greet()); // Chiqish: Salom, dunyo

            

              
                Copy
              
            
          

Tushuntirish:

1. Biz reflect-metadata kutubxonasini import qilamiz.
2. Nomlashdagi to'qnashuvlarni oldini olish uchun Symbol yordamida metama'lumot kalitini aniqlaymiz.
3. format dekoratori greeting xususiyatiga metama'lumotlarni qo'shib, format satrini belgilaydi.
4. getFormat funksiyasi xususiyat bilan bog'liq metama'lumotlarni oladi.
5. greet metodi metama'lumotlardan format satrini oladi va undan salomlashish xabarini formatlash uchun foydalanadi.

Dekoratorlarni Birlashtirish

Siz bitta aksessorga bir nechta yaxshilanishlarni qo'llash uchun bir nechta dekoratorlarni birlashtirishingiz mumkin. Bu sizga murakkab tekshirish va transformatsiya quvurlarini yaratish imkonini beradi.

Misol:

            function ToUpperCase() {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalSet = descriptor.set;

    descriptor.set = function (value: any) {
      if (typeof value === 'string') {
        value = value.toUpperCase();
      }
      originalSet.call(this, value);
    };
  };
}

@ValidateLength(5)
@ToUpperCase()
class DataItem {
  private _value: string;

  set value(newValue: string) {
    this._value = newValue;
  }

  get value(): string {
    return this._value;
  }
}

const item = new DataItem();
try {
  item.value = 'qisqa'; // Bu xatolikni keltirib chiqaradi, chunki u 5 belgidan qisqaroq.
} catch (e) {
  console.error(e.message); // 'value' xususiyati kamida 5 belgidan iborat bo'lishi kerak.
}

item.value = 'uzunroq';
console.log(item.value); // UZUNROQ

            

              
                Copy
              
            
          

Ushbu misolda avval `ValidateLength` dekoratori qo'llaniladi, keyin esa `ToUpperCase`. Dekoratorlarni qo'llash tartibi muhim; bu yerda uzunlik satrni katta harflarga o'tkazishdan *oldin* tekshiriladi.

Eng Yaxshi Amaliyotlar

• Dekoratorlarni Sodda Saqlang: Dekoratorlar bitta, aniq belgilangan vazifaga qaratilgan bo'lishi kerak. Tushunish va qo'llab-quvvatlash qiyin bo'lgan haddan tashqari murakkab dekoratorlar yaratishdan saqlaning.
• Zavod Funksiyalaridan Foydalaning: Argumentlarni qabul qiladigan dekoratorlar yaratish uchun zavod funksiyalaridan foydalaning, bu ularning xatti-harakatlarini sozlash imkonini beradi.
• Dekoratorlaringizni Hujjatlashtiring: Boshqa dasturchilar tomonidan tushunilishi va ishlatilishi oson bo'lishi uchun dekoratorlaringizning maqsadi va ishlatilishini aniq hujjatlashtiring.
• Dekoratorlaringizni Sinovdan O'tkazing: Dekoratorlaringiz to'g'ri ishlayotganiga va ular kutilmagan yon ta'sirlarni keltirib chiqarmayotganiga ishonch hosil qilish uchun birlik testlarini yozing.
• Yon Ta'sirlardan Saqlaning: Dekoratorlar ideal holda nishon elementini o'zgartirishdan tashqari hech qanday yon ta'sirga ega bo'lmagan sof funksiyalar bo'lishi kerak.
• Qo'llash Tartibini Hisobga Oling: Bir nechta dekoratorlarni birlashtirganda, ularning qo'llanilish tartibiga e'tibor bering, chunki bu natijaga ta'sir qilishi mumkin.
• Ishlash Samaradorligini Yodda Tuting: Dekoratorlaringizning ishlash samaradorligiga ta'sirini o'lchang, ayniqsa kodingizning ishlash uchun muhim qismlarida.

Global Nuqtai Nazar

Xususiyatlarni yaxshilash va tekshirish uchun dekoratorlardan foydalanish tamoyillari butun dunyo bo'ylab turli xil dasturlash paradigmalari va dasturiy ta'minot ishlab chiqish amaliyotlarida qo'llaniladi. Biroq, maxsus kontekst va talablar sanoat, mintaqa va loyihaga qarab farq qilishi mumkin.

Masalan, moliya yoki sog'liqni saqlash kabi qattiq tartibga solinadigan sohalarda, qat'iy ma'lumotlarni tekshirish va xavfsizlik talablari murakkabroq va ishonchliroq tekshirish dekoratorlaridan foydalanishni talab qilishi mumkin. Aksincha, tez rivojlanayotgan startaplarda e'tibor tez prototiplash va iteratsiyaga qaratilishi mumkin, bu esa tekshirishga nisbatan pragmatikroq va kamroq qat'iy yondashuvga olib keladi.

Xalqaro jamoalarda ishlaydigan dasturchilar, shuningdek, madaniy farqlar va til to'siqlarini yodda tutishlari kerak. Tekshirish qoidalarini belgilashda, turli mamlakatlarda ishlatiladigan turli xil ma'lumotlar formatlari va konventsiyalarini hisobga oling. Masalan, sana formatlari, valyuta belgilari va manzil formatlari turli mintaqalarda sezilarli darajada farq qilishi mumkin.

Xulosa

Aksessorli JavaScript Dekoratorlari xususiyatlarni yaxshilash va tekshirish, kod sifatini, qo'llab-quvvatlanuvchanligini va qayta foydalanuvchanligini oshirishning kuchli va moslashuvchan usulini taklif etadi. Dekoratorlar, aksessorlar va Reflect API asoslarini tushunib, eng yaxshi amaliyotlarga rioya qilgan holda, siz mustahkam va yaxshi loyihalashtirilgan ilovalarni yaratish uchun ushbu xususiyatlardan foydalanishingiz mumkin.

Loyihangizning o'ziga xos konteksti va talablarini hisobga olishni va yondashuvingizni shunga mos ravishda moslashtirishni unutmang. Ehtiyotkorlik bilan rejalashtirish va amalga oshirish bilan dekoratorlar sizning JavaScript dasturlash arsenalingizda qimmatli vosita bo'lishi mumkin.