JavaScript Dekoratorlari Taklifi: Metodlarni Yaxshilash va Metama'lumotlar Annotatsiyasi

JavaScript, dinamik va rivojlanayotgan til sifatida, doimiy ravishda kodning o'qilishi, saqlanishi va kengaytirilishini yaxshilash yo'llarini izlaydi. Ushbu jihatlarni hal qilishga qaratilgan eng kutilgan xususiyatlardan biri bu Dekoratorlar taklifidir. Ushbu maqola JavaScript Dekoratorlarining keng qamrovli ko'rinishini taqdim etadi, ularning sintaksisi, imkoniyatlari va zamonaviy JavaScript rivojlanishiga potentsial ta'sirini o'rganadi. Hozirda 3-bosqichdagi taklif bo'lsa-da, dekoratorlar allaqachon Angular kabi freymvorklarda keng qo'llaniladi va Babel kabi transpilatorlar orqali tobora ko'proq qabul qilinmoqda. Bu ularni har qanday zamonaviy JavaScript dasturchisi uchun tushunishni muhim qiladi.

JavaScript Dekoratorlari nima?

Dekoratorlar - bu Python va Java kabi boshqa tillardan olingan dizayn namunasi. Aslida, ular sinfga, metodga, aksessuarga, xususiyatga yoki parametrga biriktirilishi mumkin bo'lgan deklaratsiyaning maxsus turi. Dekoratorlar @expression sintaksisidan foydalanadi, bunda expression dekoratsiya qilingan deklaratsiya haqida ma'lumot bilan ish vaqtida chaqiriladigan funksiyaga baholanadi.

Dekoratorlarni mavjud kodga to'g'ridan-to'g'ri o'zgartirmasdan qo'shimcha funksionallik yoki metama'lumotlar qo'shish usuli sifatida o'ylab ko'ring. Bu yanada deklarativ va saqlanadigan kod bazasini targ'ib qiladi.

Asosiy Sintaksis va Foydalanish

Oddiy dekorator - bu nima dekoratsiya qilayotganiga qarab bitta, ikkita yoki uchta argumentni oladigan funksiya:

• Sinf dekoratori uchun argument sinf konstruktoridir.
• Metod yoki aksessuar dekoratori uchun argumentlar maqsadli ob'ekt (sinf prototipi yoki statik a'zolar uchun sinf konstruktori), xususiyat kaliti (metod yoki aksessuar nomi) va xususiyat deskriptori.
• Xususiyat dekoratori uchun argumentlar maqsadli ob'ekt va xususiyat kaliti.
• Parametr dekoratori uchun argumentlar maqsadli ob'ekt, xususiyat kaliti va funktsiya parametrlar ro'yxatidagi parametr indeksi.

Sinf Dekoratorlari

Sinf dekoratori sinf konstruktoriga qo'llaniladi. Uni sinf ta'rifini kuzatish, o'zgartirish yoki almashtirish uchun ishlatish mumkin. Umumiy foydalanish holati - sinfni freymvork yoki kutubxona ichida ro'yxatdan o'tkazish.

Misol: Sinf Instantsiyalarini Loglash

            function logClass(constructor: Function) {
 return class extends constructor {
 constructor(...args: any[]) {
 super(...args);
 console.log(`New instance of ${constructor.name} created.`);
 }
 };
}

@logClass
class MyClass {
 constructor(public message: string) {
 }
}

const instance = new MyClass("Hello, Decorators!"); // Output: New instance of MyClass created.
            

              
                Copy
              
            
          

Ushbu misolda logClass dekoratori har bir yangi instantsiya yaratilganda xabar yozish uchun MyClass konstruktorini o'zgartiradi.

Metod Dekoratorlari

Metod dekoratorlari sinf ichidagi metodlarga qo'llaniladi. Ularni metodning xatti-harakatini kuzatish, o'zgartirish yoki almashtirish uchun ishlatish mumkin. Bu metod chaqiruvlarini loglash, argumentlarni tekshirish yoki keshni amalga oshirish kabi narsalar uchun foydalidir.

Misol: Metod Qo'ng'iroqlarini Loglash

            function logMethod(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 {
 @logMethod
 add(a: number, b: number): number {
 return a + b;
 }
}

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

              
                Copy
              
            
          

logMethod dekoratori add metodining argumentlari va qaytarilish qiymatini yozadi.

Aksessuar Dekoratorlari

Aksessuar dekoratorlari metod dekoratorlariga o'xshaydi, lekin getter yoki setter metodlariga qo'llaniladi. Ularni xususiyatlarga kirishni boshqarish yoki validatsiya logikasini qo'shish uchun ishlatish mumkin.

Misol: Setter Qiymatlarini Tekshirish

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

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

class Temperature {
 private _celsius: number = 0;

 @validate
 set celsius(value: number) {
 this._celsius = value;
 }

 get celsius(): number {
 return this._celsius;
 }
}

const temperature = new Temperature();
temperature.celsius = 25; // OK
// temperature.celsius = -10; // Throws an error
            

              
                Copy
              
            
          

validate dekoratori celsius setter faqat musbat bo'lmagan qiymatlarni qabul qilishini ta'minlaydi.

Xususiyat Dekoratorlari

Xususiyat dekoratorlari sinf xususiyatlariga qo'llaniladi. Ularni xususiyat haqida metama'lumotlarni aniqlash yoki uning xatti-harakatini o'zgartirish uchun ishlatish mumkin.

Misol: Majburiy Xususiyatni Aniqlash

            function required(target: any, propertyKey: string) {
 let existingRequiredProperties: string[] = target.__requiredProperties__ || [];
 existingRequiredProperties.push(propertyKey);
 target.__requiredProperties__ = existingRequiredProperties;
}

class UserProfile {
 @required
 name: string;

 age: number;

 constructor(data: any) {
 this.name = data.name;
 this.age = data.age;

 const requiredProperties: string[] = (this.constructor as any).prototype.__requiredProperties__ || [];
 requiredProperties.forEach(property => {
 if (!this[property]) {
 throw new Error(`Missing required property: ${property}`);
 }
 });
 }
}

// const user = new UserProfile({}); // Throws an error: Missing required property: name
const user = new UserProfile({ name: "John Doe" }); // OK
            

              
                Copy
              
            
          

required dekoratori name xususiyatini majburiy sifatida belgilaydi. Keyin konstruktor barcha majburiy xususiyatlar mavjudligini tekshiradi.

Parametr Dekoratorlari

Parametr dekoratorlari funksiya parametrlariga qo'llaniladi. Ularni parametr haqida metama'lumotlarni qo'shish yoki uning xatti-harakatini o'zgartirish uchun ishlatish mumkin. Ular boshqa turdagi dekoratorlarga qaraganda kamroq uchraydi.

Misol: Bog'liqliklarni In'ektsiya qilish

            import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
 return (target: any) => {
 Reflect.defineMetadata('injectable', true, target);
 };
};

const Inject = (token: any): ParameterDecorator => {
 return (target: any, propertyKey: string | symbol | undefined, parameterIndex: number) => {
 Reflect.defineMetadata('design:paramtypes', [token], target, propertyKey!)
 };
};

@Injectable()
class DatabaseService {
 connect() {
 console.log("Connecting to the database...");
 }
}

class UserService {
 private databaseService: DatabaseService;

 constructor(@Inject(DatabaseService) databaseService: DatabaseService) {
 this.databaseService = databaseService;
 }

 getUser(id: number) {
 this.databaseService.connect();
 console.log(`Fetching user with ID: ${id}`);
 }
}

const databaseService = new DatabaseService();
const userService = new UserService(databaseService);
userService.getUser(123);
            

              
                Copy
              
            
          

Ushbu misolda biz reflect-metadata dan foydalanamiz (JavaScript/TypeScript-da bog'liqliklarni in'ektsiya qilish bilan ishlaganda keng tarqalgan amaliyot). @Inject dekoratori UserService konstruktoriga DatabaseService nusxasini kiritishni buyuradi. Yuqoridagi misol to'liq o'rnatishsiz to'liq bajarilmasa ham, u mo'ljallangan effektni ko'rsatadi.

Foydalanish Holatlari va Afzalliklari

Dekoratorlar bir qator afzalliklarni taklif etadi va turli xil foydalanish holatlariga qo'llanilishi mumkin:

• Metama'lumotlar Annotatsiyasi: Dekoratorlar sinflarga, metodlarga va xususiyatlarga metama'lumotlarni biriktirish uchun ishlatilishi mumkin. Ushbu metama'lumotlar freymvorklar va kutubxonalar tomonidan qo'shimcha funktsionallikni, masalan, bog'liqliklarni in'ektsiya qilish, marshrutlash va validatsiya qilishni ta'minlash uchun ishlatilishi mumkin.
• Aspect-Oriented Programming (AOP): Dekoratorlar qo'shimcha xatti-harakatlar bilan metodlarni o'rash orqali loglash, xavfsizlik va tranzaktsiyalarni boshqarish kabi AOP tushunchalarini amalga oshirishi mumkin.
• Koddan Qayta Foydalanish: Dekoratorlar umumiy funktsionallikni qayta ishlatiladigan dekoratorlarga ajratish imkonini berish orqali koddan qayta foydalanishni targ'ib qiladi.
• O'qilishi Yaxshilandi: Dekoratorlar tashvishlarni ajratish va boilerplate kodini kamaytirish orqali kodni yanada o'qilishi va deklarativ qiladi.
• Freymvork Integratsiyasi: Dekoratorlar komponentlar, xizmatlar va boshqa freymvorkga xos tushunchalarni aniqlashning yanada deklarativ va ifodali usulini ta'minlash uchun Angular, NestJS va MobX kabi mashhur JavaScript freymvorklarida keng qo'llaniladi.

Haqiqiy Dunyo Misollari va Xalqaro Mulohazalar

Dekoratorlarning asosiy tushunchalari turli dasturlash kontekstlarida bir xil bo'lib qolsa-da, ularni qo'llash ishlatiladigan aniq freymvork yoki kutubxonaga qarab farq qilishi mumkin. Mana bir nechta misollar:

• Angular (Google tomonidan ishlab chiqilgan, global miqyosda ishlatiladi): Angular komponentlar, xizmatlar va direktivalarni aniqlash uchun dekoratorlardan juda ko'p foydalanadi. Misol uchun, @Component dekoratori o'z shabloni, uslublari va boshqa metama'lumotlari bilan UI komponentini aniqlash uchun ishlatiladi. Bu turli xil kelib chiqishi bo'lgan dasturchilarga standartlashtirilgan yondashuv yordamida murakkab foydalanuvchi interfeyslarini osongina yaratish va boshqarish imkonini beradi.

              
   @Component({
   selector: 'app-my-component',
   templateUrl: './my-component.html',
   styleUrls: ['./my-component.css']
   })
   class MyComponent {
   // Component logic here
   }
   
              
  
                
                  Copy
                
              
            

• NestJS (Angular-dan ilhomlangan Node.js freymvorki, global miqyosda qabul qilingan): NestJS kontrollerlarni, marshrutlarni va modullarni aniqlash uchun dekoratorlardan foydalanadi. @Controller va @Get dekoratorlari API so'nggi nuqtalarini va ularning tegishli ishlovchilarini aniqlash uchun ishlatiladi. Bu dasturchining geografik joylashuvidan qat'i nazar, masshtablash va saqlash mumkin bo'lgan server tomoni ilovalarini yaratish jarayonini soddalashtiradi.

              
   @Controller('users')
   class UsersController {
   @Get()
   findAll(): string {
   return 'This action returns all users';
   }
   }
   
              
  
                
                  Copy
                
              
            

