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

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

تا به حال اینکه در فصول مختلف لباس های مختلفی را میپوشید دقت کرده اید ! مثلا در زمستان لباس گرم مثل بافت و در تابستان یک لباس گرم مثل تی شرت میپوشید در واقع بدون اینکه بدانید از الگوی طراحی decorator استفاده کرده اید در ادامه رابطه فصل های سال و الگوی decorator را برای شما توضیح خواهم داد .

لیست مطالب

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

decorator design pattern  الگویی است که توانایی افزودن یک رفتار (functionality) به شی ساخته شده از کلاس موجود در حین runtime بدون تغییر در اشیای ساخته شده از آن کلاس را برای ما فراهم میکند.

الگوی طراحی decorator

تفاوت decorator با subclass  اینه که در زیر subclass رفتار در زمان کامپایل به یک شی اضافه میشه اما decorator در زمان runtime

از آنجایی subclass از کلاس اصلی ارث میبره، روی همه اشیای ساخته شده از کلاس اصلی اثر میزاره و رفتار رو بهشون اضافه میکنه اما decorator میتونه این کار رو روی یک شی خاص انجام بده

ممکنه این سوال برای شما پیش بیاد که یعنی چی که در حین runtime به یک شی رفتار اضافه میشه ؟

خب برای پاسخ به این سوال به مثل فصل ها بر میگردیم یک کلاس شخص به خودی خودی لباس ندارد اما بر اساس نیاز در فصل سرد لباس گرم و در فصل تابستان لباس گرم میپوشد بنابراین منظور از runtime یعنی بعد از ساخته شدن شی از روی کلاس در حین اجرای کد امکان تغییر اون کلاس وجود ندارد بنابراین با یک decorator این رفتار رو بهش اضافه میکنیم

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

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


class Person {
  constructor (name) {
    this.name = name
  }
}

یک کلاس SummerDecorator رو داریم که به یک شخص بدون لباس یک لباس تابستانی اضافه میکند


class SummerDecorator {
  constructor(person, dress){
     this.person = person;
     this.person.dress = dress
  }  
}

و نهایتا یک کلاس WinterDecorator رو داریم که به یک شخص بدون لباس یک لباس تابستانی اضافه میکند


class WinterDecorator {
  constructor(person, dress){
     this.person = person;
     this.person.dress = dress
  }  
}

برای استفاده از این الگو فرض میکنیم دو شخص به نام عباس (person1) و محمد (person2) داریم که عباس در یک کشور گرم و محمد در یک منطقه سردسیر زندگی میکند بنابراین عباس مجبور است لباس خنک بپوشد که از SummerDecorator براِی آن استفاده میکنیم
و محمد مجبور است لباس گرم بپوشد که از WinterDecorator برای آن استفاده میکنیم


class Person {
  constructor (name) {
    this.name = name
  }
}

class SummerDecorator {
  constructor(person, dress){
     this.person = person;
     this.person.dress = dress
  }  
}
class WinterDecorator {
  constructor(person, dress){
     this.person = person;
     this.person.dress = dress
  }  
}

var person1 = new Person('abbas');
var person2 = new Person('mohammad');

var personInSummer = new SummerDecorator (person1, 'T-Shirt');
var personInWinter = new WinterDecorator (person2, 'Coat');

در ادامه نتیجه کامل اجرای کد را میتوانید ببنید که لباس تی شرت به عباس تخصیص داده شد و لباس کت به محمد تخصیص داده شد پس با استفاده از الگوی decorator رفتار شی های ساخته شده از کلاس Person را تغییر دادیم بدون اینکه روی بقیه اشیا ساخته شده از کلاس Person اثر بگذارد

See the Pen Decorator design pattern by abbas hosseini (@abizebel) on CodePen.

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

از الگوی decorator زمانی استفاده میکنیم که بخواهیم در هنگام runtime یک سری مسئولیت ها به شی اضافه کنیم و همچنین decorator ها انعطاف بیشتری نسبت به ارث بری دارند

به عبارت دیگر الگوی decorator به ما کمک میکنه به اندازه تمام حالت کلاسی نسازیم که همه صفات و رفتار ها رو داشته باشه بلکه در زمان نیاز یا runtime این صفات و رفتار را به آن اضافه میکنیم

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

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns