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

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

آیا تا به حال برای شما پیش آمده هنگام کار کردن با نرم افزار ورد یا فوتوشاپ یک کاری انجام بدهید و اتفاقی آن را پاک کنید و با استفاده از قابلیت undo آن را به حالت قبل بازگردانید ؟

اگر این حس را تجربه کرده این به صورت ناخودآگاه از الگوی طراحی memento بهره مند شده اید ، در ادامه ارتباط undo و این الگو را به خوبی درک خواهید کرد.

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

الگوی طراحی memento الگوییست که امکان ذخیره سازی state یک آبجکت و در صورت لزوم بازگشت آن را به وضعیت قبلی فراهم میکند

الگوی طراحی memento

اگر به شکل بالا توجه کنید سه عنصر اصلی در این الگو حضور دارند

orginator :  همان آبجکت اصلی که یک کپی از state آن داخل memento نگهداری میشود

memento : محلی که یک کپی از orginator در آن ذخیره میشود

caretaker : مسئول نگهداری memento میباشد

به عبارت دیگر این الگو به ما میگوید که میتوان یک کپی از state آجکت را در محلی به نام memento نگهداری میکنیم تا هر وقت به آن نیاز داشتیم به آن دسترسی پیدا کنیم که در این سناریو مسئول نگهداری memento آبجکتی به نام caretaker میباشد

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

برای پیاده سازی این الگو کافیست ابتدا کلاس CareTaker که مسئول نگهداری memento است را تشکیل بدهیم که خود دارای دو متد اصلی get برای ذخیره و set برای بازگردانی داده میباشد


//Responsible for managing mementos
class CareTaker {
     constructor (){
       this.history = {}
     }

    set  (key, memento) {
        this.history[key] = memento;
    }
    get (key) {
        return this.history[key];
    }
}

چون در اینجا من قصد دارم عمل undo را روی یک textbox نشان بدهم یک کلاس به نام Text تشکیل داده ام که دارای دو متد اصلی save و store میباشد


class Text{
  constructor (id) {
    this.text= '';
    this.id = id;
  }
  save (){
    this.text = $('#'+this.id).val();
    var memento = JSON.stringify(this);
    return memento;
  }
  
  restore (memento){
     var m = JSON.parse(memento);
     for (var prop in m) {
       this[prop] = m[prop];
     }
    $('#'+this.id).val(this.text)
       
  }
}

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

در ادامه نتیجه اجرای این الگو را مشاهده میکنید که با کلیک روی دکمه save مقدار textbox ذخیره میشود و بعد از آن اگر تغییرش دهیم با فشردن دکمه undo به حالت قبل بازمیگردد

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

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

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

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

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns