نحوه استفاده از الگوهای طراحی جاوا اسکریپت

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

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

مقدمه ای بر الگوهای طراحی جاوا اسکریپت

مفاهیم موجود در الگوهای طراحی جاوا اسکریپت به شما کمک می کند تا چگونه مشکلات رایجی را که به عنوان یک توسعه دهنده جاوا اسکریپت با آن مواجه خواهید شد، غلبه کنید.

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

الگوی ماژول

الگوی ماژول، که کپسوله سازی را فراهم می کند، بخشی از سیستم ماژول جاوا اسکریپت است. این روشی را برای ایمن کردن داده ها و رفتار خصوصی در یک ماژول در حالی که یک API عمومی را در معرض دید قرار می دهد، فراهم می کند. این به شما امکان می دهد اشیاء ماژول مستقل با سطوح دسترسی خصوصی و عمومی ایجاد کنید.

این کمی شبیه نحوه استفاده از اصلاح کننده های دسترسی در یک کلاس در زبانی مانند جاوا یا C++ است.

در جاوا اسکریپت، می توانید الگوی ماژول را با استفاده از بسته ها پیاده سازی کنید.

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

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

این به شما امکان می دهد تا کنترل کنید که چه بخش هایی از ماژول برای سایر بخش های پایه کد قابل دسترسی است. این یک مرز روشن بین عملکرد عمومی و خصوصی حفظ می کند.

به عنوان مثال:

const ShoppingCartModule = (function () {
  // Private data
  let cartItems = [];

  // Private method
  function calculateTotalItems() {
    return cartItems.reduce((total, item) => total + item.quantity, 0);
  }

  // Public API
  return {
    addItem(item) {
      cartItems.push(item);
    },

    getTotalItems() {
      return calculateTotalItems();
    },

    clearCart() {
      cartItems = [];
    }
  };
})();

// Usage example
ShoppingCartModule.addItem({ name: 'Product 1', quantity: 2 });
ShoppingCartModule.addItem({ name: 'Product 2', quantity: 1 });

console.log(ShoppingCartModule.getTotalItems()); // Output: 3

ShoppingCartModule.clearCart();
console.log(ShoppingCartModule.getTotalItems()); // Output: 0

در این مثال، ShoppingCartModule نشان دهنده یک ماژول است که با استفاده از الگوی ماژول ایجاد شده است. اجرای کد به این صورت است:

1. IIFE کل بلوک کد را پیچیده می کند و تابعی را ایجاد می کند که بلافاصله پس از اعلان اجرا می شود. این یک محدوده خصوصی برای اعضای ماژول ایجاد می کند.
2. cartItems یک آرایه خصوصی است. به طور مستقیم از خارج از ماژول قابل دسترسی نیست.
3. ()calculTotalItems یک روش خصوصی است که تعداد کل اقلام موجود در سبد خرید را محاسبه می کند. از متد ()reduce برای تکرار روی آرایه cartItems و جمع‌بندی مقادیر همه آیتم‌ها استفاده می‌کند.
4. ماژول API عمومی خود را به عنوان یک شی به معنای واقعی کلمه برمی گرداند و سه روش عمومی را نشان می دهد: addItem()، getTotalItems() و clearCart().
5. در خارج از ماژول، می توانید به روش های عمومی ماژول برای تعامل با عملکرد سبد خرید دسترسی داشته باشید.

این مثال نشان می‌دهد که چگونه الگوی ماژول به شما امکان می‌دهد داده‌های خصوصی (cartItems) و رفتار (calculateTotalItems) را درون ماژول کپسوله کنید، در حالی که یک رابط عمومی (addItem، getTotalItems و clearCart) برای تعامل با ماژول ارائه می‌دهد.

الگوی مشاهده گر

الگوی Observer یک وابستگی یک به چند را بین اشیا ایجاد می کند. هنگامی که وضعیت یک شی تغییر می کند، به تمام وابستگان خود اطلاع می دهد و آنها به طور خودکار به روز می شوند. این الگو به ویژه برای مدیریت تعاملات رویداد محور یا جداسازی اجزا در یک سیستم مفید است.

در جاوا اسکریپت، می‌توانید الگوی Observer را با استفاده از addEventListener داخلی، متدهای dispatchEvent یا هر مکانیزم مدیریت رویداد پیاده‌سازی کنید. با عضویت ناظران در رویدادها یا موضوعات، می توانید آنها را در صورت وقوع رویدادهای خاص مطلع و به روز کنید.

