JavaScript Dekoratorlari: Metama'lumotlar va Kod Modifikatsiyasini Ochib Berish

JavaScript dekoratorlari metama'lumotlar qo'shish va sinflar, metodlar, xususiyatlar va parametrlarning xatti-harakatlarini o'zgartirish uchun kuchli va nafis usulni taklif qiladi. Ular jurnallashtirish, tasdiqlash, avtorizatsiya va boshqalar kabi kesishuvchi vazifalarni kodga qo'shish uchun deklarativ sintaksisni taqdim etadi. Hali ham nisbatan yangi xususiyat bo'lishiga qaramay, dekoratorlar, ayniqsa TypeScript'da mashhurlikka erishmoqda va kodning o'qiluvchanligi, qo'llab-quvvatlanuvchanligi va qayta foydalanish imkoniyatini yaxshilashni va'da qilmoqda. Ushbu maqola butun dunyo bo'ylab dasturchilar uchun amaliy misollar va tushunchalar taqdim etgan holda JavaScript dekoratorlarining imkoniyatlarini o'rganadi.

JavaScript Dekoratorlari Nima?

Dekoratorlar, aslida, boshqa funksiyalarni yoki sinflarni o'rab turuvchi funksiyalardir. Ular bezatilgan elementning asl kodini to'g'ridan-to'g'ri o'zgartirmasdan uning xatti-harakatlarini o'zgartirish yoki yaxshilash usulini taqdim etadi. Dekoratorlar sinflar, metodlar, kirish metodlari, xususiyatlar yoki parametrlarni bezash uchun @ belgisi va undan keyin funksiya nomidan foydalanadi.

Ularni yuqori darajali funksiyalar uchun sintaktik shakar deb hisoblang, ular kodingizga kesishuvchi vazifalarni qo'llashning toza va o'qilishi oson usulini taklif qiladi. Dekoratorlar vazifalarni samarali ajratish imkonini beradi, bu esa yanada modulli va qo'llab-quvvatlanadigan ilovalarga olib keladi.

Dekorator Turlari

JavaScript dekoratorlari bir necha turga bo'linadi, ularning har biri kodingizning turli elementlariga mo'ljallangan:

• Sinf Dekoratorlari: Butun sinflarga qo'llaniladi, sinfning xatti-harakatlarini o'zgartirish yoki yaxshilash imkonini beradi.
• Metod Dekoratorlari: Sinf ichidagi metodlarga qo'llaniladi, metod chaqiruvlaridan oldin yoki keyin qayta ishlash imkonini beradi.
• Kirish (Accessor) Dekoratorlari: Getter yoki setter metodlariga (kirish metodlari) qo'llaniladi, xususiyatga kirish va uni o'zgartirish ustidan nazoratni ta'minlaydi.
• Xususiyat Dekoratorlari: Sinf xususiyatlariga qo'llaniladi, xususiyat deskriptorlarini o'zgartirish imkonini beradi.
• Parametr Dekoratorlari: Metod parametrlariga qo'llaniladi, ma'lum parametrlar haqida metama'lumotlarni uzatish imkonini beradi.

Asosiy Sintaksis

Dekoratorni qo'llash sintaksisi juda oddiy:

            @decoratorName
class MyClass {
  @methodDecorator
  myMethod( @parameterDecorator param: string ) {
    @propertyDecorator
    myProperty: number;
  }
}
            

              
                Copy
              
            
          

Mana uning tahlili:

• @decoratorName: decoratorName funksiyasini MyClass sinfiga qo'llaydi.
• @methodDecorator: methodDecorator funksiyasini myMethod metodiga qo'llaydi.
• @parameterDecorator param: string: parameterDecorator funksiyasini myMethod metodining param parametriga qo'llaydi.
• @propertyDecorator myProperty: number: propertyDecorator funksiyasini myProperty xususiyatiga qo'llaydi.

Sinf Dekoratorlari: Sinf Xatti-harakatlarini O'zgartirish

Sinf dekoratorlari sinf konstruktorini argument sifatida qabul qiladigan funksiyalardir. Ular quyidagilar uchun ishlatilishi mumkin:

• Sinf prototipini o'zgartirish.
• Sinfni yangisi bilan almashtirish.
• Sinfga metama'lumotlar qo'shish.

Misol: Sinf Yaratilishini Jurnallashtirish

Tasavvur qiling, siz sinfning yangi nusxasi yaratilganda buni jurnallashtirmoqchisiz. Sinf dekoratori bunga erisha oladi:

            function logClassCreation(constructor: Function) {
  return class extends constructor {
    constructor(...args: any[]) {
      console.log(`Creating a new instance of ${constructor.name}`);
      super(...args);
    }
  };
}

@logClassCreation
class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const user = new User("Alice"); // Chiqish: Creating a new instance of User

            

              
                Copy
              
            
          

Ushbu misolda, logClassCreation asl User sinfini uni kengaytiruvchi yangi sinf bilan almashtiradi. Yangi sinfning konstruktori xabar yozadi va keyin super yordamida asl konstruktorni chaqiradi.

Metod Dekoratorlari: Metod Funktsionalligini Kengaytirish

Metod dekoratorlari uchta argument qabul qiladi:

• Maqsad obyekti (statik metodlar uchun sinf prototipi yoki sinf konstruktori).
• Bezatilayotgan metodning nomi.
• Metod uchun xususiyat deskriptori.

Ular quyidagilar uchun ishlatilishi mumkin:

• Metodni qo'shimcha mantiq bilan o'rash.
• Metodning xatti-harakatlarini o'zgartirish.
• Metodga metama'lumotlar qo'shish.

Misol: Metod Chaqiruvlarini Jurnallashtirish

Keling, har bir metod chaqirilganda, uning argumentlari bilan birga jurnallashtiradigan metod dekoratorini yarataylik:

            function logMethodCall(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling method ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`Method ${propertyKey} returned: ${result}`);
    return result;
  };

  return descriptor;
}

class Calculator {
  @logMethodCall
  add(x: number, y: number): number {
    return x + y;
  }
}

const calculator = new Calculator();
const sum = calculator.add(5, 3); // Chiqish: Calling method add with arguments: [5,3]
                                 //         Method add returned: 8

            

              
                Copy
              
            
          

logMethodCall dekoratori asl metodni o'rab oladi. Asl metodni bajarishdan oldin, u metod nomi va argumentlarini jurnallashtiradi. Bajarilgandan so'ng, u qaytarilgan qiymatni jurnallashtiradi.

Kirish (Accessor) Dekoratorlari: Xususiyatga Kirishni Nazorat Qilish

Kirish dekoratorlari metod dekoratorlariga o'xshaydi, lekin faqat getter va setter metodlariga (kirish metodlari) qo'llaniladi. Ular metod dekoratorlari kabi uchta argument qabul qiladi:

• Maqsad obyekti.
• Kirish metodining nomi.
• Xususiyat deskriptori.

Ular quyidagilar uchun ishlatilishi mumkin:

• Xususiyatga kirishni nazorat qilish.
• O'rnatilayotgan qiymatni tasdiqlash.
• Xususiyatga metama'lumotlar qo'shish.

Misol: Setter Qiymatlarini Tasdiqlash

Keling, xususiyat uchun o'rnatilayotgan qiymatni tasdiqlaydigan kirish dekoratorini yarataylik:

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

  descriptor.set = function (value: number) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    originalSet.call(this, value);
  };

  return descriptor;
}

class Person {
  private _age: number;

  @validateAge
  set age(value: number) {
    this._age = value;
  }

  get age(): number {
    return this._age;
  }
}

const person = new Person();
person.age = 30; // To'g'ri ishlaydi

try {
  person.age = -5; // Xatolik yuzaga keltiradi: Age cannot be negative
} catch (error:any) {
  console.error(error.message);
}
            

              
                Copy
              
            
          

validateAge dekoratori age xususiyatining setter metodini to'xtatib turadi. U qiymatning manfiy ekanligini tekshiradi va agar shunday bo'lsa, xatolik chiqaradi. Aks holda, u asl setterni chaqiradi.

Xususiyat Dekoratorlari: Xususiyat Deskriptorlarini O'zgartirish

Xususiyat dekoratorlari ikkita argument qabul qiladi:

• Maqsad obyekti (statik xususiyatlar uchun sinf prototipi yoki sinf konstruktori).
• Bezatilayotgan xususiyatning nomi.

