سلام ، همه ما آنجا بوده ایم. شما برای ساختن چیزی جذاب هستید ، و “معماری” مانند تکالیف است که می توانید از آن پرش کنید. اما تصور کنید که چیزی را که واقعاً دوستش دارید ، بسازید ، سپس تماشای آن به یک آشفتگی درهم و برهم تبدیل می شود زیرا شما کاملاً نمی دانید چگونه آن را سازماندهی کنید. یا بدتر از آن ، شخص دیگری سعی می کند کمک کند ، و این هرج و مرج خالص است.
خبر خوب: لازم نیست اینگونه باشد. کمی یادگیری در مورد چگونگی ساختار کد شما می تواند یک تن سردرد (و اشکهای آینده) برای شما ذخیره کند.
معماری چیست؟
این فقط ساختار است. به آن فکر کنید مانند سازماندهی لیست های پخش خود ، اما برای کد شما در مورد آن است چگونه همه این پرونده ها و قطعات با هم کار می کنندبشر این راهی برای جلوگیری از تبدیل کد شما به یک هیولا اسپاگتی 3 هفته است.
درست انجام شده ، کد شما را آسانتر می کند:
- حفظ کردن، زیرا هیچ پروژه ای واقعاً “انجام شده” نیست
- گسترش دادن، زیرا شما می خواهید آن ویژگی را اضافه کنید
- درک کردن، زیرا آینده-شما سزاوار رحمت هستید
ملاقات با MVC
یکی از تثبیت شده ترین الگوهای موجود در آنجا MVC است: مدل-نمای-کنترلر. این برای همیشه در اطراف بوده است ، و به دلایل خوبی … این کار می کند.
چرا قبل از یک چارچوب جلوی MVC (یا هر الگوی معماری) را یاد بگیرید؟
واکنش ، زاویه ای ، vue ، همه آنها نوعی معماری را برای شما اعمال می کنند. اما اگر قبلاً نمی فهمید که چرا این ساختار اهمیت دارد ، یا چگونه می توانید آن را از ابتدا انجام دهید ، می خواهید سریع به سقف ضربه بزنید.
اگر می توانید با استفاده از MVC یک برنامه کوچک را در وانیل JS بکشید ، بعداً 10 × با اطمینان بیشتری خواهید داشت. شما همچنین از اشتباه گرفتن “جادوی چارچوب” برای “نبوغ خود” جلوگیری خواهید کرد. از من بپرسید که چگونه می دانم
پنج قسمت متحرک
صرف نظر از الگوی ، شما به طور کلی پنج قسمت متحرک خواهید داشت:
- منطق ارائه (لایه UI): چیزها را روی صفحه نمایش می دهد. هیچ چیز بیشتر ، نه چیزی کمتر.
- منطق برنامه (روتر): به رویدادهای ناوبری و UI پاسخ می دهد. اقدامات کاربر را به رفتار برنامه نقشه می کند.
- منطق تجارت: مشکلات تجاری واقعی مانند تطبیق شما با صدای کامل Tiktok ، محاسبه XP برای بازی یا تقسیم صورتحساب Venmo را حل می کند.
- حالت: داده های برنامه خود را پیگیری می کند. در حالت ایده آل بدون از دست دادن ذهن خود وقتی کاربر بیش از حد کلیک می کند.
- کتابخانه HTTP: دسته ارسال/دریافت داده ها (اختیاری ، اما در برنامه های دنیای واقعی ، تقریباً همیشه لازم است).
نقشه برداری آن به MVC
| لایه MVC | چه کاری انجام می دهد | شامل کردن |
|---|---|---|
| مدل | مغز | منطق تجارت ، دولت |
| نمایش | صورت | منطق ارائه |
| کنترل کننده | چسب | منطق کاربرد |
| (ابزار) | (ارتباطات) | کتابخانه HTTP |
کنترلر پلی بین مدل و نمای است. این مدل چیزی در مورد دیدگاه نمی داند ، و برعکس. جریان داده ها از مدل → کنترلر → مشاهده. کنترل کننده همچنین اقدامات کاربر را گوش می دهد و تصمیم می گیرد که چه اتفاقی می افتد.
چرا من زحمت یادگیری این را کردم
من همیشه این چیزها را دریافت نکردم. من از یک چکمه 7 ماهه که سریعاً در چارچوب ها ردیابی کردم ، بیرون آمدم. من می توانستم سریع بسازم ، اما واقعاً نمی فهمیدم که جاوا اسکریپت به پایان رسید و چارچوب ها آغاز شد.
هرچه بهتر فهمیدم جاوا اسکریپت به تنهایی چه کاری انجام می داد ، بیشتر برنامه های وب را قابل حفظ و آسان برای اشکال زدایی کردم.
به همین دلیل این چیزها مهم است. هنگامی که پروژه شما پیچیده تر می شود ، (مشارکت کنندگان بیشتر ، ویژگی های بیشتر ، ابزارهای بیشتر) معماری بهترین دوست شما می شود. و هنگامی که قطعات زیر آن چارچوب ها را می فهمید ، آنها احساس ترفندهای جادویی مرموز را متوقف می کنند. شما حدس می زنید ، شروع به اشکال زدایی می کنید ، و حتی ممکن است احساس قدرتی داشته باشید.
برو بیرون و معماری! 🙌