• MobX (Holatni boshqarish kutubxonasi, React ilovalarida global miqyosda keng qo'llaniladi): MobX kuzatiladigan xususiyatlarni va hisoblangan qiymatlarni aniqlash uchun dekoratorlardan foydalanadi. @observable va @computed dekoratorlari ma'lumotlardagi o'zgarishlarni avtomatik ravishda kuzatib boradi va UI-ni mos ravishda yangilaydi. Bu dasturchilarga xalqaro auditoriya uchun sezgir va samarali foydalanuvchi interfeyslarini yaratishga yordam beradi va hatto murakkab ma'lumotlar oqimlari bilan ham foydalanuvchi tajribasini silliq ta'minlaydi.

              
   class Store {
   @observable count = 0;
  
   @computed get doubledCount() {
   return this.count * 2;
   }
  
   increment() {
   this.count++;
   }
   }
   
              
  
                
                  Copy
                
              
            

Internatsionallashtirish bo'yicha mulohazalar: Global auditoriyani maqsad qilgan loyihalarda dekoratorlardan foydalanganda, internatsionallashtirish (i18n) va mahalliylashtirishni (l10n) hisobga olish muhimdir. Dekoratorlarning o'zi to'g'ridan-to'g'ri i18n/l10n bilan shug'ullanmasa-da, ular jarayonni quyidagi yo'llar bilan yaxshilash uchun ishlatilishi mumkin:

• Tarjima uchun metama'lumotlarni qo'shish: Dekoratorlar tarjima qilinishi kerak bo'lgan xususiyatlar yoki metodlarni belgilash uchun ishlatilishi mumkin. Keyin ushbu metama'lumotlar tegishli matnni ajratib olish va tarjima qilish uchun i18n kutubxonalari tomonidan ishlatilishi mumkin.
• Tarjimalarni Dinamik Yuklash: Dekoratorlar foydalanuvchining lokaliga qarab tarjimalarni dinamik ravishda yuklash uchun ishlatilishi mumkin. Bu ilovaning foydalanuvchining joylashgan joyidan qat'i nazar, ularning afzal tilida ko'rsatilishini ta'minlaydi.
• Sanalar va Raqamlarni Formatlash: Dekoratorlar sanalar va raqamlarni foydalanuvchining lokaliga muvofiq formatlash uchun ishlatilishi mumkin. Bu sanalar va raqamlarning madaniy jihatdan mos formatda ko'rsatilishini ta'minlaydi.

Misol uchun, `@Translatable` dekoratori xususiyatni tarjima qilish kerakligini belgilaydi. Keyin i18n kutubxonasi kod bazasini skanerlashi, `@Translatable` bilan belgilangan barcha xususiyatlarni topishi va tarjima uchun matnni ajratib olishi mumkin. Tarjimadan so'ng kutubxona foydalanuvchining lokaliga asoslangan holda asl matnni tarjima qilingan versiya bilan almashtirishi mumkin. Ushbu yondashuv i18n/l10n ish jarayonini yanada uyushgan va saqlanadigan qilishga yordam beradi, ayniqsa katta va murakkab ilovalarda.

Taklifning Joriy Holati va Brauzer Qo'llab-quvvatlashi

JavaScript Dekoratorlari taklifi TC39 standartlashtirish jarayonida hozirda 3-bosqichda. Bu taklif nisbatan barqaror va kelajakdagi ECMAScript spetsifikatsiyasiga kiritilishi mumkin degan ma'noni anglatadi.

Dekoratorlar uchun mahalliy brauzer qo'llab-quvvatlashi hali ham cheklangan bo'lsa-da, ularni Babel yoki TypeScript kompilyatori kabi transpilatorlardan foydalanib, ko'pchilik zamonaviy JavaScript loyihalarida ishlatish mumkin. Ushbu vositalar dekorator sintaksisini har qanday brauzerda yoki Node.js muhitida bajarilishi mumkin bo'lgan standart JavaScript kodiga aylantiradi.

Babel-dan Foydalanish: Babel bilan dekoratorlardan foydalanish uchun siz @babel/plugin-proposal-decorators plaginini o'rnatishingiz va uni Babel konfiguratsiya faylida (.babelrc yoki babel.config.js) sozlashingiz kerak. Shuningdek, sizga @babel/plugin-proposal-class-properties ham kerak bo'lishi mumkin.

            
 // babel.config.js
 module.exports = {
 presets: ['@babel/preset-env'],
 plugins: [
 ['@babel/plugin-proposal-decorators', { legacy: true }],
 ['@babel/plugin-proposal-class-properties', { loose: true }]
 ],
 };
 
            

              
                Copy
              
            
          

TypeScript-dan Foydalanish: TypeScript-da dekoratorlar uchun o'rnatilgan yordam mavjud. Siz tsconfig.json faylida experimentalDecorators kompilyator variantini yoqishingiz kerak.

            
 // tsconfig.json
 {
 "compilerOptions": {
 "target": "es5",
 "experimentalDecorators": true,
 "emitDecoratorMetadata": true  // Optional, but useful for dependency injection
 }
 }
 
            

              
                Copy
              
            
          

emitDecoratorMetadata variantiga e'tibor bering. Bu dekoratorlar orqali bog'liqlik in'ektsiyasini yoqish uchun reflect-metadata kabi kutubxonalar bilan ishlaydi.

Potentsial Ta'sir va Kelajak Yo'nalishlari

JavaScript Dekoratorlari taklifi JavaScript kodini yozish usuliga sezilarli ta'sir ko'rsatishi mumkin. Sinfga, metodga va xususiyatlarga funktsionallikni qo'shishning yanada deklarativ va ifodali usulini ta'minlash orqali dekoratorlar kodning o'qilishini, saqlanishini va qayta foydalanishni yaxshilashi mumkin.

Taklif standartlashtirish jarayonida rivojlanib borar ekan va kengroq qabul qilinishi bilan biz yanada intuitiv va kuchli dasturchi tajribasini ta'minlash uchun ko'proq freymvorklar va kutubxonalarning dekoratorlarni qabul qilishini kutishimiz mumkin.

Bundan tashqari, dekoratorlarning metama'lumotlar imkoniyatlari asboblar va kodni tahlil qilish uchun yangi imkoniyatlarni yaratishi mumkin. Misol uchun, linterlar va kod muharrirlari yanada aniq va tegishli takliflar va xato xabarlarini berish uchun dekorator metama'lumotlaridan foydalanishi mumkin.

Xulosa

JavaScript Dekoratorlari - bu zamonaviy JavaScript rivojlanishini sezilarli darajada yaxshilashi mumkin bo'lgan kuchli va istiqbolli xususiyat. Ularning sintaksisini, imkoniyatlarini va potentsial foydalanish holatlarini tushunib, dasturchilar yanada saqlanadigan, o'qiladigan va qayta ishlatiladigan kodni yozish uchun dekoratorlardan foydalanishlari mumkin. Mahalliy brauzer yordami hali ham rivojlanayotgan bo'lsa-da, Babel va TypeScript kabi transpilatorlar bugungi kunda ko'pchilik JavaScript loyihalarida dekoratorlardan foydalanishni mumkin qiladi. Taklif standartlashtirishga qarab harakatlanar ekan va kengroq qabul qilinishi bilan dekoratorlar JavaScript dasturchisining arsenalidagi muhim vositaga aylanishi mumkin.

Qo'shimcha O'rganish

• TC39 Dekoratorlar Taklifi
• TypeScript Dekoratorlari
• Babel Plugin Taklif Dekoratorlari
• reflect-metadata