Ular quyidagilar uchun ishlatilishi mumkin:

• Xususiyat deskriptorini o'zgartirish.
• Xususiyatga metama'lumotlar qo'shish.

Misol: Xususiyatni Faqat O'qish Uchun Qilish

Keling, xususiyatni faqat o'qish uchun qiladigan xususiyat dekoratorini yarataylik:

            function readOnly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false,
  });
}

class Configuration {
  @readOnly
  apiUrl: string = "https://api.example.com";
}

const config = new Configuration();

try {
  (config as any).apiUrl = "https://newapi.example.com"; // qattiq rejimda xatolik yuzaga keltiradi
  console.log(config.apiUrl); // Chiqish: https://api.example.com
} catch (error) {
  console.error("Cannot assign to read only property 'apiUrl' of object '#'", error);
}
            

              
                Copy
              
            
          

readOnly dekoratori Object.defineProperty yordamida xususiyat deskriptorini o'zgartirib, writable ni false ga o'rnatadi. Endi xususiyatni o'zgartirishga urinish xatolikka olib keladi (qattiq rejimda) yoki e'tiborga olinmaydi.

Parametr Dekoratorlari: Parametrlar Haqida Metama'lumotlar Taqdim Etish

Parametr dekoratorlari uchta argument qabul qiladi:

• Maqsad obyekti (statik metodlar uchun sinf prototipi yoki sinf konstruktori).
• Bezatilayotgan metodning nomi.
• Metodning parametrlar ro'yxatidagi parametrning indeksi.

Parametr dekoratorlari boshqa turlarga qaraganda kamroq qo'llaniladi, lekin ular ma'lum parametrlar bilan metama'lumotlarni bog'lash kerak bo'lgan holatlarda foydali bo'lishi mumkin.

Misol: Bog'liqlik Inyeksiyasi (Dependency Injection)

Parametr dekoratorlari bog'liqlik inyeksiyasi freymvorklarida metodga inyektsiya qilinishi kerak bo'lgan bog'liqliklarni aniqlash uchun ishlatilishi mumkin. To'liq bog'liqlik inyeksiyasi tizimi ushbu maqola doirasidan tashqarida bo'lsa-da, mana soddalashtirilgan misol:

            const dependencies: any[] = [];

function inject(token: any) {
  return function (target: any, propertyKey: string | symbol, parameterIndex: number) {
    dependencies.push({
      target,
      propertyKey,
      parameterIndex,
      token,
    });
  };
}

class UserService {
  getUser(id: number) {
    return `User with ID ${id}`;
  }
}

class UserController {
  private userService: UserService;

  constructor(@inject(UserService) userService: UserService) {
    this.userService = userService;
  }

  getUser(id: number) {
    return this.userService.getUser(id);
  }
}

//Bog'liqliklarni soddalashtirilgan tarzda olish
const userServiceInstance = new UserService();
const userController = new UserController(userServiceInstance);
console.log(userController.getUser(123)); // Chiqish: User with ID 123

            

              
                Copy
              
            
          

Ushbu misolda, @inject dekoratori userService parametri haqidagi metama'lumotlarni dependencies massivida saqlaydi. Keyin bog'liqlik inyeksiyasi konteyneri ushbu metama'lumotlardan foydalanib, tegishli bog'liqlikni aniqlashi va inyektsiya qilishi mumkin.

Amaliy Qo'llanilishlar va Foydalanish Holatlari

Dekoratorlar kod sifatini va qo'llab-quvvatlanuvchanligini yaxshilash uchun turli xil stsenariylarda qo'llanilishi mumkin:

• Jurnallashtirish va Audit: Metod chaqiruvlari, bajarilish vaqtlari va foydalanuvchi harakatlarini jurnallashtirish.
• Tasdiqlash: Qayta ishlashdan oldin kirish parametrlari yoki obyekt xususiyatlarini tasdiqlash.
• Avtorizatsiya: Foydalanuvchi rollari yoki ruxsatlariga asoslangan holda metodlar yoki resurslarga kirishni nazorat qilish.
• Keshlashtirish: Ishlashni yaxshilash uchun qimmat metod chaqiruvlari natijalarini keshlashtirish.
• Bog'liqlik Inyeksiyasi: Bog'liqliklarni avtomatik ravishda sinflarga inyektsiya qilish orqali bog'liqliklarni boshqarishni soddalashtirish.
• Tranzaksiyalarni Boshqarish: Tranzaksiyalarni avtomatik ravishda boshlash va tasdiqlash yoki bekor qilish orqali ma'lumotlar bazasi tranzaksiyalarini boshqarish.
• Aspektga Yo'naltirilgan Dasturlash (AOP): Jurnallashtirish, xavfsizlik va tranzaksiyalarni boshqarish kabi kesishuvchi vazifalarni modulli va qayta foydalanish mumkin bo'lgan usulda amalga oshirish.
• Ma'lumotlarni Bog'lash: UI elementlari va ma'lumotlar modellari o'rtasida ma'lumotlarni avtomatik sinxronlashtirish orqali UI freymvorklarida ma'lumotlarni bog'lashni soddalashtirish.

Dekoratorlardan Foydalanishning Afzalliklari

Dekoratorlar bir nechta asosiy afzalliklarni taklif qiladi:

• Kodning O'qiluvchanligini Yaxshilash: Dekoratorlar kodni tushunish va qo'llab-quvvatlashni osonlashtiradigan deklarativ sintaksisni taqdim etadi.
• Kodning Qayta Foydalanish Imkoniyatini Oshirish: Dekoratorlar bir nechta sinflar va metodlarda qayta ishlatilishi mumkin, bu esa kod takrorlanishini kamaytiradi.
• Vazifalarni Ajratish: Dekoratorlar kesishuvchi vazifalarni asosiy biznes mantiqidan ajratish imkonini beradi, bu esa yanada modulli va qo'llab-quvvatlanadigan kodga olib keladi.
• Hosildorlikni Oshirish: Dekoratorlar takrorlanadigan vazifalarni avtomatlashtirishi mumkin, bu esa dasturchilarga ilovaning muhimroq jihatlariga e'tibor qaratish imkonini beradi.
• Sinovdan O'tkazishni Yaxshilash: Dekoratorlar kesishuvchi vazifalarni ajratish orqali kodni sinovdan o'tkazishni osonlashtiradi.

E'tiborga Olinadigan Jihatlar va Eng Yaxshi Amaliyotlar

• Argumentlarni Tushunish: Har bir dekorator turi turli xil argumentlarni qabul qiladi. Ularni ishlatishdan oldin har bir argumentning maqsadini tushunganingizga ishonch hosil qiling.
• Haddan Tashqari Foydalanishdan Saqlaning: Dekoratorlar kuchli bo'lsa-da, ulardan haddan tashqari foydalanishdan saqlaning. Ularni ma'lum kesishuvchi vazifalarni hal qilish uchun oqilona ishlating. Haddan tashqari foydalanish kodni tushunishni qiyinlashtirishi mumkin.
• Dekoratorlarni Oddiy Saqlang: Dekoratorlar diqqat markazida bo'lishi va bitta, aniq belgilangan vazifani bajarishi kerak. Dekoratorlar ichida murakkab mantiqdan saqlaning.
• Dekoratorlarni Puxta Sinovdan O'tkazing: Dekoratorlaringizni to'g'ri ishlayotganligiga va kutilmagan yon ta'sirlarni keltirib chiqarmayotganligiga ishonch hosil qilish uchun sinovdan o'tkazing.
• Ishlash Samaradorligini Hisobga Oling: Dekoratorlar kodingizga qo'shimcha yuklama qo'shishi mumkin. Ayniqsa, ishlash samaradorligi muhim bo'lgan ilovalarda ishlash oqibatlarini hisobga oling. Dekoratorlar tomonidan kiritilgan har qanday ishlashdagi to'siqlarni aniqlash uchun kodingizni diqqat bilan profillang.
• TypeScript Integratsiyasi: TypeScript dekoratorlar uchun ajoyib qo'llab-quvvatlashni ta'minlaydi, jumladan, tiplarni tekshirish va avtomatik to'ldirish. Yaxshiroq ishlab chiqish tajribasi uchun TypeScript xususiyatlaridan foydalaning.
• Standartlashtirilgan Dekoratorlar: Jamoada ishlaganda, loyiha bo'ylab izchillikni ta'minlash va kod takrorlanishini kamaytirish uchun standartlashtirilgan dekoratorlar kutubxonasini yaratishni o'ylab ko'ring.

