استفاده از command pattern در انگولار

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

جدا کردن منطق از UI همیشه خوبه. ولی استفاده از command pattern به مراتب تمیزتر و مرتب تر هست.

چون برای جدا کردن منطق از UI به روش های دیگه باید کلی داکیومنت بنویسیم و توضیح بدیم . به نظرم من مزیت روش Command Pattern حذف کلی توضیح و داکیومنت هست. خوبی استفاده پترن ها بجای روش های خودساخته اینه که خیلی کمتر نیاز به داکیومنت و صحبت هست. یک اصطلاح دو کلمه ای به اندازه دو صفحه توضیح کار میکنه.

در این مقاله، با نحوه استفاده از الگوی Command در Angular برای سامان‌دهی بهتر به منطق اقدامات پیچیده آشنا میشیم.

معرفی الگوی Command

تعریف رسمی: الگوی Command یکی از الگوهای طراحی رفتاری است که یک درخواست را به‌صورت یک شیء کپسوله می‌کند. این الگو به ما اجازه می‌دهد درخواست‌ها را پارامترسازی، صف‌بندی، بازگردانی (undo/redo) و ثبت کنیم.

ساختار کلی:

هر کلاس Command معمولاً وابسته به یک گیرنده (Receiver) است که کار واقعی را انجام می‌دهد.

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

چرا از Command Pattern در Angular استفاده کنیم؟

جداسازی منطق از UI

اقداماتی مانند ذخیره‌سازی، حذف، ویرایش و ارسال میتونن از کامپوننت‌ها جدا شده و در کلاس‌های مجزا قرار بگیرند.

افزایش تست‌پذیری

کلاس‌های Command به راحتی قابل تست هستند بدون نیاز به UI.

قابلیت undo/redo

اجرای مجدد یا لغو اقدامات خیلی ساده‌تر میشه.

هماهنگی آسان‌تری بین چند سرویس یا منابع داده ایجاد میشه و مخصوصاً در اپلیکیشن‌های بزرگ با تعامل‌های پیچیده خیلی مفید تره.

پیاده‌سازی نمونه در Angular

بیاین روی سناریوی «ذخیره یک کاربر» کار کنیم

فرض کنید بخواهیم یک کاربر را ذخیره کنیم. این عملیات شامل بررسی وجود کاربر، تماس با API و به‌روزرسانی UI است.

۱. تعریف رابط Command:

۲. تعریف کلاس ذخیره کاربر:

3. استفاده در کامپوننت:

پشتیبانی از Undo/Redo

اگر بخواهیم undo رر اضافه کنیم، می‌تونیم رابط Command رو گسترش بدیم:

و مثلاً در DeleteUserCommand:

سازمان‌دهی بهتر با Command Dispatcher

برای مدیریت مرکزی دستورات، می‌توان یک سرویس CommandDispatcher ساخت:

و در کامپوننت استفاده کرد:

نتیجه‌گیری

استفاده از الگوی Command در Angular یک روش مؤثر برای مدیریت اقدامات پیچیده رابط کاربری به حساب میاد. این الگو با جدا کردن منطق اقدام‌ها از کامپوننت‌ها، باعث میشه کد تمیزتر، منعطف‌تر و تست‌پذیرتر بشه. در پروژه‌های متوسط تا بزرگ، استفاده از این الگو می‌تونه تأثیر زیادی در ساختار و کیفیت کد داشته باشه.

امیدوارم از این مقاله لذت ببرید و براتون مفید باشه.

اگر دوست دارید میتونید از طریق صفحه لینکدین با من در ارتباط باشید :)

موفق باشید :)