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

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 02 مرداد 1397
دسته بندی ها : جاوا اسکریپت

نکته: قبل از خواندن این مطلب نیاز است که دانش خوبی از برنامه‌نویسی شی‌گرا و مباحثی مانند کلاس abstract، ارث‌بری، رابط‌ها، کپسوله‌سازی و... داشته باشید.

چرا باید الگوهای طراحی (دیزاین پترن) را یاد بگیرید؟

بدون مقدمه چینی وارد بحث اصلی ماجرا می‌شوم، دلیل اینکه باید از الگوهای طراحی استفاده کنید این است که با بهره‌گیری از آن شما می‌توانید اپلیکیشن‌های مقایس‌پذیرتر، قابل اعتماد‌تر و همراه با قابلیت پایداری و نگه‌داری ساده‌تر را داشته باشید. مطمئنا تا به حال در رابطه با انواع الگوهای طراحی آشنایی دارید و یا شاید هم با آن‌ها کار کرده باشید، اما ما در دو مطلب قصد داریم که شما را با ۲۳ نوع از الگوهای طراحی یا همان دیزاین پترن‌ها آشنا کنیم.

قبل از این بیایید مطمئن شویم که درک درستی از الگوهای‌ طراحی داریم.

الگوهای طراحی چه هستند؟

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

هدف اصلی الگوهای طراحی حل کردن مشکلات نسلی و ادغامی اشیاء است. به صورت ساده‌تر باید گفت که الگوهای طراحی مانند یک قالب آماده عمل می‌کند که با مشکلات برنامه‌نویسی در دنیای واقعی تعامل دارد. 

تاریخچه و ارزیابی الگوهای طراحی

مفاهیم الگوهای طراحی توسط چهار نفر از توسعه‌دهندگان که نویسنده کتاب elements of reusable object-oriented software پیاده‌سازی و معرفی شد. 

این چهار نفر نویسنده، کتاب را به دو قسمت تقسیم کردند:

قسمت اول را در رابطه با مزایا و معایب مربوط به برنامه‌نویسی شیءگرا توضیح می‌دهند و در قسمت دوم ۲۳ الگوی طراحی کلاسیک نرم افزار را بررسی می‌کنند. 

از آن‌جا به بعد، این چهار نویسنده نقش بسیار بسزایی در دنیای توسعه نرم‌افزار پیدا کردند.

انواع الگوهای طراحی

چهار نویسنده این کتاب، الگوهای طراحی را به سه نوع براساس مشکلات در دنیای اپلیکیشن‌های واقعی تقسیم کردند. این سه مورد را می‌توانید در زیر مشاهده نمایید:

  • الگوهای خلاقانه -Creational Patterns-
  • الگوهای ساختاری -Structural Patterns-
  • الگوهای رفتاری -Structural Patterns-

ما در رابطه با این سه نوع از الگوهای طراحی با آوردن ۲۳ الگوی طراحی این مطلب به صورت بهتر شما را آشنا می‌کنیم. این ۲۳ الگو را با استفاده از شیءگرایی جاوااسکریپت بهتر بیان می‌کنیم.

الگوهای خلاقانه

این الگوها، راه‌هایی را ارائه می‌کنند که از طریق آن‌ها می‌شود یک شیء را ایجاد کرده و در روند برنامه‌نویسی مدیریت کرد. 

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

این الگوها شامل موارد زیر می‌شوند:

  • الگوی کارخانه انتزاعی -Abstract Factory pattern-
  • الگوی سازنده -Builder pattern-
  • الگوی متد کارخانه -Factory Method pattern-
  • الگوی یگانه -Singleton pattern-
  • الگوی نمونه‌سازی -Prototype pattern-

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

الگوی طراحی کارخانه انتزاعی درست مانند یک کارخانه است که در آن همه چیز بسته‌بندی شده است. قسمت‌های مختلفی از این الگو به صورت زیر است:

  • متدی برای سفارش شیء‌ها
  • کارخانه‌ای برای ایجاد شیء‌ها
  • شیءهای نهایی
  • شیءهای نهایی که در خود شیءهای دیگری دارند و در الگوی استراتژی استفاده می‌شوند. 

الگوی استراتژی از حالتی به نام ترکیب‌بندی استفاده می‌کند یا به بیانی دیگر فیلد های کلاس در واقع خود اشیاء  هستند.

چه کارهایی را می‌توانید با کارخانه انتزاعی انجام دهید؟

این حالت به شما اجازه می‌دهد که بدون در نظر گرفتن یک کلاس اصلی که بسیار مهم است، شيءهای مرتبط به همدیگر را ایجاد کنید. شما زمانی از آن‌ها استفاده می‌کنید که اشیا بسیار زیادی داشته باشید که قابلیت تغییر و افزودن به صورت پویا در روند انجام کار را داشته باشند. 

با استفاده از یک کارخانه انتزاعی می‌توانید همه چیزهایی را که تصور می‌کنید را مدل‌سازی کنید و شيءهای مختلف را در کنار همدیگر استفاده نمایید. 

نقطه ضعفی که این الگو دارد این است که می‌تواند بسیار پیچیده شود.

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

الگوی سازنده یک الگوی طراحی است که برای ایجاد شیءهای مختلفی با استفاده از شی‌ءهای دیگری استفاده می‌شود. حالتی که شما در آن می‌خواهید شي بوجود آمده مستقل از شی اصلی خود باشد. همچنین در این حالت شی اصلی مخفی شده و عملا هیچگونه وابستگی مشاهده نمی‌شود.

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

به صورت کلی متد کارخانه درست شبیه به الگوی کارخانه است با این تفاوت که در این حالت شما از یک متد برای برگشت دادن کلاس‌هایی که از یک کلاس اصلی ارث بری کرده‌اند استفاده می‌کنید.

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

چه زمانی باید از الگو متد کارخانه استفاده کنید؟

خب معمولا ممکن است ندانید که به چه اشیائی در کلاس‌های‌تان نیاز دارید. با این حال بسیار مهم است بدانید که تمام کلاس‌های قرار گرفته در این الگو خود از یک کلاس اصلی دیگر بهره می‌گیرند و درک این سیستم سلسله‌ای بسیار مهم است. 

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

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

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

حال ممکن است از خودتان بپرسید که من واقعا چه زمانی به چنین حالتی نیاز دارم؟ حقیقتا، بسیاری از مواقع!

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

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

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

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

از این الگو زمانی استفاده می‌کنید که می‌خواهید تنها از خاصیت‌های یک کلاس در زمان اجرا استفاده کنید. این در حالی‌ست که کلاس‌های بسیار دیگری نیز در اطراف آن وجود دارد.

فایده اصلی این الگو زمانی است که شما دیگر نیاز ندارید که زیرکلاس‌های بسیاری را ایجاد کنید.

الگوهای ساختاری

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

الگوهای مربوط به این حالت حاوی موارد زیر هستند:

  • الگوی تطبیق‌دهنده -Adapter pattern-
  • الگوی پل -Bridge pattern-
  • الگوی مخلوط -Composite pattern-
  • الگوی دکوراتور -Decorator pattern-
  • الگوی نما -Façade pattern-
  • الگوی سبک -Flyweight pattern-
  • الگوی پراکسی -Proxy pattern-

الگوی طراحی تطبیق‌دهنده جاوااسکریپت

قصد داریم در رابطه با یک الگوی طراحی که درک کردن آن ساده است صحبت کنیم. این حالت الگوی طراحی تطبیق‌دهنده نام دارد.

الگوی طراحی تطبیق‌دهنده به شما چه امکاناتی می‌دهد؟

الگوی طراحی تطبیق‌دهنده به شما اجازه می‌دهد که بتوانید با دو رابط ناسازگار با همدیگر کار کنید و آن‌ها را به صورتی دربیاورید که بتوانند با همدیگر کار بکنند. درست مانند تطبیق‌دهنده‌های دیگری که در دنیا مشاهده می‌کنیم. 

از این الگو زمانی استفاده می‌شود که مشتری روی یک رابط مورد نظر سوئیچ کرده و این رابط نمی‌تواند جوابگوی کار باشد. با این حال شما نیاز دارید که از یک تطبیق دهنده در این بین استفاده کنید.

کلاس تطبیق‌دهنده به شما اجازه می‌دهد که از هر رابطی که ممکن است تا حدی به شما در استفاده از رابط مورد هدف کمک می‌کند استفاده کنید. 

در این حالت کلاس‌های مختلف تا زمانی که تطبیق‌دهنده بتواند مشکلات بین آن‌ها را حل کند کار می‌کند.

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

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

این الگو شامل یک رابط است که به عنوان یک پل در بین کلاس abstract و کلاس implementer کار می‌کند. با استفاده از این الگو می توان هر دو نوع کلاس را بدون تاثیر گذاشتن روی همدیگر تغییر داد.

راهنمای پیاده‌سازی الگوی طراحی پل

ما نیاز داریم که از یک الگوی طراحی پل برای اجتناب کردن از ایجاد یک اتصال دائمی بین کلاس abstract و کلاس implementer استفاده کنیم. هر دو کلاس باید قابلیت توسعه توسط کلاس‌های زیرین را داشته باشند.  بنابراین افزودنی‌ها و گزینه‌های مربوط به توسعه نباید روی کلاس‌های اصلی تاثیر داشته باشند. 

ما از این الگوها وقتی استفاده می‌کنیم که قصد استفاده از کلاس implementer در بین شیءهای مختلف را داشته باشیم. 

الگوی طراحی مخلوط جاوااسکریپت

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

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

از این مورد برای زمانی که اجزای یک کد به قسمت‌های کوچکتری تقسیم می‌شوند بسیار کاربردی و مفید است. 

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

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

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

از این الگو به عنوان یک راه‌حل برای اضافه کردن کارایی به یک شيء آماده بدون داشتن مشکلات زیاد استفاده می‌شود. یک نکته که باید مورد توجه‌تان قرار بگیرد این است که از این الگو در قواعد طراحی solid شیءگرا استفاده می‌شود.

الگوی طراحی نما جاوااسکریپت

این الگو رابطی را با یکسری از رابط‌ها در یک سیستم زیرین به صورت یکپارچه قرار می‌دهد. الگوی طراحی نما یک رابط سطح بالاتر را برای استفاده ساده‌تر از زیر‌سیستم‌ها مهیا می‌کند. 

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

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

از این الگو زمانی استفاده می‌شود که بخواهید تعداد بسیار زیادی از شیءهای مشابه همدیگر را ایجاد کنید. منظور از تعداد بسیار زیاد، ۵ هزار نمونه از یک شیء است.

با استفاده از این الگو می‌توانید در مصرف حافظه صرفه‌جویی بسیاری داشته باشید. در این الگو شی‌ءها خاصیت‌های‌شان را با همدیگر به اشتراک می‌گذارند و دیگر نیازی نیست که یکبار دیگر یکی از آن‌ها را ایجاد کنید.

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

یکی از ساده‌ترین الگوهای طراحی در دنیای شیءگرایی جاوااسکریپت الگوی پراکسی نام دارد. 

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

منبع

مقالات پیشنهادی

بایدها و نبایدهای طراحی واکنشگرا

طراحی وبسایت برای موبایل تنها به این معنی نیست که تمام محتوای وبسایت را درون یک صفحه کوچک قرار دهید. شما برای این کار باید دانسته های خود را بیشتر کنی...

المان‌های اصلی برای ساخت وبسایت‌های آژانس طراحی

امروز قصد دارم نکات مهمی در رابطه با چگونگی ساخت بهترین لایه‌بندی وبسایت برای شرکت طراحی‌تان را بگویم. آزمایشگاه‌ها و آژانس‌های طراحی یا اینکه با یکسر...

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

سلسله مراتب بصری برای طراحی یک وبسایت خوب حیاتی و لازم است. این مورد یکی از کلید‌های اصلی برای دست‌ یافتن و رسیدن به اهداف وبسایت‌تان است. 

8 اشتباه در طراحی که باعث وقوع فاجعه می‌شوند

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