الگوی طراحی شماره 6 – الگوی ترکیبی

Summarize this content to 400 words in Persian Lang
در مقاله امروز، که بخشی از سری ما در مورد الگوهای طراحی ظاهری است، الگوی ترکیبی را توضیح می‌دهم، نمونه‌های واقعی را بررسی می‌کنم و یک پیاده‌سازی عملی جاوا اسکریپت را ارائه می‌دهم. بیایید شیرجه بزنیم!

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

در جاوا اسکریپت، الگوی ترکیبی را می توان با ایجاد یک کلاس جزء پایه که رابط مشترک را برای اشیاء ساده و ترکیبی تعریف می کند، پیاده سازی کرد. اشیاء “برگ” نشان دهنده اشیاء انتهایی در ترکیب هستند، در حالی که اشیاء ترکیبی می توانند شامل سایر اشیاء برگ یا ترکیبی باشند.

سناریوی مورد واقعی

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

اینجاست که الگوی ترکیبی وارد عمل می شود. با برخورد یکنواخت عناصر UI و گروه‌هایی از عناصر، توسعه‌دهندگان می‌توانند مدیریت اجزای تودرتو را ساده‌تر کنند. به عنوان مثال، یک سیستم منو را در نظر بگیرید که در آن ما دو نوع مؤلفه داریم: MenuItem و Menu. MenuItem یک آیتم منو را نشان می دهد، در حالی که Menu می تواند شامل چندگانه باشد MenuItem اشیاء و غیره Menu اشیاء. هر دو MenuItem و Menu یک رابط مشترک را پیاده سازی کنید، که به منوی اصلی اجازه می دهد تا به طور یکسان با آنها برخورد کند. این الگو نه تنها کد را قابل مدیریت تر می کند بلکه توسعه پذیری آن را نیز افزایش می دهد.

دست در

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

// Component interface
class MenuComponent {
add(component) {}
remove(component) {}
getChild(index) {}
display() {}
}

// Leaf object
class MenuItem extends MenuComponent {
constructor(name) {
super();
this.name = name;
}

display() {
console.log(this.name);
}
}

// Composite object
class Menu extends MenuComponent {
constructor(name) {
super();
this.name = name;
this.children = [];
}

add(component) {
this.children.push(component);
}

remove(component) {
this.children = this.children.filter(child => child !== component);
}

getChild(index) {
return this.children[index];
}

display() {
console.log(this.name);
this.children.forEach(child => child.display());
}
}

// Client code
const mainMenu = new Menu(‘Main Menu’);
const menuItem1 = new MenuItem(‘Item 1’);
const menuItem2 = new MenuItem(‘Item 2’);
const subMenu = new Menu(‘Sub Menu’);
const subMenuItem1 = new MenuItem(‘Sub Item 1’);

mainMenu.add(menuItem1);
mainMenu.add(menuItem2);
mainMenu.add(subMenu);
subMenu.add(subMenuItem1);

// Display the menu structure
mainMenu.display();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید کد را تجزیه کنیم:

کامپوننت منو: این کلاس پایه است که به عنوان یک رابط برای اشیاء برگ و ترکیبی عمل می کند. این روش های رایج مانند را تعریف می کند add، remove، getChild، و display.

آیتم منو: این کلاس نشان دهنده اشیاء برگ در الگوی ترکیبی است. گسترش می یابد MenuComponent و اجرا می کند display روشی برای خروجی نام آن

منو: این کلاس اشیای ترکیبی را نشان می‌دهد که می‌توانند حاوی فرزندان (هر دو MenuItem و دیگر Menu اشیاء). گسترش می یابد MenuComponent و روش هایی را برای افزودن، حذف، بازیابی و نمایش فرزندان خود پیاده سازی می کند.

کد مشتری: مثال یک ساختار منو با یک منوی اصلی، آیتم های منو و یک منوی فرعی ایجاد می کند. سپس مواردی را به منوی اصلی و زیر منو اضافه می کند و در نهایت کل ساختار را نمایش می دهد.

نتیجه

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

اگر سوالی دارید در زیر نظر دهید. همچنین، مطمئن شوید که مقالات دیگر در سری الگوهای طراحی ظاهری ما را بررسی کنید!

منتظر پست بعدی ما باشید که هفته آینده میاد!

دعوتنامه فوق العاده – 5000 دلار برنده شوید

بنابراین، در حالی که اینجا هستید، اجازه دهید از شما دعوت کنم که در آگوست Superthis آینده ما شرکت کنید!

از 9 تا 31 آگوست، چالشی برای تغییر تعاملات مجازی خود با پلتفرم ارتباط و همگام سازی داده ها در زمان واقعی SuperViz و شانس برنده شدن یک جایزه 5000 دلاری خواهید بود.

برای دریافت به روز رسانی ها، نکات و منابع و آماده شدن برای هک، همین حالا ثبت نام کنید!

// Component interface
class MenuComponent {
  add(component) {}
  remove(component) {}
  getChild(index) {}
  display() {}
}

// Leaf object
class MenuItem extends MenuComponent {
  constructor(name) {
    super();
    this.name = name;
  }

  display() {
    console.log(this.name);
  }
}

// Composite object
class Menu extends MenuComponent {
  constructor(name) {
    super();
    this.name = name;
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }

  remove(component) {
    this.children = this.children.filter(child => child !== component);
  }

  getChild(index) {
    return this.children[index];
  }

  display() {
    console.log(this.name);
    this.children.forEach(child => child.display());
  }
}

// Client code
const mainMenu = new Menu('Main Menu');
const menuItem1 = new MenuItem('Item 1');
const menuItem2 = new MenuItem('Item 2');
const subMenu = new Menu('Sub Menu');
const subMenuItem1 = new MenuItem('Sub Item 1');

mainMenu.add(menuItem1);
mainMenu.add(menuItem2);
mainMenu.add(subMenu);
subMenu.add(subMenuItem1);

// Display the menu structure
mainMenu.display();