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

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

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

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

الگوی طراحی adapter در تعریف به ما میگه :

وقتی دو کلاس با interface های مختلف داریم، یک adapter میتونه به عنوان واسط ارتباط بین دو کلاس برقرار کنه تا دو کلاس بتونن از interface های همدیگر استفاده کنند

طبق تعریف که بسیار واضح هم هست وقتی دو کلاس داریم و قراره اینا از هم استفاده کنن اگر interface شون یکی نباشه این کار امکان پذیز نیست، و از طرفی نباید تغییر در دو کلاس موجود ایجاد کنیم، پس بهترین کار ساخت یک کلاس آداپتور است که بین آنها ارتباط برقرار کند ، این الگو بسیار ساده میباشد و نام دیگری که برای آن استفاده میکنند wrapper میباشد

الگوی طراحی adapter

مثال از الگوی طراحی dapter

خب در اینجا ممکنه این سوال براتون پیش بیاد که منظور از interface های متفاوت چیست ؟

در جاوا اسکریپت این interface میتواند یک object باشد شامل چند متد و پروپرتی باشد

ابرای درک مفهوم interface  پیشنهاد میکنم لینک زیر را مطالعه کنید

لینک مطالعه

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

برای پیاده سازی این الگو کافیست دو کلاسی دارای interface متفاوت هستند را شناسایی کنیم سپس با استفاده از این الگو یک کلاس واسط بسازیم که بتواند بین آن دو کلاس ارتباط برقرار کند

در اینجا من میخواهم یک سیستمی را مثال بزنم شامل یک پایگاه داده به صورت xml در اختیار ما قرار دارد و از طرفی یک ماژول تحلیلگر داریم که نتیجه داده ها را به صورت چارت نمایش میدهد ولی مشکلی که وجود دارد این است که ماژول نمایشگر چارت داده را به صورت json دریافت میکند، پس ما میتوانیم با استفاده از الگوی adapter بین این دو ارتباط برقرار کنیم

مثال الگوی طراحی adapter
پس شروع به پیاده سازی میکنم یک کلاس به نام XmlDB داریم که شامل داده های xml ای است و یک متد getData دارد که داده را برای ما آماده استفاده میکند و از طرفی یک کلاس به نام Chart داریم که خود شامل یک متد به نام showResult است که نتیجه داده ای که به آن میدهیم را در قالب چارت گرافیکی نمایش میدهد


class XmlDB{
  getData (){
    return 'XML DATA'
  }
}

class Chart {
  showResult (json){
    document.write(JSON.stringify(json))
  }
}

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


class XmlToJsonAdapter {
  constructor (xml) {
    this.xml = xml
  }
  convert (){
    return {name: 'abbas hosseini'}
  }
}

نتیجه کامل اجرای کد را نیز میتوانید در زیر مشاهده کنید

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

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

با توجه به تعریف این الگو و آنچه از آن یاد گرفتیم متوجه شدیم که زمانی از این الگو استفاده میکنیم که میخواهیم بین دو چیز ارتباط برقرار کنیم که باهم سازش ندارند ، آنجاست که این الگو به کمک ما می آید و ارتباط بین آن دو چیز برقرار میکند
در این الگو دو اصل open/closed principle و single responsibility principle به خوبی رعابت میشود زیرا برای اینکه interface دو کد با هم ارتباط برقرار کنیم به کد های قبلی دست نمیزنیم (ocp) و از طرفی چون یک کلاس جدید برا آداپت کردن ساخته میشود منطق آن کاملا جدا از منطق های قبلی است (srp)

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

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns