چگونه اصول سالید را در ری اکت پیاده سازی کنیم؟ (بخش دوم)

سلام مجدد.توی بخش اول سه تا از اصول سالید رو توضیح دادیم. من باب یادآوری بگم، سالید 5 اصل برنامه نویسی پیشنهادی در زبان های برنامه نویسی شی گراست که با رعایت اون ها می تونیم کدهایی تمیزتر و واضح تر با قابلیت تست و دیباگ راحت تر، انعطاف بالاتر و نگهداری بهتر بنویسیم.این 5 اصل اینا بودن:1. Single responsibility principle2. Open/Closed Principle3. Liskov Substitution Principle4. Interface Segregation Principle5. Dependency Inversion Principleسه تای اولی رو توی بخش قبل توضیح دادیم. وقت تونو نمی گیرم بریم سراغ دوتا اصل آخراصل تفکیک اینترفیس ها (Interface Segregation Principle)همونطور که قبلا گفتم این اصل میخواد بگه که کامپوننتا و توابع، نباید وابسته به متدها و پراپس هایی باشن که از اونا استفاده نمی کنن. درواقع فقط دیتایی که نیاز داریم رو باید پاس بدیم به یه تابع.مثلا فرض کنید که یه سایت دارید برای خرید و فروش خودرو. تو صفحه اول در قالب یه سری کارت، می خواید که تعدادی خودرو رو به عنوان محصول به کاربر نشون بدید. نمایشش هم اینجوریه که هر کارت داخلش یه عکس داره از خودرو، زیرش اسم خودروه و مثلا یه ویژگی دیگه از خودرو مثل رنگش رو هم می خواید نمایش بدید. همین! بعد مثلا کاربر رو هر کارت که کلیک کرد میره تو صفحه اون خودرو و جزئیات دیگه مثل قیمت و سال تولید و ... رو کامل می بینه.حالا دیتایی که شما برا هر محصول دارید به صورت آرایه ای از آبجکت هست که ممکنه این شکلی باشه:و شما کامپوننت تون رو این جوری نوشتین:که توی کامپوننت Card مثلا میاید و عکس و اسم و رنگ ماشین رو نمایش می دید. ایرادی که اینجا وجود داره اینه که طبق اصل چهارم اصول سالید، شما نباید پراپس اضافه بفرستید داخل کامپوننت. یعنی به جای اینکه کل دیتای car رو پراپس کنید داخل، فقط اون سه تا پراپرتی که می خواید رو پراپس کنید.یعنی بهتره اینجوری بنویسیدش:مثالی که زدیم شاید یه کم آبکی بود. ولی خب هدف اصلیم این بود که مفهوم رو ساده برسونم. توی شرایطی که شما دارید تایپ اسکریپت کد می زنید، به خاطر سخت گیری تایپ اسکریپت روی تایپ پراپس هاتون، خیلی وقتا اتوماتیک مجبور میشین این موارد رو اصلاح کنید. چون بعضی جاها واقعا مشکل ساز میشه. مثلا ممکنه یه جای دیگه سایت بخواید از همین کامپوننت Card استفاده کنید. منتها ساختار دیتا متفاوت باشه. اگه تایپ اسکریپت کد بزنید و بخواید کل ساختار دیتا رو بدید بره تو اونوقت کار سخت و کد کثیف میشه. چون مجبورید تایپ کل ساختار دیتا رو دقیق مشخص کنید برای ورودی. ولی اگه از اول اصل تفکیک اینترفیس ها رو رعایت کنید مشکلی پیش نمیاد و مشخص کردن تایپ ها خیلی راحت تر و سرراست تره. اگه با تایپ اسکریپت آشنا نیستید نگران نشید. بعدا که یاد گرفتید متوجه میشید داستان چیه.اصل وارونگی وابستگی ها (Dependency Inversion Principle)به نظر من رعایت کردن این اصل آخر، توی کدنویسی، مشکل تر از بقیه اصوله. بخصوص وقتی کدها پیچیده میشن. البته برای یه برنامه نویس دون پایه مثل من طبیعیه. ولی مطمئنم که با تمرین و ریفکتور کردن دائم کدهامون می تونیم مهارت مون رو افزایش بدیم. مثل رانندگی کردن می مونه. هممون اولش اینکه همزمان حواسمون به گاز و کلاچ و دنده و اینه و ... باشه برامون سخت بوده اما بعد از چند سال رانندگی میشه ناخودآگاه ذهنمون.خب بریم ببینیم داستان چیه. کد زیر رو نگاه کنید:یه فرم لاگین داریم که با سابمیت کاربر، داخل تابع هندل سابمیت یه ای پی آی براساس یوزر و پسورد وارد شده کال میشه. مشکل کجاست؟ مشکل اینه که کامپوننت لاگین فرم ما، به صورت مستقیم به ای پی آی رفرنس داده. بنابراین بین این دوتا وابستگی پیش میاد. و تغییر تو یه کامپوننت ممکنه رو عملکرد کامپوننت (یا تابع یا ماژول یا هر چیزی) دیگه ای تاثیر بذاره. طبق اصل پنجم سالید، این دیپندنسی رو باید ببریم بیرون.یعنی تابع لاگین فرم ما این شکلی بازنویسی میشه:و به جای اینکه ای پی آی رو داخل هندل سابمیت کال کنیم، یه تابع تعریف کردیم به اسم آن سابمیت و بردیمش بیرون (به صورت پراپس پاس دادیم داخل)حالا از بیرون، تو کامپوننت پرنتی که لاگین فرم رو داریم استفاده می کنیم، آن سابمیت رو تعریف می کنیم و ای پی آی مورد نظرمون رو داخلش کال می کنیم. یعنی اینجوری:اینجا دیگه نگرانی از اینکه توابعم روی همدیگه اثر منفی بزارن ندارم. چون از هم جداشون کردم و زیر نظر پرنت شون هستن. درواقع وابستگی اون ها رو از حالت مستقیم به حالت غیرمستقیم تغییر دادم.خب! تموم شد. امیدوارم که خسته نشده باشید. سعی کردم مثال ها ساده باشن و توضیحات خودمونی، تا درک مطلب مشکل نباشه. خوشحال میشم نظرات تون رو بشنوم یا اگر مطلب یا لینکی دارید که می تونه این توضیحات رو بهتر کنه، باهامون به اشتراک بزارید.چندتا از منابعی که من ازشون استفاده کردم اینا بودنسایت کنستانتین لب دوکانال یوتیوب کدروانپست آقای امینی لوممنونم که تا آخر مطلب همراه من بودید.ایام به کام