به عنوان مثال، می توانید از الگوی Observer برای پیاده سازی یک سیستم اطلاع رسانی ساده استفاده کنید:

// Observer pattern implementation
function NotificationSystem() {
  // List of subscribers
  this.subscribers = [];

  // Method to subscribe to notifications
  this.subscribe = function (subscriber) {
    this.subscribers.push(subscriber);
  };

  // Method to unsubscribe from notifications
  this.unsubscribe = function (subscriber) {
    const index = this.subscribers.indexOf(subscriber);

    if (index !== -1) {
      this.subscribers.splice(index, 1);
    }
  };

  // Method to notify subscribers
  this.notify = function (message) {
    this.subscribers.forEach(function (subscriber) {
      subscriber.receiveNotification(message);
    });
  };
}

// Subscriber object
function Subscriber(name) {
  // Method to receive and handle notifications
  this.receiveNotification = function (message) {
    console.log(name + ' received notification: ' + message);
  };
}

// Usage example
const notificationSystem = new NotificationSystem();

// Create subscribers
const subscriber1 = new Subscriber('Subscriber 1');
const subscriber2 = new Subscriber('Subscriber 2');

// Subscribe subscribers to the notification system
notificationSystem.subscribe(subscriber1);
notificationSystem.subscribe(subscriber2);

// Notify subscribers
notificationSystem.notify('New notification!');

هدف در اینجا این است که به چندین مشترک اجازه داده شود در صورت وقوع یک رویداد خاص اعلان دریافت کنند.

تابع NotificationSystem سیستمی را نشان می‌دهد که اعلان‌ها را ارسال می‌کند و تابع Subscriber نشان‌دهنده گیرندگان اعلان‌ها است.

NotificationSystem آرایه ای به نام مشترکین دارد تا مشترکینی را که می خواهند اعلان دریافت کنند ذخیره می کند. روش subscribe به مشترکین اجازه می دهد تا با اضافه کردن خود به آرایه مشترکین ثبت نام کنند. روش لغو اشتراک، مشترکین را از آرایه حذف می کند.

روش اطلاع رسانی در NotificationSystem از طریق آرایه مشترکین تکرار می شود و روش دریافت اعلان را برای هر مشترک فراخوانی می کند و به آنها امکان می دهد اعلان ها را مدیریت کنند.

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

برای استفاده از الگوی مشاهده‌گر، یک نمونه از NotificationSystem ایجاد کنید. سپس می توانید نمونه هایی از Subscriber ایجاد کنید و با استفاده از روش subscribe آنها را به سیستم اطلاع رسانی اضافه کنید.

ارسال یک اعلان، روش دریافت اعلان را برای هر مشترک فعال می کند و پیام را برای هر مشترک ثبت می کند.

الگوی Observer اتصال آزاد بین سیستم اطلاع رسانی و مشترکین را امکان پذیر می کند و امکان انعطاف پذیری را فراهم می کند. این الگو جداسازی نگرانی‌ها را ترویج می‌کند که نگهداری در سیستم‌های رویداد محور را آسان‌تر می‌کند.

استفاده از الگوهای پیشرفته جاوا اسکریپت

در اینجا چند نکته کلی برای استفاده موثر از الگوهای جاوا اسکریپت پیشرفته آورده شده است:

• مفاهیم عملکرد را در نظر بگیرید: الگوهای پیشرفته ممکن است پیچیدگی بیشتری ایجاد کند که می تواند بر عملکرد تأثیر بگذارد. به پیامدهای عملکرد توجه داشته باشید و در صورت لزوم بهینه سازی کنید.
• اجتناب از الگوهای ضد الگو: الگوها را کاملاً درک کنید و از قرار گرفتن در ضد الگوها یا سوء استفاده از آنها خودداری کنید. از الگوهایی در جایی استفاده کنید که منطقی باشند و با الزامات برنامه شما هماهنگ باشند.
• از قراردادهای کدنویسی پیروی کنید: برای حفظ خوانایی و سازگاری در پایه کد خود، به طور مداوم از قراردادهای کدگذاری پیروی کنید. از نام متغیرها و توابع معنی دار استفاده کنید و مستندات واضحی برای الگوهای خود ارائه دهید.

هنگام استفاده از این الگوها مراقب باشید

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

از سوی دیگر، الگوی Observer با برقراری رابطه موضوع-مشترک، ارتباط بین اجزا را تسهیل می کند.

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

منبع مقاله