81- آموزش جاوااسکریپت | آشنایی با Design Patternها

در این بخش قرار است درباره Patternها در JavaScript صحبت کنیم.
تقریباً تمام زبان‌های برنامه‌نویسی از Design Patternها استفاده می‌کنند؛ الگوهایی که در موقعیت‌های مختلف برای حل مسائل رایج طراحی نرم‌افزار به کار می‌روند.

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

می‌توان Patternها را نوعی قالب برنامه‌نویسی هم در نظر گرفت؛ قالب‌هایی که به ما کمک می‌کنند کد را با ساختار بهتر و روش مشخص‌تری بنویسیم.

Patternها چه کاربردی دارند؟

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

برای مثال:

• Factory Pattern و Prototype Pattern معمولاً برای ایجاد آبجکت‌ها استفاده می‌شوند.
• Module Pattern و نسخه‌های مختلف آن بیشتر برای ساختار کلی کد کاربرد دارند.
• الگوهای کامل‌تری مثل MVC یا Model View Controller می‌توانند حتی در سطح کل یک اپلیکیشن استفاده شوند.

به همین دلیل، مبحث Design Patternها موضوعی گسترده است و می‌تواند از بخش‌های کوچک کد تا معماری کلی یک برنامه را پوشش دهد.

هدف این بخش

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

در بخش‌های قبلی، به‌صورت غیرمستقیم با بعضی از این الگوها کار کرده‌ایم؛ مثل:

• Constructor Pattern
• Prototype Pattern

اما در این بخش می‌خواهیم مشخص‌تر و هدفمندتر به سراغ چند الگوی طراحی مهم برویم.

الگوهایی که در این بخش بررسی می‌کنیم

در ادامه با چند Pattern مهم در JavaScript آشنا می‌شویم:

1. Module Pattern

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

• متغیرها و توابع خصوصی
• متغیرها و توابع عمومی

را از هم جدا کنیم.

2. Revealing Module Pattern

این الگو نسخه‌ای از Module Pattern است که ساختار شفاف‌تری برای مدیریت اعضای عمومی و خصوصی ارائه می‌دهد.

3. Singleton Pattern

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

4. Factory Pattern

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

5. Observer Pattern

این الگو به ما اجازه می‌دهد روی رویدادها subscribe و unsubscribe انجام دهیم.
یعنی بخش‌هایی از برنامه می‌توانند به تغییرات یا رخدادهای مشخصی گوش دهند و در صورت نیاز از آن‌ها جدا شوند.

6. Mediator Pattern

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

7. State Pattern

این الگو برای مدیریت وضعیت یا State در برنامه کاربرد دارد.
با استفاده از آن می‌توانیم وضعیت‌های مختلفی برای اپلیکیشن تعریف کنیم و بر اساس تغییر وضعیت، رفتار یا محتوای برنامه را تغییر دهیم.

پروژه‌ی کوچک این بخش

برای درک بهتر State Pattern، در ادامه یک پروژه‌ی کوچک می‌سازیم.
در این پروژه یک صفحه‌ی ساده با Bootstrap خواهیم داشت که شامل چند دکمه است. با کلیک روی این دکمه‌ها، state برنامه تغییر می‌کند و در نتیجه محتوای صفحه نیز به‌روزرسانی می‌شود.

این مثال کمک می‌کند تا کاربرد عملی State Pattern را در یک سناریوی ساده و قابل فهم ببینیم.

جمع‌بندی

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

در این بخش قرار است با چند الگوی مهم در JavaScript آشنا شویم، از جمله:

• Module Pattern
• Revealing Module Pattern
• Singleton Pattern
• Factory Pattern
• Observer Pattern
• Mediator Pattern
• State Pattern

در ادامه، هرکدام از این الگوها را بهتر بررسی می‌کنیم و با نمونه‌های عملی، کاربرد آن‌ها را در JavaScript یاد می‌گیریم.