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

الگوی طراحی command در جاوا اسکریپت نوشته شده در   javascript ۲۴ فروردین , ۱۳۹۸ توسط  عباس حسینی

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

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

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

این الگو از ۴ بخش اصلی تشکیل شده است :
command : حاوی اطلاعاتی درباره اکشن مورد نظر
client : مسئول ساخت commnad و ارسال آن برای invoker است
invoker : کسیکه از command استفاده میکند
reciever : شامل تاریخچه ای از command ها و میدونه که چه موقع کدام command باید فراخوانی شود

command pattern

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

برای پیاده سازی این الگو من قصد دارم از مثال ماشین حساب استفاده کنم که شامل ۴ عمل اصلی جمع، تفریق، ضرب و تقسیم میباشد پس باید تمام این اعمال داخل یک command کپسوله شود پس قبل از هر چیز نیاز به یک کلاس به نام Command داریم که مقدار ، عمل فعلی و undo را در خود نگهداری کند مثلا عمل undo برای یک عمل جمع، تفریق میباشد


//Command Class
class Command {
  constructor (execute, undo, value){
    this.execute = execute;
    this.undo = undo;
    this.value = value;
  }
}

و به تعداد ۴ عمل اصلی ماشین حساب command داریم که هر یک از کلاس اصلی Command به ارث میبرند


class AddCommand extends Command {
  constructor (value) {
    super(add, sub, value)
  }
}
class SubCommand extends Command {
  constructor (value) {
    super(sub, add, value)
  }
}
class MulCommand extends Command {
  constructor (value) {
    super(mul, div, value)
  }
}

class DivCommand extends Command {
  constructor (value) {
    super(div, mul, value)
  }
}

پس از ساخت command ها نوبت به ساخت reciever یا همان ماشین حساب میرسد ،reciever در اینجا ماشین حساب میباشد که از تاریخچه فراخوانی command ها و نحوه صدا زدن آنها کاملا مطلع است
reciever یک کلاس به نام Calculator است که دارای چند متد اصلی execute و undo میباشد که execute وظیفه اجرای command و undo وظیفه برگرداندن به حالت قبل هر command را به عهدا دارد


//Reciever
class Calculator {
  constructor (){
    this.current = 0;
    this.history = [];
  }
  execute (command) {    
    this.current =  command.execute(this.current, command.value);
    this.history.push(command);
  }
  undo() {
    var command = this.history.pop();
    this.current = command.undo(this.current, command.value);
  }
  setCurrent (val){
    this.current = Number(val)
  }
  getValue (){ 
    return this.current
  }
  reset (){
    this.current = 0;
    this.history = [];
  }
}

حال سوال اینجاست که چه کسی اینجا نقش invoker را ایفا میکند ؟
invoker در ماشین حساب همان دکمه های + – / * تقسیم هستند که تعیین میکنند کدام command باید اجرا شود

نتیجه اجرای این الگو را در ادامه میتوانید در قالب یک ماشین حساب مشاهده کنید

See the Pen
Javascript – Command Design Pattern
by abbas hosseini (@abizebel)
on CodePen.

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

به طور کلی زمانی از این الگو استفاده میکنیم که یک کار قرار است در زمان و مکان های مختلف انجام پذیرد اینجاست که این الگو با کپسوله کردن اطلاعات آن کار خاص به ما اجازه استفاده از آن با ارسال مقادیر به آن ، در مکان های مختلف را میدهد و این یعنی اجرای یک فرمان کاملا مستقل نسبت به محل اجرای آن یا همان decoupling

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

 

Creational Patterns

 

Structural Patterns

 

Behavioral Patterns