در نسخه‌های مدرن زبان JavaScript، امکان اضافه کردن رفتارها و ویژگی‌های جدید به توابع، کلاس‌ها و متدها با استفاده از دکوراتورها فراهم شده است. دوره «ساخت و استفاده از دکوراتورها در جاوااسکریپت ۲۰۲۴-۳» از مجموعه آموزشی Pluralsight، به شما کمک می‌کند تا با مفاهیم پایه و پیشرفته دکوراتورها آشنا شوید و در پروژه‌های واقعی از آن‌ها بهره ببرید. این دوره به صورت گام‌به‌گام طراحی شده تا حتی توسعه‌دهندگان متوسط نیز بتوانند در پایان، دکوراتورهای سفارشی خود را ایجاد و پیاده‌سازی کنند.

• معرفی کامل Decorator و تاریخچه‌ی آن در ECMAScript
• نحوه تعریف دکوراتور برای Class، Property و Method
• استفاده از دکوراتورهای آماده برای اعتبارسنجی، کشینگ و Log گیری
• ساخت دکوراتورهای سفارشی با پارامترهای ورودی دلخواه
• مدیریت توالی اجرای چند دکوراتور و ترتیب فراخوانی
• کاربرد عملی در فریم‌ورک‌های محبوب نظیر Angular و NestJS

• افزایش خوانایی و نگهداری کد با کاهش تکرار منطق در توابع و کلاس‌ها
• تسریع در توسعه با قابلیت استفاده مجدد از دکوراتورهای عمومی
• امکان جداسازی مسئولیت‌ها (Separation of Concerns) به شکل موثر
• بهبود عملکرد برنامه با پیاده‌سازی کشینگ و Lazy Loading
• ارتقای مهارت و دانش در یکی از جدیدترین قابلیت‌های ECMAScript

• آشنایی پایه با مفاهیم ES6 و بالاتر
• تجربه کار با کلاس‌ها، تابع‌های Arrow و Promise
• محیط توسعه Node.js و ویرایشگر کد (VSCode یا مشابه)
• نصب بسته‌های NPM و مفاهیم Package Management

• مقدمه و تنظیم محیط توسعه
• مبانی دکوراتورها: سینتکس و کاربرد اولیه
• دکوراتورهای کلاس: تزریق متادیتا و الگوهای طراحی
• دکوراتور متد و پراپرتی: واسط دسترسی و لاگ‌گیری
• ارسال پارامتر به دکوراتورها و ساخت فانکشن‌های Higher-Order
• اجرای همزمان چند دکوراتور و مدیریت اولویت‌ها
• کاربرد در فریم‌ورک‌ها: نمونه عملی در Angular
• جمع‌بندی و نکات پیشرفته برای پروژه‌های بزرگ

در این قسمت از دوره چند مثال کاربردی با دکوراتورهای رایج را بررسی می‌کنیم:

• @Log : ثبت زمان و جزئیات اجرای متد

  function Log(target, key, descriptor) {
    const original = descriptor.value;
    descriptor.value = function(...args) {
      console.log(`Calling ${key} with`, args);
      return original.apply(this, args);
    }
    return descriptor;
  }

• @Validate : اعتبارسنجی پارامترهای ورودی

  function Validate(schema) {
    return function(target, key, descriptor) {
      const fn = descriptor.value;
      descriptor.value = function(...args) {
        // بررسی schema مقابل args
        return fn.apply(this, args);
      }
    }
  }

• @Cache : ذخیره خروجی متد در حافظه موقت

  const cacheMap = new Map();
  function Cache(target, key, descriptor) {
    const fn = descriptor.value;
    descriptor.value = function(...args) {
      const keyStr = JSON.stringify(args);
      if (cacheMap.has(keyStr)) {
        return cacheMap.get(keyStr);
      }
      const result = fn.apply(this, args);
      cacheMap.set(keyStr, result);
      return result;
    }
  }

• دکوراتورها هنوز در مرحله Stage 2 قرار دارند؛ برای استفاده در محیط‌های تولید نیاز به Transpiler مثل Babel است.
• ترتیب اعمال چند دکوراتور بر فراخوانی متد تاثیر می‌گذارد؛ ابتدا آخرین دکوراتور، سپس اولین اجرا می‌شود.
• دکوراتورهای پراپرتی فقط بر getter و setter قابل اعمال هستند.
• برای ساخت دکوراتورهای سفارشی از الگوی Higher-Order Function کمک بگیرید.
• مستندات رسمی ECMAScript و پلاگین‌های Babel راهنمای شما در پیاده‌سازی دقیق خواهند بود.