الگوی Command در React Js

مقدمه

از آنجایی که الگوهای طراحی راه حل‌هایی معمول برای مشکلات رایج در طراحی نرم‌افزار ارائه می‌دهند، بخش پایه و اساسی رشد و توسعه نرم‌افزار هستند. الگوهای طراحی به جای ارائه بخش‌های ویژه نرم‌افزار، فقط مفاهیم خاصی هستند که می‌توانند با روشی بهتر برای رسیدگی به موضوعات تکرار شونده از آنها استفاده کرد.

در چند سال گذشته اکوسیستم توسعه وب به سرعت تغییر کرده. در حالی که بعضی الگوهای طراحی شناخته شده ممکن است ارزش گذشته را نداشته باشند، بعضی دیگر از این الگوها برای حل مشکلات جدید با آخرین تکنولوژی تکامل پیدا کرده اند

کتابخانه جاوا اسکریپت فیسبوک React طی ۵ سال گذشته جذابیت زیادی به دست آورده و در حال حاضر در مقایسه با کتابخانه‌های جاوا اسکریپت رقیب مثل Angular, Vue, Ember  و Svelte  بیشترین تعداد دانلود فریم ورک را در NPM دارد. 

با توجه به محبوبیت React، الگوهای طراحی اصلاح و بهینه شده و الگوهای جدیدی برای ارزش گذاری بیشتر اکوسیستم جدید توسعه وب ایجاد شده‌اند. 

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

توسعه وب جدید و مدرن شامل الگوهای مختلف زیادی است. این پروژه پیاده سازی، مزایا، معایب و مشکلات الگوی طراحی Command را با استفاده از ES2015+ و الگوهای طراحی React-specific و اصلاح و اجرای احتمالی آنها با استفاده از React Hooks و بسیاری از الگوهای بهینه سازی‌های دیگر که می‌توانند به بهبود برنامه وب شما کمک کنند را پوشش می‌دهد.

الگوی Command

با استفاده از الگوی Command می‌توانیم  Object هایی که وظیفه خاصی انجام می‌دهند را از Objectی که متد را فراخوانی می‌کند، جدا کنیم. 

فرض می‌کنیم یک پلتفرم سفارش غذای آنلاین داریم. کاربران می‌توانند سفارش خود را ثبت، پیگیری و لغو کنند.

class OrderManager() {
  constructor() {
    this.orders = []
  }
  placeOrder(order, id) {
    this.orders.push(id)
    return `You have successfully ordered ${order} (${id})`;
  }
  trackOrder(id) {
    return `Your order ${id} will arrive in 20 minutes.`
  }
  cancelOrder(id) {
    this.orders = this.orders.filter(order => order.id !== id)
    return `You have canceled your order ${id}`
  }
}

در کلاس  OrderManager ما به متدهای placeOrder, trackOrder  و cancelOrder دسترسی داریم.

در جاوا اسکریپت کاملاً معتبر است که از این متدها به صورت مستقیم استفاده کنیم 

const manager = new OrderManager();
manager.placeOrder("Pad Thai", "1234");
manager.trackOrder("1234");
manager.cancelOrder("1234");

اما در فراخوانی متدها به صورت مستقیم در نمونه manager نقاط ضعفی نیز وجود دارد. ممکن است بعدها بخواهیم متدهای موجود را تغییر نام دهیم، یا عملکرد متدها تغییر کند.

فرض میکنیم به جای نامگذاری placeOrder بخواهیم نام آن را به addOrder تغییر دهیم. این یعنی باید مطمئن شویم که از متد placeOrder در هیچ بخشی از codebase استفاده نمی‌کنیم، که این می‌تواند در برنامه‌های بزرگتر مشکل ساز باشد.

در عوض میخواهیم متدها را از شئ manager جدا کنیم و برای هر دستور، عملکرد جداگانه ایجاد کنیم.

class OrderManager {
  constructor() {
    this.orders = [];
  }
  execute(command, ...args) {
    return command.execute(this.orders, ...args);
  }
}

حالا کلاس OrderManager را اصلاح می‌کنیم: به جای داشتن متدهای placeOrder, cancelOrder  و trackOrder فقط یک متد واحد خواهیم داشت: execute.

این متد هر دستوری که دریافت کند را اجرا می‌کند. هر Command باید به orders مدیر که به عنوان اولین آرگومان ارسال می‌کنیم، دسترسی داشته باشد.

باید ۳ Command برای مدیریتِ سفارش ایجاد کنیم:

PlaceOrderCommand

CancelOrderCommand

TrackOrderCommand

class Command {
  constructor(execute) {
    this.execute = execute;
  }
}
function PlaceOrderCommand(order, id) {
  return new Command((orders) => {
    orders.push(id);
    return `You have successfully ordered ${order} (${id})`;
  });
}
function CancelOrderCommand(id) {
  return new Command((orders) => {
    orders = orders.filter((order) => order.id !== id);
    return `You have canceled your order ${id}`;
  });
}
function TrackOrderCommand(id) {
  return new Command(() => `Your order ${id} will arrive in 20 minutes.`);
}

حالا به جای اینکه متدها مستقیماً با نمونه OrderManager همراه شوند، توابع مجزایی هستند که می‌توانیم آنها را از طریق متد execute که در OrderManager در دسترس است فراخوانی کنیم.

فواید:

الگوی Command به ما اجازه می‌دهد متدها را از object  که عملیات را اجرا می کند، جدا کنیم. 

در شرایطی که دستورات طول عمر مشخصی دارند یا دستورات باید در نوبت قرار بگیرند و در مواقع خاص اجرا شوند، این الگو به شما کنترل بیشتری می‌دهد.

معایب:

موارد استفاده الگوی Command محدود است و معمولاً کدهای تکراری و غیر ضروری را به برنامه اضافه می‌کند.