Turli Muhitlarda Dekoratorlar

Dekoratorlar ESNext spetsifikatsiyasining bir qismi bo'lsa-da, ularni qo'llab-quvvatlash turli JavaScript muhitlarida farq qiladi:

• Brauzerlar: Brauzerlarda dekoratorlarni tabiiy qo'llab-quvvatlash hali ham rivojlanmoqda. Brauzer muhitlarida dekoratorlardan foydalanish uchun Babel yoki TypeScript kabi transpilyatordan foydalanishingiz kerak bo'lishi mumkin. Maqsadli brauzerlaringiz uchun muvofiqlik jadvallarini tekshiring.
• Node.js: Node.js dekoratorlarni eksperimental ravishda qo'llab-quvvatlaydi. Buyruqlar qatori bayroqlari yordamida eksperimental xususiyatlarni yoqishingiz kerak bo'lishi mumkin. Dekoratorlarni qo'llab-quvvatlash bo'yicha so'nggi ma'lumotlar uchun Node.js hujjatlariga murojaat qiling.
• TypeScript: TypeScript dekoratorlar uchun ajoyib qo'llab-quvvatlashni ta'minlaydi. tsconfig.json faylingizda experimentalDecorators kompilyator opsiyasini true ga o'rnatib, dekoratorlarni yoqishingiz mumkin. TypeScript dekoratorlar bilan ishlash uchun afzal qilingan muhitdir.

Dekoratorlarga Global Nazar

Dekoratorlarning qabul qilinishi turli mintaqalar va ishlab chiquvchilar jamoalari orasida farq qiladi. TypeScript keng tarqalgan ba'zi mintaqalarda (masalan, Shimoliy Amerika va Yevropaning ba'zi qismlari) dekoratorlar keng qo'llaniladi. JavaScript kengroq tarqalgan yoki dasturchilar oddiyroq naqshlarni afzal ko'radigan boshqa mintaqalarda dekoratorlar kamroq tarqalgan bo'lishi mumkin.

Bundan tashqari, ma'lum dekorator naqshlaridan foydalanish madaniy afzalliklar va sanoat standartlariga qarab farq qilishi mumkin. Masalan, ba'zi madaniyatlarda batafsilroq va aniq kodlash uslubi afzal ko'rilsa, boshqalarida qisqaroq va ifodali uslub ma'qul ko'riladi.

Xalqaro loyihalarda ishlaganda, ushbu madaniy va mintaqaviy farqlarni hisobga olish va barcha jamoa a'zolari uchun aniq, qisqa va oson tushuniladigan kodlash standartlarini o'rnatish muhimdir. Bu har bir kishi dekoratorlardan foydalanishda qulay bo'lishini ta'minlash uchun qo'shimcha hujjatlar, treninglar yoki mentorlikni o'z ichiga olishi mumkin.

Xulosa

JavaScript dekoratorlari kodni metama'lumotlar bilan boyitish va xatti-harakatlarni o'zgartirish uchun kuchli vositadir. Turli xil dekorator turlari va ularning amaliy qo'llanilishini tushunib, dasturchilar toza, qo'llab-quvvatlanadigan va qayta foydalanish mumkin bo'lgan kod yozishlari mumkin. Dekoratorlar kengroq qabul qilinishi bilan, ular JavaScript ishlab chiqish landshaftining ajralmas qismiga aylanishga tayyor. Ushbu kuchli xususiyatni qabul qiling va kodingizni yangi cho'qqilarga olib chiqish uchun uning salohiyatini oching. Har doim eng yaxshi amaliyotlarga rioya qilishni va ilovalaringizda dekoratorlardan foydalanishning ishlash oqibatlarini hisobga olishni unutmang. Ehtiyotkorlik bilan rejalashtirish va amalga oshirish bilan dekoratorlar JavaScript loyihalaringizning sifati va qo'llab-quvvatlanuvchanligini sezilarli darajada yaxshilashi mumkin. Omadli kodlash!