الگوی طراحی composite در جاوا اسکریپت

الگوی طراحی composite در جاوا اسکریپت نوشته شده در   javascript ۱۱ آبان , ۱۳۹۷ توسط  عباس حسینی

یکی از پرکابردترین الگو ها در زبان جاوا اسکریپت composite میباشد که در ادامه نحوه پیاده سازی و جزئیات این الگو را بطور کامل توضیح خواهم داد

تعریف الگوی طراحی composite در جاوا اسکریپت

composite pattern الگویی است که با هر عضو یا مجموعه ای از اعضای یک مجموعه رفتار یکسانی میتوانیم داشته باشیم  ، یک مثال رایج برای این الگو ساختار درختی است که هر عضو درخت هم میتواند برگ باشد و هم کامپوزیت
الگوی طراحی composite

javascript-composite

در شکل بالا ۳ عنصر leaf ، composite و component  را داریم که :

component : کلاسی که بقیه leaf ها و composite ها از آن به ارث میبرند

leaf : شی ساخته شده از کلاس component که هیچ فرزندی ندارد

composite : شی ساخته شده از کلاس component که خود دارای  leaf و composite است به عبارت دیگر فرزندانی از جنس خودش را داخل خود دارد

با توجه به تعاریف این سوال در ذهن شما شکل میگیرد که رفتار یکسان نسبت به هر عضو یا یک مجموعه چه مفهومی دارد ؟

پاسخ این سوال این است که یعنی هر عوض از مجموعه از کلاس اصلی component بوده و تمام رفتار ها و متد های آن را دارا میباشند بنابراین رفتار و  صفات مشترکی بین عناصر وجود دارد پس فرقی ندارد که که هر عوض مجموعه leaf یا composite باشد

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

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


class Node {
  constructor (name){
    this.name = name,
    this.childs = []
  }
  addChild (child){
    this.childs.push(child)
  }
}

حال برای طبعیت از الگوی composite باید یک ساختار درختی به وجود آوریم، ابتدا ریشه درخت را با نام languages تشکیل میدهیم که خود دارای دو فرزند به نام c# و  javascript میباشد پس این دو نود را ساخته و با استفاده از متد addChild دو فرزند مورد نظر را به ریشه درخت اضافه میکنیم


var root = new Node('languages');
var a = new Node('javascript');
var b = new Node('c#');
root.addChild(a)
root.addChild(b)

حال نوبت به نود javascript میرسد این نود خود دارای دو فرزند به نام های reactJs و angularJs میباشد که آنها را ساخته و از طریق متد addChild به آن اضافه میکنیم


var c = new Node('angularJs');
var d = new Node('reactJs');
a.addChild(c)
a.addChild(d)

در اینجا ساخت درخت ما از طریق الگوی composit به پایان رسید و شما میتوانید نتیجه ان را در زیر مشاهده کنید

من در قسمت پیش نمایش ساختاری را به وجود آورده ام که شما از طریق کلیک کردن بتوانید درخت ساخته شده را باز و بسته کنید

See the Pen Composite Pattern by abbas hosseini (@abizebel) on CodePen.

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

الگوی composite در جاوا اسکریپت در موقعیت بسیار زیادی مورد استفاده قرار میگیرد اما من برخی از آنها را ذکر میکنم که عبارتد از :

هر جا که یک ساختار درختی از اشیا را داریم

هر جا که یک گروهی از اشیا داریم که با هر گروه یا عضو آن برخورد رفتار یکسان داریم

لیست الگوهای طراحی GOF در جاو اسکریپت

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns