M

MLOG

O'zbek

Metama'lumotlarni boshqarish va kodni o'zgartirish uchun JavaScript dekoratorlarining kuchini o'rganing. Xalqaro ilg'or tajribalar yordamida kodingizni aniqlik va samaradorlik bilan yaxshilashni o'rganing.

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:

Asosiy Sintaksis

Dekoratorni qo'llash sintaksisi juda oddiy:

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

Mana uning tahlili:

Sinf Dekoratorlari: Sinf Xatti-harakatlarini O'zgartirish

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

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

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:

Ular quyidagilar uchun ishlatilishi mumkin:

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

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:

Ular quyidagilar uchun ishlatilishi mumkin:

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);
}

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:

Ular quyidagilar uchun ishlatilishi mumkin:

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);
}

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:

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

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:

Dekoratorlardan Foydalanishning Afzalliklari

Dekoratorlar bir nechta asosiy afzalliklarni taklif qiladi:

E'tiborga Olinadigan Jihatlar va Eng Yaxshi Amaliyotlar

Turli Muhitlarda Dekoratorlar

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

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!