Frontend Web Developer
الگوهای طراحی در javascript - بخش اول
الگوهای طراحی (Design Patterns)
خیلی خلاصه بخوام بگم ، الگوهای طراحی درواقع راهحلهایی هستند برای مشکلاتی که در طراحی و توسعه نرمافزارها بوجود میاد. در طول زمان ، برنامهنویسها به مشکلات رایج و اغلب بزرگی در روند توسعه نرمافزار برمیخوردند که بسیاری ازین مشکلات فارع از زبان و حوزه برنامهنویسی بود. بنابراین برنامهنویسها سعی کردند راهحلهایی برای حل این مشکلات ارائه بدن که به معروفترین و کارآمدترینهای اونها design patterns یا الگوهای طراحی گفته میشه.
اینکه بدونیم کجا و چطوری از الگوهای طراحی استفاده کنیم خیلی مهمه. چون هر الگوی طراحی کاربرد خودشو داره و جه بسا ممکنه با استفادهی نادرست از الگوهای طراحی ، ساختار کد نرمافزار رو دچار مشکلات دوچندان بکنیم. اگر مشکلات نرمافزار رو درست بشناسیم و تشخیص بدیم که باید از کدوم یک از الگوهای طراحی استفاده کنیم ، در این صورت الگوهای طراحی این مزایا رو برامون دارن :
· افزایش مقیاس پذیری (scalability)
· افزایش انعطاف پذیری (flexibility)
· افزایش سرعت توسعه نرم افزار
· کاهش و مدیریت بهتر خطاها
· افزایش خوانایی کد (readability)
الگوهای طراحی با توجه به کاربردها و اهدافی که دارند ، به سه دسته عمومی تقسیم میشن :
۱) الگوهای طراحی سازنده (Creational Design Patterns) : الگوهای طراحی که برای حل مشکلات مربوط به ایجاد اشیاء به ما کمک میکنن. مثل الگوهای Singleton ، Factory method ، Builder و Null Object
۲) الگوهای طراحی ساختاری (Structural Design Patterns) : این الگوهای طراحی برای حل مشکلات توسعه پذیری ساختار نرم افزارها و برای مدیریت بهتر ارتباط بین کلاسها و اشیاء با همدیگه استفاده میشن. مثل الگوهای Adapter، Decorator ، Composite و Facade
۳) الگوهای طراحی رفتاری (Behavioral Design Patterns) : این الگوها درواقع مجموعهای از راهکارهای کدنویسی مربوط به تعامل و ارتباط اشیاء هستند مثل الگوهای Strategy ، Visitor ، Command و Iterator
حالا یکم بریم سراغ بحث اصلیمون. هدف ما اینه که ببینیم چطور و چه مواقعی در javascript از این الگوها استفاده کنیم و چطور کدمون رو بهبود ببخشیم. پس بریم چند تا ازین الگوها رو بررسی کنیم:
الگوی Null Object :
بذارید با یک مثال شروع کنم. اگر دقت کرده باشید ، خیلی از مواقع ما یک متد رو صدا میزنیم (مثلا getUser) و اون متد قراره یک شیء برگردونه. و یه موقعهایی ممکنه اون شیء null یا undefined باشه. خب مشکلش چیه؟
مشکلش اینه که ما هرجایی که با اون شیء کار داریم ، باید بیایم شرط بذاریم و چک کنیم که اگر null یا undefined بود ، فلان کارو انجام بده. مثلا اگر null بود یه خطایی نمایش بده یا اگر undefined بود فلان پراپرتی رو بهصورت پیشفرض ست کنه.
الگوی Null Object میگه بجای اینکه چندجای برنامه if و else بذاری و null بودن شیء مدنظرت رو چک کنی ، بیا یه شیء خالی از جنس شیء مدنظرت تعریف کن و یکبار توی متدی که داری شیء مدنظرت رو برمیگردونی هندلش کن ... همین :)
این مثالو درنظر بگیرید. ما یه کلاس یوزر داریم که در اون نوع یوزر (ADMIN یا GUEST) و نامش رو مشخص میکنیم.
حالا فرض کنید ما میخوایم اطلاعات یوزرهایی که داریم رو مثل نامشون و دستریشون (بر اساس نوع یوزر) رو چاپ کنیم. با استفاده از متد getUser شیء یوزر مدنظرمون برمیگرده و با استفاده از printUser نام و دسترسی یوزر رو چک و بعد چاپ میکنیم. در صورتی که یوزر رو داخل لیست یوزرها پیدا نکردیم و یا نام براش ثبت نشده بود، نام Guest رو براش درنظر میگیریم. به این شکل :
همونطور که میبینید ۲ بار مجبور شدیم یوزر رو چک کنیم که ببینیم null هست یا نه. حالا تصور کنید این شرطها توی پروژههای بزرگ و واقعی چقد میتونه زیاد و نکراری بشه.
حالا بیاید با الگوی Null Object یه دستی به سر و روی این کد بکشیم. کاری که میکنیم اینه یک کلاس Null Object به یوزر اختصاص میدیم. داخل این کلاس مقادیر پیشفرض ست میشه. درواقع شیء ساخته شده از این کلاس ، ورژن null شیء یوزر هستش ... جالبه نه ؟
حالا با اینکار فقط کافیه داخل متد getUser چک کنیم ببینیم یوزر مدنظر وجود داره یا نه. درصورتیکه وجود نداشت یه شیء از کلاس NullUser رو برمیگردونیم و تمام. از بند مابقی شرطها برای null بودن یوزر رها شدیم. کد نهایی به این شکل درمیاد.
ﻣﯿﺒﯿﻨﯿﺪ ﮐﻪ ﮐﺪﻣﻮن ﻣﻨﻄﻘﯽﺗﺮ و ﺳﺎﺧﺘﺎرﻣﻨﺪﺗﺮ ﺷﺪ .در ﺿﻤﻦ ﻣﺸﮑﻠﺎﺗﯽ ﮐﻪ درﺻﻮرت null ﺑﻮدن ﯾﻮزر ﻣﯿﺘﻮﻧﻪ ﺑﻮﺟﻮد ﺑﯿﺎد اﯾﻨﻄﻮری راﺣﺖﺗﺮ ﻫﻨﺪل ﻣﯿﺸﻪ .ﻓﺎﯾﺪهی دﯾﮕﻪش اﯾﻨﻪ ﮐﻪ اﮔﺮ ﺧﻮاﺳﺘﯿﻢ ﻣﻨﻄﻖ ﻫﻨﺪل ﮐﺮدن ﺷﯽء null رو ﺗﻐﯿﯿﺮ ﺑﺪﯾﻢ ﻓﻘﻂ ﮐﺎﻓﯿﻪ ﮐﻠﺎس NullUser رو ﺗﻐﯿﯿﺮ ﺑﺪﯾﻢ.
ﺗﻮی ﺑﺨﺶﻫﺎی ﺑﻌﺪی ﭼﻨﺪ ﻣﻮرد دﯾﮕﻪ از اﻟﮕﻮﻫﺎی ﻃﺮاﺣﯽ رو ﺑﻪ ﻫﻤﺮاه ﮐﺎرﺑﺮد و ﻣﻨﻄﻖ ﭘﯿﺎدهﺳﺎزﯾﺸﻮن ﺑﺎﻫﻢ ﺑﺮرﺳﯽ ﻣﯿﮑﻨﯿﻢ
درضمن برای مطالعه در مورد design pattern ها این سایت بنظرم رفرنس خیلی خوبیه :
dofactory.com/javascript/design-patterns
ﻣﺮﺳﯽ ازﯾﻨﮑﻪ وﻗﺖ ﮔﺬاﺷﺘﯿﺪ :)
مطلبی دیگر از این انتشارات
تجربهی استفاده از hygen در پروژه frontend
مطلبی دیگر از این انتشارات
همه چیز در مورد PSR (بخش اول)
مطلبی دیگر از این انتشارات
الگوهای طراحی در javascript - بخش دوم