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

الگوی طراحی mediator در جاوا اسکریپت نوشته شده در   javascript 28 دسامبر , 2018 توسط  عباس حسینی

الگوی طراحی mediator جزو الگوهایی است که باعث کاهش ارتباط بین آبجکت های مختلف و در نتیجه decouple شدن آنها میشود و از طریق یک واسط از ارتباط مستقیم آبجکت ها با یکدیگر جلوگیری میشود

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

mdiator pattern الگوییست که در آن ارتباط بین چند آبجکت داخل یک آبجکت کپسوله میشود
الگوی طراحی mediatr
خب این تعریف در نگاه اول کمی گنگ به نظر میرسد منظور از این تعریف این است که وقتی چندین آبجکت داریم که قرار است ارتباطات پیچیده ای بین آنها باشد دیگر حق ارتباط مستقیم با یکدیگر را ندارند بلکه یک mediator به عنوان واسط عمل کرده و همه آبجکت ها درخواست های خود را برای mediator میفرستند و خود mediator تصمیم میگیرد که به کدام آبجکت اطلاع رسانی میکند، با این روش آبجکت های دیگر اطلاعی از هم ندارند و از هم decouple میشوند

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

برای پیاده سازی الگوی mediator کافیست مسئله خود را بررسی کنید و اگر دیدید ارتباط زیاد بین عناصر زیادی وجود دارد تصمیم به استفاده از این الگو بگیرد

برای پیاده سازی در کد روش های مختلفی میتوان استفاده کرد اما من ترجیح میدهم از حالت پرکاربرد آن که شبیه الگوی observer است، استفاده کنم یعنی یک کلاس mediator داشته باشیم که شامل دو متد subscribe و notify باشد
notify وظیفه اطلاع رسانی درخواست به آبجکت مورد نظر را دارد و شامل دو ورودی نام و درخواست میباشد که من در اینجا name و fn نامگذاری کرده ام

و subscribe وظیفه ثبت اشیایی را دارد که mediator قرار است به آنها اطلاع رسانی کند و دارای دو ورودی name و change میباشد

پس شروع به ساخت کلاس با مشخصات ذکر شده میکنیم


//MediatorPattern
class MediatorPattern {
  constructor(){
    this.channels = {}
  }
  subscribe(name, fn){
    this.channels[name] = fn
  }
  notify (name ,change){
    this.channels[name](change) 
  }
}

من برای استفاده از این الگو قصد دارم چند نقطه در صفحه ایجاد کنم و برای اینکه درخواست تغییر رنگ را مستقیما به آنها بدهم، این کار را از طریق mediator انجام دهم


var MEDIATOR = new MediatorPattern();
MEDIATOR.subscribe('o1', color => {$('#o1').css('background',color)} );
MEDIATOR.subscribe('o2', color => {$('#o2').css('background',color)} );
MEDIATOR.subscribe('o3', color => {$('#o3').css('background',color)} );

MEDIATOR.notify('o1','red')
MEDIATOR.notify('o2','blue')

نتیجه استفاده و اجرای نهایی این الگو را در ادامه میتوانید مشا هده کنید که از طریق mediator رنگ دلخواه را به شی o1 و  o2 ارسال کرده ایم

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

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

زمانی از این الگو استفاده میکنیم که ببینم که ارتباطات زیادی بین آبجکت های مختلف وجود دارد و این الگو شباهت ها و تفاوت هایی با الگوی observer دارد
مثلا هر دو برای برای ارتباط بین آبجکت ها استفاده میشوند و باعث decouple شدن آنها از هم میشوند ولی تفاوت عمده این دو الگو این است که در الگوی mediator یک آبجکت مرکزی وجود دارد که ارتباط بین بقیه رو ایزوله میکند

 

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

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns