پیشنهاد دکوراتورهای جاوا اسکریپت: بهبود متدها و حاشیه‌نویسی متادیتا

جاوا اسکریپت، به عنوان یک زبان پویا و در حال تکامل، همواره به دنبال راه‌هایی برای بهبود خوانایی، قابلیت نگهداری و توسعه‌پذیری کد است. یکی از مورد انتظارترین ویژگی‌هایی که برای رسیدگی به این جنبه‌ها ارائه شده، پیشنهاد دکوراتورها است. این مقاله یک نمای کلی و جامع از دکوراتورهای جاوا اسکریپت ارائه می‌دهد و سینتکس، قابلیت‌ها و تأثیر بالقوه آنها بر توسعه مدرن جاوا اسکریپت را بررسی می‌کند. اگرچه دکوراتورها در حال حاضر یک پیشنهاد در مرحله ۳ (Stage 3) هستند، اما در فریم‌ورک‌هایی مانند Angular به طور گسترده استفاده می‌شوند و به طور فزاینده‌ای از طریق ترنسپایلرهایی مانند Babel مورد استفاده قرار می‌گیرند. این موضوع درک آنها را برای هر توسعه‌دهنده مدرن جاوا اسکریپت حیاتی می‌سازد.

دکوراتورهای جاوا اسکریپت چه هستند؟

دکوراتورها یک الگوی طراحی هستند که از زبان‌های دیگری مانند پایتون و جاوا به عاریت گرفته شده‌اند. در اصل، آنها نوع خاصی از تعریف هستند که می‌توانند به یک کلاس، متد، accessor، property یا پارامتر متصل شوند. دکوراتورها از سینتکس @expression استفاده می‌کنند، که در آن expression باید به یک تابع ارزیابی شود که در زمان اجرا با اطلاعات مربوط به تعریف دکوره‌شده فراخوانی خواهد شد.

دکوراتورها را به عنوان راهی برای افزودن قابلیت‌های اضافی یا متادیتا به کد موجود بدون تغییر مستقیم آن در نظر بگیرید. این امر باعث ایجاد یک کدبیس اعلانی‌تر (declarative) و قابل نگهداری‌تر می‌شود.

سینتکس و کاربرد پایه

یک دکوراتور ساده، تابعی است که بسته به آنچه دکوره می‌کند، یک، دو یا سه آرگومان می‌گیرد:

• برای دکوراتور کلاس، آرگومان همان سازنده (constructor) کلاس است.
• برای دکوراتور متد یا accessor، آرگومان‌ها شامل شیء هدف (prototype کلاس یا سازنده کلاس برای اعضای استاتیک)، کلید property (نام متد یا accessor) و توصیف‌گر property (property descriptor) است.
• برای دکوراتور property، آرگومان‌ها شامل شیء هدف و کلید property است.
• برای دکوراتور پارامتر، آرگومان‌ها شامل شیء هدف، کلید property و اندیس پارامتر در لیست پارامترهای تابع است.

دکوراتورهای کلاس

یک دکوراتور کلاس به سازنده کلاس اعمال می‌شود. می‌توان از آن برای مشاهده، تغییر یا جایگزینی تعریف یک کلاس استفاده کرد. یک مورد استفاده رایج، ثبت یک کلاس در یک فریم‌ورک یا کتابخانه است.

مثال: ثبت لاگ از نمونه‌سازی کلاس‌ها

            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
              
            
          

در این مثال، دکوراتور logClass سازنده MyClass را طوری تغییر می‌دهد که هر بار که یک نمونه جدید ایجاد می‌شود، یک پیام را لاگ کند.

دکوراتورهای متد

دکوراتورهای متد به متدهای درون یک کلاس اعمال می‌شوند. می‌توان از آنها برای مشاهده، تغییر یا جایگزینی رفتار یک متد استفاده کرد. این برای کارهایی مانند ثبت لاگ فراخوانی متدها، اعتبارسنجی آرگومان‌ها یا پیاده‌سازی کشینگ (caching) مفید است.

مثال: ثبت لاگ از فراخوانی متدها

            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 آرگومان‌ها و مقدار بازگشتی متد add را لاگ می‌کند.

دکوراتورهای Accessor

دکوراتورهای Accessor شبیه به دکوراتورهای متد هستند اما به متدهای getter یا setter اعمال می‌شوند. می‌توان از آنها برای کنترل دسترسی به propertyها یا افزودن منطق اعتبارسنجی استفاده کرد.

مثال: اعتبارسنجی مقادیر Setter

            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 اطمینان حاصل می‌کند که setter مربوط به celsius فقط مقادیر غیرمنفی را می‌پذیرد.

دکوراتورهای Property

دکوراتورهای Property به propertyهای کلاس اعمال می‌شوند. می‌توان از آنها برای تعریف متادیتا در مورد property یا تغییر رفتار آن استفاده کرد.

مثال: تعریف یک Property الزامی

            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، پراپرتی name را به عنوان الزامی علامت‌گذاری می‌کند. سپس سازنده بررسی می‌کند که آیا تمام propertyهای الزامی وجود دارند یا خیر.

دکوراتورهای پارامتر

دکوراتورهای پارامتر به پارامترهای تابع اعمال می‌شوند. می‌توان از آنها برای افزودن متادیتا در مورد پارامتر یا تغییر رفتار آن استفاده کرد. آنها نسبت به انواع دیگر دکوراتورها کمتر رایج هستند.

مثال: تزریق وابستگی‌ها

            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
              
            
          

در این مثال، ما از reflect-metadata استفاده می‌کنیم (یک روش رایج هنگام کار با تزریق وابستگی در جاوا اسکریپت/تایپ‌اسکریپت). دکوراتور @Inject به سازنده UserService می‌گوید که یک نمونه از DatabaseService را تزریق کند. اگرچه مثال بالا بدون تنظیمات بیشتر به طور کامل اجرا نمی‌شود، اما اثر مورد نظر را نشان می‌دهد.

موارد استفاده و مزایا

دکوراتورها طیف وسیعی از مزایا را ارائه می‌دهند و می‌توانند در موارد استفاده مختلفی به کار روند:

• حاشیه‌نویسی متادیتا: از دکوراتورها می‌توان برای پیوست کردن متادیتا به کلاس‌ها، متدها و propertyها استفاده کرد. این متادیتا می‌تواند توسط فریم‌ورک‌ها و کتابخانه‌ها برای ارائه قابلیت‌های اضافی مانند تزریق وابستگی، مسیریابی و اعتبارسنجی استفاده شود.
• برنامه‌نویسی جنبه‌گرا (AOP): دکوراتورها می‌توانند مفاهیم AOP مانند لاگ‌گیری، امنیت و مدیریت تراکنش‌ها را با پیچیدن (wrapping) متدها در رفتارهای اضافی پیاده‌سازی کنند.
• قابلیت استفاده مجدد کد: دکوراتورها با امکان استخراج قابلیت‌های مشترک به دکوراتورهای قابل استفاده مجدد، قابلیت استفاده مجدد کد را ترویج می‌کنند.
• خوانایی بهبود یافته: دکوراتورها با جداسازی دغدغه‌ها (separation of concerns) و کاهش کدهای تکراری (boilerplate)، کد را خواناتر و اعلانی‌تر می‌کنند.
• ادغام با فریم‌ورک‌ها: دکوراتورها به طور گسترده در فریم‌ورک‌های محبوب جاوا اسکریپت مانند Angular، NestJS و MobX برای ارائه روشی اعلانی‌تر و گویاتر برای تعریف کامپوننت‌ها، سرویس‌ها و سایر مفاهیم خاص فریم‌ورک استفاده می‌شوند.

مثال‌های دنیای واقعی و ملاحظات بین‌المللی

درحالی‌که مفاهیم اصلی دکوراتورها در زمینه‌های مختلف برنامه‌نویسی یکسان باقی می‌مانند، کاربرد آنها ممکن است بر اساس فریم‌ورک یا کتابخانه خاص مورد استفاده متفاوت باشد. در اینجا چند مثال آورده شده است:

• Angular (توسعه‌یافته توسط گوگل، استفاده جهانی): Angular به شدت از دکوراتورها برای تعریف کامپوننت‌ها، سرویس‌ها و دایرکتیوها استفاده می‌کند. به عنوان مثال، دکوراتور @Component برای تعریف یک کامپوننت UI با الگو، استایل‌ها و سایر متادیتای آن استفاده می‌شود. این به توسعه‌دهندگان با پیشینه‌های مختلف اجازه می‌دهد تا به راحتی رابط‌های کاربری پیچیده را با استفاده از یک رویکرد استاندارد ایجاد و مدیریت کنند.

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

• NestJS (یک فریم‌ورک Node.js با الهام از Angular، مورد پذیرش جهانی): NestJS از دکوراتورها برای تعریف کنترلرها، مسیرها و ماژول‌ها استفاده می‌کند. دکوراتورهای @Controller و @Get برای تعریف نقاط پایانی API و کنترل‌کننده‌های مربوطه آنها استفاده می‌شوند. این فرآیند ساخت برنامه‌های سمت سرور مقیاس‌پذیر و قابل نگهداری را، صرف نظر از موقعیت جغرافیایی توسعه‌دهنده، ساده می‌کند.

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

• MobX (یک کتابخانه مدیریت وضعیت، به طور گسترده در برنامه‌های React در سراسر جهان استفاده می‌شود): MobX از دکوراتورها برای تعریف propertyهای قابل مشاهده (observable) و مقادیر محاسباتی (computed) استفاده می‌کند. دکوراتورهای @observable و @computed به طور خودکار تغییرات داده‌ها را ردیابی کرده و UI را بر اساس آن به‌روز می‌کنند. این به توسعه‌دهندگان کمک می‌کند تا رابط‌های کاربری واکنش‌گرا و کارآمدی را برای مخاطبان بین‌المللی بسازند و تجربه کاربری روانی را حتی با جریان‌های داده پیچیده تضمین کنند.

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

ملاحظات بین‌المللی‌سازی: هنگام استفاده از دکوراتورها در پروژه‌هایی که مخاطبان جهانی را هدف قرار می‌دهند، توجه به بین‌المللی‌سازی (i18n) و محلی‌سازی (l10n) مهم است. در حالی که دکوراتورها خودشان مستقیماً i18n/l10n را مدیریت نمی‌کنند، می‌توانند برای بهبود این فرآیند به روش‌های زیر استفاده شوند:

• افزودن متادیتا برای ترجمه: می‌توان از دکوراتورها برای علامت‌گذاری propertyها یا متدهایی که نیاز به ترجمه دارند استفاده کرد. این متادیتا سپس می‌تواند توسط کتابخانه‌های i18n برای استخراج و ترجمه متن مربوطه استفاده شود.
• بارگذاری پویا ترجمه‌ها: می‌توان از دکوراتورها برای بارگذاری پویای ترجمه‌ها بر اساس منطقه (locale) کاربر استفاده کرد. این تضمین می‌کند که برنامه به زبان ترجیحی کاربر نمایش داده شود، صرف نظر از موقعیت مکانی او.
• قالب‌بندی تاریخ‌ها و اعداد: می‌توان از دکوراتورها برای قالب‌بندی تاریخ‌ها و اعداد مطابق با منطقه کاربر استفاده کرد. این تضمین می‌کند که تاریخ‌ها و اعداد در قالبی مناسب از نظر فرهنگی نمایش داده شوند.

به عنوان مثال، یک دکوراتور @Translatable را تصور کنید که یک property را به عنوان نیازمند ترجمه علامت‌گذاری می‌کند. یک کتابخانه i18n می‌تواند کدبیس را اسکن کند، تمام propertyهای علامت‌گذاری شده با @Translatable را پیدا کند و متن را برای ترجمه استخراج کند. پس از ترجمه، کتابخانه می‌تواند متن اصلی را با نسخه ترجمه‌شده بر اساس منطقه کاربر جایگزین کند. این رویکرد یک گردش کار i18n/l10n سازمان‌یافته‌تر و قابل نگهداری‌تر را، به ویژه در برنامه‌های بزرگ و پیچیده، ترویج می‌کند.

وضعیت فعلی پیشنهاد و پشتیبانی مرورگرها

پیشنهاد دکوراتورهای جاوا اسکریپت در حال حاضر در مرحله ۳ فرآیند استانداردسازی TC39 قرار دارد. این بدان معناست که این پیشنهاد نسبتاً پایدار است و به احتمال زیاد در یکی از مشخصات آینده ECMAScript گنجانده خواهد شد.

در حالی که پشتیبانی بومی مرورگرها از دکوراتورها هنوز محدود است، می‌توان با استفاده از ترنسپایلرهایی مانند Babel یا کامپایلر TypeScript از آنها در اکثر پروژه‌های مدرن جاوا اسکریپت استفاده کرد. این ابزارها سینتکس دکوراتور را به کد استاندارد جاوا اسکریپت تبدیل می‌کنند که می‌تواند در هر مرورگر یا محیط Node.js اجرا شود.

استفاده از Babel: برای استفاده از دکوراتورها با Babel، باید پلاگین @babel/plugin-proposal-decorators را نصب کرده و آن را در فایل پیکربندی Babel خود (.babelrc یا babel.config.js) پیکربندی کنید. همچنین به احتمال زیاد به @babel/plugin-proposal-class-properties نیاز خواهید داشت.

            
 // 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: تایپ‌اسکریپت پشتیبانی داخلی از دکوراتورها دارد. شما باید گزینه کامپایلر experimentalDecorators را در فایل tsconfig.json خود فعال کنید.

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

              
                Copy
              
            
          

به گزینه `emitDecoratorMetadata` توجه کنید. این گزینه با کتابخانه‌هایی مانند `reflect-metadata` برای فعال کردن تزریق وابستگی از طریق دکوراتورها کار می‌کند.

تأثیر بالقوه و مسیرهای آینده

پیشنهاد دکوراتورهای جاوا اسکریپت پتانسیل تأثیرگذاری قابل توجهی بر نحوه نوشتن کد جاوا اسکریپت ما دارد. با ارائه روشی اعلانی‌تر و گویاتر برای افزودن قابلیت به کلاس‌ها، متدها و propertyها، دکوراتورها می‌توانند خوانایی، قابلیت نگهداری و قابلیت استفاده مجدد کد را بهبود بخشند.

با پیشرفت این پیشنهاد در فرآیند استانداردسازی و کسب پذیرش گسترده‌تر، می‌توان انتظار داشت که فریم‌ورک‌ها و کتابخانه‌های بیشتری از دکوراتورها برای ارائه یک تجربه توسعه‌دهنده بصری‌تر و قدرتمندتر استفاده کنند.

علاوه بر این، قابلیت‌های متادیتای دکوراتورها می‌توانند امکانات جدیدی را برای ابزارها و تحلیل کد فراهم کنند. به عنوان مثال، لینترها و ویرایشگرهای کد می‌توانند از متادیتای دکوراتور برای ارائه پیشنهادات و پیام‌های خطای دقیق‌تر و مرتبط‌تر استفاده کنند.

نتیجه‌گیری

دکوراتورهای جاوا اسکریپت یک ویژگی قدرتمند و امیدوارکننده هستند که می‌توانند توسعه مدرن جاوا اسکریپت را به طور قابل توجهی بهبود بخشند. با درک سینتکس، قابلیت‌ها و موارد استفاده بالقوه آنها، توسعه‌دهندگان می‌توانند از دکوراتورها برای نوشتن کدی قابل نگهداری‌تر، خواناتر و با قابلیت استفاده مجدد بالاتر بهره ببرند. در حالی که پشتیبانی بومی مرورگرها هنوز در حال تکامل است، ترنسپایلرهایی مانند Babel و TypeScript امکان استفاده از دکوراتورها را در اکثر پروژه‌های جاوا اسکریپت امروزی فراهم می‌کنند. با حرکت این پیشنهاد به سمت استانداردسازی و کسب پذیرش گسترده‌تر، دکوراتورها به احتمال زیاد به یک ابزار ضروری در جعبه ابزار توسعه‌دهندگان جاوا اسکریپت تبدیل خواهند شد.

برای مطالعه بیشتر

• پیشنهاد دکوراتورهای TC39
• دکوراتورهای تایپ‌اسکریپت
• پلاگین پیشنهاد دکوراتورهای Babel
• reflect-metadata