الگوهای دکوراتور ماژول جاوااسکریپت: بهبود رفتار

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

دکوراتورهای ماژول چیستند؟

دکوراتور ماژول تابعی است که یک ماژول (معمولاً یک تابع یا کلاس) را به عنوان ورودی می‌گیرد و نسخه‌ای اصلاح‌شده از آن ماژول را برمی‌گرداند. دکوراتور رفتار ماژول اصلی را بدون تغییر مستقیم کد منبع آن اضافه یا اصلاح می‌کند. این امر به اصل باز/بسته (Open/Closed Principle) پایبند است که بیان می‌کند موجودیت‌های نرم‌افزاری (کلاس‌ها، ماژول‌ها، توابع و غیره) باید برای توسعه باز باشند اما برای اصلاح بسته.

آن را مانند افزودن چاشنی‌های اضافی به پیتزا تصور کنید. پیتزای اصلی (ماژول اولیه) بدون تغییر باقی می‌ماند، اما شما آن را با طعم‌ها و ویژگی‌های اضافی (افزوده‌های دکوراتور) بهبود بخشیده‌اید.

مزایای استفاده از دکوراتورهای ماژول

\n
• افزایش قابلیت استفاده مجدد کد: دکوراتورها را می‌توان روی چندین ماژول اعمال کرد و به شما امکان می‌دهد بهبودهای رفتاری را در سراسر پایگاه کد خود استفاده مجدد کنید.
\n
• نگهداری‌پذیری بهبودیافته: با جداسازی نگرانی‌ها، دکوراتورها درک، اصلاح و آزمایش ماژول‌های جداگانه و بهبودهای آن‌ها را آسان‌تر می‌کنند.
\n
• افزایش انعطاف‌پذیری: دکوراتورها راهی انعطاف‌پذیر برای افزودن یا اصلاح عملکرد بدون تغییر کد ماژول اصلی ارائه می‌دهند.
\n
• پایبندی به اصل باز/بسته: دکوراتورها به شما امکان می‌دهند عملکرد ماژول‌ها را بدون تغییر مستقیم کد منبع آن‌ها گسترش دهید، که به نگهداری‌پذیری کمک کرده و خطر معرفی باگ‌ها را کاهش می‌دهد.
\n
• قابلیت آزمایش بهبودیافته: ماژول‌های تزئین‌شده را می‌توان به راحتی با شبیه‌سازی (mocking) یا جایگزینی (stubbing) توابع دکوراتور آزمایش کرد.
\n

مفاهیم اصلی و پیاده‌سازی

در هسته خود، یک دکوراتور ماژول یک تابع مرتبه بالاتر (higher-order function) است. این تابع، یک تابع (یا کلاس) را به عنوان آرگومان می‌پذیرد و یک تابع (یا کلاس) جدید و اصلاح‌شده را برمی‌گرداند. نکته کلیدی این است که بفهمیم چگونه تابع اصلی را دستکاری کرده و رفتار مورد نظر را اضافه کنیم.

مثال دکوراتور پایه (دکوراتور تابع)

بیایید با یک مثال ساده از تزئین یک تابع برای ثبت زمان اجرای آن شروع کنیم:

            function timingDecorator(func) {\n  return function(...args) {\n    const start = performance.now();\n    const result = func.apply(this, args);\n    const end = performance.now();\n    console.log(`Function ${func.name} took ${end - start}ms`);\n    return result;\n  };\n}\n\nfunction myExpensiveFunction(n) {\n  let result = 0;\n  for (let i = 0; i < n; i++) {\n    result += i;\n  }\n  return result;\n}\n\nconst decoratedFunction = timingDecorator(myExpensiveFunction);\n\nconsole.log(decoratedFunction(100000));\n
            

              
                Copy
              
            
          

در این مثال، timingDecorator تابع دکوراتور است. این تابع myExpensiveFunction را به عنوان ورودی می‌گیرد و یک تابع جدید برمی‌گرداند که تابع اصلی را پوشش می‌دهد. این تابع جدید زمان اجرا را اندازه‌گیری کرده و آن را در کنسول ثبت می‌کند.

دکوراتورهای کلاس (پیشنهاد دکوراتورهای ES)

پیشنهاد دکوراتورهای ECMAScript (که در حال حاضر در مرحله 3 است) یک نحو ظریف‌تر برای تزئین کلاس‌ها و اعضای کلاس معرفی می‌کند. اگرچه هنوز در تمام محیط‌های جاوااسکریپت کاملاً استاندارد نشده است، اما در حال محبوبیت بوده و توسط ابزارهایی مانند Babel و TypeScript پشتیبانی می‌شود.

در اینجا مثالی از یک دکوراتور کلاس آورده شده است:

            // Requires a transpiler like Babel with the decorators plugin\n\nfunction LogClass(constructor) {\n  return class extends constructor {\n    constructor(...args) {\n      super(...args);\n      console.log(`Creating a new instance of ${constructor.name}`);\n    }\n  };\n}\n\n@LogClass\nclass MyClass {\n  constructor(name) {\n    this.name = name;\n  }\n  greet() {\n    console.log(`Hello, ${this.name}!`);\n  }\n}\n\nconst instance = new MyClass("Alice");\ninstance.greet();\n
            

              
                Copy
              
            
          

در این حالت، @LogClass یک دکوراتور است که وقتی روی MyClass اعمال می‌شود، سازنده آن را بهبود می‌بخشد تا هر بار که یک نمونه جدید از کلاس ایجاد می‌شود، یک پیام را ثبت کند.

دکوراتورهای متد (پیشنهاد دکوراتورهای ES)

همچنین می‌توانید متدهای جداگانه را در یک کلاس تزئین کنید:

            // Requires a transpiler like Babel with the decorators plugin\n\nfunction LogMethod(target, propertyKey, descriptor) {\n  const originalMethod = descriptor.value;\n\n  descriptor.value = function(...args) {\n    console.log(`Calling method ${propertyKey} with arguments: ${args}`);\n    const result = originalMethod.apply(this, args);\n    console.log(`Method ${propertyKey} returned: ${result}`);\n    return result;\n  };\n  return descriptor;\n}\n\nclass MyClass {\n  constructor(name) {\n    this.name = name;\n  }\n\n  @LogMethod\n  add(a, b) {\n    return a + b;\n  }\n}\n\nconst instance = new MyClass("Bob");\ninstance.add(5, 3);\n
            

              
                Copy
              
            
          

در اینجا، @LogMethod متد add را تزئین می‌کند و آرگومان‌های ارسال شده به متد و مقدار بازگشتی آن را ثبت می‌کند.

الگوهای رایج دکوراتور ماژول

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

1. دکوراتور ثبت وقایع (Logging Decorator)

همانطور که در مثال‌های قبلی نشان داده شد، دکوراتورهای ثبت وقایع، قابلیت ثبت وقایع را به ماژول‌ها اضافه می‌کنند و بینش‌هایی در مورد رفتار و عملکرد آن‌ها ارائه می‌دهند. این امر برای اشکال‌زدایی و نظارت بر برنامه‌ها بسیار مفید است.

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

2. دکوراتور کشینگ (Caching Decorator)

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

            function cacheDecorator(func) {\n  const cache = new Map();\n\n  return function(...args) {\n    const key = JSON.stringify(args);\n    if (cache.has(key)) {\n      console.log("Fetching from cache");\n      return cache.get(key);\n    }\n\n    const result = func.apply(this, args);\n    cache.set(key, result);\n    return result;\n  };\n}\n\nfunction expensiveCalculation(n) {\n  console.log("Performing expensive calculation");\n  // Simulate a time-consuming operation\n  let result = 0;\n  for (let i = 0; i < n; i++) {\n    result += Math.sqrt(i);\n  }\n  return result;\n}\n\nconst cachedCalculation = cacheDecorator(expensiveCalculation);\n\nconsole.log(cachedCalculation(1000));\nconsole.log(cachedCalculation(1000)); // Fetches from cache\n
            

              
                Copy
              
            
          

مثال بین‌المللی‌سازی: برنامه‌ای را در نظر بگیرید که نیاز به نمایش نرخ ارز دارد. یک دکوراتور کشینگ می‌تواند نتایج فراخوانی‌های API به یک سرویس تبدیل ارز را ذخیره کند، تعداد درخواست‌های انجام‌شده را کاهش داده و تجربه کاربری را بهبود بخشد، به خصوص برای کاربرانی با اتصالات اینترنتی کندتر یا کسانی که در مناطق با تأخیر بالا هستند.

3. دکوراتور احراز هویت (Authentication Decorator)

دکوراتورهای احراز هویت، دسترسی به ماژول‌ها یا توابع خاص را بر اساس وضعیت احراز هویت کاربر محدود می‌کنند. این امر به ایمن‌سازی برنامه شما و جلوگیری از دسترسی غیرمجاز کمک می‌کند.

            function authenticationDecorator(func) {\n  return function(...args) {\n    if (isAuthenticated()) { // Replace with your authentication logic\n      return func.apply(this, args);\n    } else {\n      console.log("Authentication required");\n      return null; // Or throw an error\n    }\n  };\n}\n\nfunction isAuthenticated() {\n  // Replace with your actual authentication check\n  return true; // For demonstration purposes\n}\n\nfunction sensitiveOperation() {\n  console.log("Performing sensitive operation");\n}\n\nconst authenticatedOperation = authenticationDecorator(sensitiveOperation);\n\nauthenticatedOperation();\n
            

              
                Copy
              
            
          

زمینه جهانی: در یک پلتفرم تجارت الکترونیک جهانی، می‌توان از یک دکوراتور احراز هویت برای محدود کردن دسترسی به توابع مدیریت سفارش فقط برای کارمندان مجاز استفاده کرد. تابع isAuthenticated() باید نقش‌ها و مجوزهای کاربر را بر اساس مدل امنیتی پلتفرم بررسی کند، که ممکن است بسته به مقررات منطقه‌ای متفاوت باشد.

4. دکوراتور اعتبارسنجی (Validation Decorator)

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

            function validationDecorator(validator) {\n  return function(func) {\n    return function(...args) {\n      const validationResult = validator(args);\n      if (validationResult.isValid) {\n        return func.apply(this, args);\n      } else {\n        console.error("Validation failed:", validationResult.errorMessage);\n        throw new Error(validationResult.errorMessage);\n      }\n    };\n  };\n}\n\nfunction createUserValidator(args) {\n  const [username, email] = args;\n  if (!username) {\n    return { isValid: false, errorMessage: "Username is required" };\n  }\n  if (!email.includes("@")) {\n    return { isValid: false, errorMessage: "Invalid email format" };\n  }\n  return { isValid: true };\n}\n\nfunction createUser(username, email) {\n  console.log(`Creating user with username: ${username} and email: ${email}`);\n}\n\nconst validatedCreateUser = validationDecorator(createUserValidator)(createUser);\n\nvalidatedCreateUser("john.doe", "john.doe@example.com");\nvalidatedCreateUser("jane", "invalid-email");\n
            

              
                Copy
              
            
          

محلی‌سازی و اعتبارسنجی: یک دکوراتور اعتبارسنجی می‌تواند در یک فرم آدرس جهانی برای اعتبارسنجی کدهای پستی بر اساس کشور کاربر استفاده شود. تابع validator نیاز به استفاده از قوانین اعتبارسنجی مختص هر کشور دارد که احتمالاً از یک API خارجی یا فایل پیکربندی دریافت می‌شوند. این امر تضمین می‌کند که داده‌های آدرس با الزامات پستی هر منطقه سازگار هستند.

5. دکوراتور تلاش مجدد (Retry Decorator)

دکوراتورهای تلاش مجدد به طور خودکار یک فراخوانی تابع را در صورت شکست، مجدداً امتحان می‌کنند و انعطاف‌پذیری برنامه شما را بهبود می‌بخشند، به خصوص هنگام کار با سرویس‌های غیرقابل اعتماد یا اتصالات شبکه.

            function retryDecorator(maxRetries) {\n  return function(func) {\n    return async function(...args) {\n      let retries = 0;\n      while (retries < maxRetries) {\n        try {\n          const result = await func.apply(this, args);\n          return result;\n        } catch (error) {\n          console.error(`Attempt ${retries + 1} failed:`, error);\n          retries++;\n          await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second before retrying\n        }\n      }\n      throw new Error(`Function failed after ${maxRetries} retries`);\n    };\n  };\n}\n\nasync function fetchData() {\n  // Simulate a function that might fail\n  if (Math.random() < 0.5) {\n    throw new Error("Failed to fetch data");\n  }\n  return "Data fetched successfully!";\n}\n\nconst retryFetchData = retryDecorator(3)(fetchData);\n\nretryFetchData()\n  .then(data => console.log(data))\n  .catch(error => console.error("Final error:", error));\n
            

              
                Copy
              
            
          

تاب‌آوری شبکه: در مناطق با اتصالات اینترنتی ناپایدار، یک دکوراتور تلاش مجدد می‌تواند برای اطمینان از اینکه عملیات حیاتی، مانند ارسال سفارشات یا ذخیره داده‌ها، در نهایت موفقیت‌آمیز باشد، بسیار ارزشمند است. تعداد تلاش‌های مجدد و تأخیر بین آن‌ها باید بر اساس محیط خاص و حساسیت عملیات قابل تنظیم باشد.

تکنیک‌های پیشرفته

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

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

            //Requires transpilation (Babel/Typescript)\nfunction ReadOnly(target, name, descriptor) {\n    descriptor.writable = false;\n    return descriptor;\n}\n\nfunction Trace(target, name, descriptor) {\n    const original = descriptor.value;\n    descriptor.value = function (...args) {\n        console.log(`TRACE: Calling ${name} with arguments: ${args}`);\n        const result = original.apply(this, args);\n        console.log(`TRACE: ${name} returned: ${result}`);\n        return result;\n    };\n    return descriptor;\n}\n\nclass Calculator {\n    constructor(value) {\n        this.value = value;\n    }\n\n    @Trace\n    add(amount) {\n        this.value += amount;\n        return this.value;\n    }\n\n    @ReadOnly\n    @Trace\n    getValue() {\n        return this.value;\n    }\n}\n\nconst calc = new Calculator(10);\ncalc.add(5); // Output will include TRACE messages\nconsole.log(calc.getValue()); // Output will include TRACE messages\n\ntry{\n    calc.getValue = function(){ return "hacked!"; }\n} catch(e){\n    console.log("Cannot overwrite ReadOnly property");\n}\n
            

              
                Copy
              
            
          

فکتوری‌های دکوراتور

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

            function retryDecoratorFactory(maxRetries, delay) {\n  return function(func) {\n    return async function(...args) {\n      let retries = 0;\n      while (retries < maxRetries) {\n        try {\n          const result = await func.apply(this, args);\n          return result;\n        } catch (error) {\n          console.error(`Attempt ${retries + 1} failed:`, error);\n          retries++;\n          await new Promise(resolve => setTimeout(resolve, delay));\n        }\n      }\n      throw new Error(`Function failed after ${maxRetries} retries`);\n    };\n  };\n}\n\n// Use the factory to create a retry decorator with specific parameters\nconst retryFetchData = retryDecoratorFactory(5, 2000)(fetchData);\n
            

              
                Copy
              
            
          

ملاحظات و بهترین شیوه‌ها

\n
• پیشنهاد دکوراتورهای ES را درک کنید: اگر از پیشنهاد دکوراتورهای ES استفاده می‌کنید، خود را با نحو و معناشناسی آن آشنا کنید. آگاه باشید که این هنوز یک پیشنهاد است و ممکن است در آینده تغییر کند.
\n
• از ترانسپایلرها استفاده کنید: اگر از پیشنهاد دکوراتورهای ES استفاده می‌کنید، به یک ترانسپایلر مانند Babel یا TypeScript نیاز خواهید داشت تا کد خود را به فرمتی سازگار با مرورگر تبدیل کند.
\n
• از استفاده بیش از حد خودداری کنید: در حالی که دکوراتورها قدرتمند هستند، از استفاده بیش از حد آن‌ها خودداری کنید. دکوراتورهای زیاد می‌توانند درک و اشکال‌زدایی کد شما را دشوار کنند.
\n
• دکوراتورها را متمرکز نگه دارید: هر دکوراتور باید یک هدف واحد و به خوبی تعریف شده داشته باشد. این امر درک و استفاده مجدد از آن‌ها را آسان‌تر می‌کند.
\n
• دکوراتورهای خود را آزمایش کنید: دکوراتورهای خود را به طور کامل آزمایش کنید تا اطمینان حاصل کنید که طبق انتظار کار می‌کنند و هیچ باگی را معرفی نمی‌کنند.
\n
• دکوراتورهای خود را مستند کنید: دکوراتورهای خود را به وضوح مستند کنید، هدف، کاربرد و هرگونه عوارض جانبی احتمالی آن‌ها را توضیح دهید.
\n
• عملکرد را در نظر بگیرید: دکوراتورها می‌توانند سربار (overhead) به کد شما اضافه کنند. به پیامدهای عملکردی توجه داشته باشید، به ویژه هنگام تزئین توابعی که مکرراً فراخوانی می‌شوند. در صورت لزوم از تکنیک‌های کشینگ استفاده کنید.
\n

مثال‌های دنیای واقعی

دکوراتورهای ماژول را می‌توان در انواع سناریوهای دنیای واقعی به کار برد، از جمله:

\n
• فریم‌ورک‌ها و کتابخانه‌ها: بسیاری از فریم‌ورک‌ها و کتابخانه‌های مدرن جاوااسکریپت به طور گسترده از دکوراتورها برای ارائه ویژگی‌هایی مانند تزریق وابستگی (dependency injection)، مسیریابی و مدیریت وضعیت استفاده می‌کنند. به عنوان مثال، Angular به شدت به دکوراتورها متکی است.
\n
• کلاینت‌های API: از دکوراتورها می‌توان برای افزودن قابلیت‌های ثبت وقایع، کشینگ و احراز هویت به توابع کلاینت API استفاده کرد.
\n
• اعتبارسنجی داده: از دکوراتورها می‌توان برای اعتبارسنجی داده‌ها قبل از ذخیره آن‌ها در پایگاه داده یا ارسال به یک API استفاده کرد.
\n
• مدیریت رویداد: از دکوراتورها می‌توان برای ساده‌سازی منطق مدیریت رویداد استفاده کرد.
\n

نتیجه‌گیری

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