انواع Design Patterns در Frontend

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

انواع Design Patterns در Frontend

1. Module Pattern (الگوی ماژول)

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

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

مثال در جاوااسکریپت:

 const myModule = (function() {
  let privateVariable = 'I am private';

  function privateMethod() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();

myModule.publicMethod(); // Logs: I am private

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

2. Observer Pattern (الگوی ناظر)

هدف: اجازه می‌دهد تا یک شیء (Subject) تغییرات خود را به اشیاء ناظر (Observers) اطلاع دهد. این الگو برای ساخت برنامه‌هایی که نیاز به مدیریت رویدادها و تعاملات بین بخش‌های مختلف دارند، مفید است.

مثال در جاوااسکریپت:

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log('Observer received data:', data);
  }
}

const subject = new Subject();
const observer1 = new Observer();

subject.subscribe(observer1);
subject.notify('Hello Observers!'); // Logs: Observer received data: Hello Observers!

کاربرد: در فرانت‌اند، این الگو اغلب برای مدیریت رویدادهای UI یا ارتباط بین اجزای مختلف استفاده می‌شود. مثلا در چارچوب‌هایی مانند React برای مدیریت state و رفتار کامپوننت‌ها مفید است.

3. MVC Pattern (Model-View-Controller)

هدف: تقسیم بخش‌های مختلف یک برنامه به سه بخش Model، View و Controller برای جداسازی منطق برنامه، داده‌ها و رابط کاربری.

نحوه‌ی کار:

Model: مدیریت داده‌ها و منطق مرتبط با داده.

View: نمایش داده‌ها به کاربر.

Controller: کنترل تعاملات کاربر و بروزرسانی View و Model.

کاربرد: این الگو در فریمورک‌های مختلف فرانت‌اند مانند Angular و برخی کتابخانه‌های جاوااسکریپتی برای جدا کردن منطق رابط کاربری از داده‌ها استفاده می‌شود.

4. MVVM Pattern (Model-View-ViewModel)

هدف: الگوی MVVM یک جایگزین برای MVC است و معمولاً در فریمورک‌هایی مانند Vue.js و Angular استفاده می‌شود. هدف آن جداسازی لایه‌های داده از منطق رابط کاربری با استفاده از یک لایه واسط به نام ViewModel است.

نحوه‌ی کار:

Model: داده‌ها و منطق برنامه.

View: رابط کاربری.

ViewModel: واسط بین View و Model که مسئول ارتباط بین این دو است و داده‌ها را به روشی قابل فهم برای View ارائه می‌دهد.

کاربرد: این الگو برای پیاده‌سازی برنامه‌های دوطرفه (two-way binding) و تعاملات پیچیده کاربر مفید است.

5. Singleton Pattern (الگوی تک‌نمونه‌ای)

هدف: تضمین می‌کند که یک کلاس فقط یک نمونه داشته باشد و این نمونه در سراسر برنامه به اشتراک گذاشته شود.

مثال در جاوااسکریپت:

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    this.value = Math.random();
    Singleton.instance = this;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1.value === instance2.value); // true

کاربرد: در برنامه‌های فرانت‌اند می‌توان از این الگو برای مدیریت استیت‌ها یا داده‌هایی که باید در سراسر برنامه مشترک باشند، مانند تنظیمات سراسری یا مدیریت لاگین، استفاده کرد.

6. Factory Pattern (الگوی کارخانه‌ای)

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

مثال در جاوااسکریپت:

 class Button {
  constructor(type) {
    if (type === 'primary') {
      return new PrimaryButton();
    } else if (type === 'secondary') {
      return new SecondaryButton();
    }
  }
}

class PrimaryButton {
  render() {
    console.log('Primary Button');
  }
}

class SecondaryButton {
  render() {
    console.log('Secondary Button');
  }
}

const button = new Button('primary');
button.render(); // Logs: Primary Button

کاربرد: در برنامه‌های فرانت‌اند برای ساختن کامپوننت‌ها یا ویجت‌های مختلف بسته به ورودی‌های مختلف یا شرایط خاص، از این الگو استفاده می‌شود.

7. Decorator Pattern (الگوی تزیین‌گر)

هدف: به شما اجازه می‌دهد ویژگی‌های جدید به یک شیء اضافه کنید بدون اینکه ساختار اصلی آن تغییر کند.

مثال در جاوااسکریپت:

function Car() {
  this.cost = function() {
    return 20000;
  };
}

function sunroof(car) {
  const cost = car.cost();
  car.cost = function() {
    return cost + 1500;
  };
}

let myCar = new Car();
sunroof(myCar);

console.log(myCar.cost()); // 21500

کاربرد: در فرانت‌اند این الگو برای افزودن قابلیت‌های اضافی به کامپوننت‌ها یا عناصر UI استفاده می‌شود، بدون اینکه کامپوننت اصلی تغییر کند.

جمع‌بندی

Design Patterns در توسعه فرانت‌اند به شما کمک می‌کنند تا کدهای خود را قابل‌نگهداری، مقیاس‌پذیر و بهینه‌تر کنید. با استفاده از این الگوها، شما می‌توانید مسائلی مانند مدیریت حالت (state)، تعاملات کاربری و ساختارهای پیچیده را به روشی سازمان‌یافته حل کنید.