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

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

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

لیست مطالب

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

observer design pattern  الگویی است که در آن یک رابطه یک به چند بین object ها برقرار است بطوریکه تغییر ایجاد شده در یک object بطور اتوماتیک به بقیه نیز اطلاع رسانی میشود

در این سناریو به object هایی که گوش میدهند observer یا subscriber میگویند

و به object ای که بقیه به او گوش میدهند observable یا subject میگویند

دقت کنید که نام هایی مثل publisher/subscriber و  custom events نیز برای این الگو بکار میبرند

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

برای اینکه مفهوم الگوی observer رو کاملا درک کنید من قصد دارم در یک مثال عملی تعدادی input را به عنوان observer و یک input دیگر را به عنوان observable در نظر بگیرم بطوریکه وقتی observable تغییر کند تمام observer ها بروزرسانی شوند اما قبل از آن باید نحوه ساخت الگوی observer را به شما توضیح بدهم

طبق تعریف سه چیز برای پیاده سازی این الگو نیاز داریم

  • یک لیست که مجموعه observer ها رو در خود نگه دارد
  • یک متد که observer را داخل لیست قرار دهد
  • یک متد که تغییرات را به بقیه observer ها اطلاع رسانی کند

پس یک آرایه به نام observers داریم که لیستی از observer ها داخل آن قرار میگیرند و یک متد به نام subscribe که هر observer را داخل لیست قرار میدهد


class ObserverPattern {
  constructor(){
    this.observers = []
  }
  subscribe(observer){
    this.observers.push(observer)
  }
}

و از طرفی یک متد به نام notify لازم داریم که تغییر را به بقیه اطلاع رسانی میکند


class ObserverPattern {
  constructor(){
    this.observers = []
  }
  subscribe(observer){
    this.observers.push(observer)
  }
  notify (change){
    this.observers.forEach(observer => observer(change))
  }
}

حال الگوی observer ما به ساده ترین شکل تشکیل شد و من میتوانم از آن استفاده کنم

خب به مثال عملی زیر که با الگوی observer پیاده سازی شده است توجه کنید وقتی روی دکمه افزودن کلیک میکنید یک input به لیست observer ها افزوده شده و در صفحه نیز نمایش داده میشود و از طرفی وقتی داخل input آبی رنگ متنی تایپ میکنید تغییرات آن به تمام input هایی که از طریق دکمه افزودن به صفحه اضافه شده اند اطلاع رسانی میشود

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

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

به طور کلی از الگوی observer به دلایل استفاده میکنیم

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

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

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns