[Roast: Day 9] – بازسازی مجدد

ek3nk4r 2024-07-26

0 1 خواندن این مطلب 3 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

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

من با هر تغییری که برای پیاده سازی منطق UI باید انجام می دادم غرق می شدم. بنابراین، فهمیدم… «هوم. احتمالاً زمان آن رسیده است که کل برنامه خود را مجدداً اصلاح کنم.

فهرست مطالب

ساده بهتر است

دیروز در مورد جهانی کردن دولتم صحبت کردم. بنابراین من کمی تحقیق کردم.

من می توانم از redux استفاده کنم … که همیشه هنگام استفاده از آن برای رندر مشروط با آن مشکل دارم. من می‌توانم از React استفاده کنم، یا می‌توانم از میان صدها کتابخانه مدیریت حالت منبع باز انتخاب کنم.

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

به نظر می رسد، به روز رسانی یک مقدار سیگنال، مؤلفه را دوباره رندر نمی کند (بر اساس طراحی). بنابراین، اولین متغیری که من پیاده‌سازی کردم خیلی کاربرد نداشت، زیرا وضعیت فعال را ردیابی می‌کرد. Roaster پنجره در من Home جزء.

به خوبی پنجره را باز می کرد، اما نمی توانست به من کمک کند تا از طریق منطق حرکت کنم.

در این مرحله بود که متوجه شدم … برنامه من وضعیت چندانی ندارد.

تنها حالتی که واقعاً در کل برنامه به اشتراک گذاشته می‌شود، برشته کردن فعلی دستگاه برشته‌کننده است – و در آینده، کاربر (که منطقی است که زمینه‌ای برای آن فراهم شود).

بنابراین، refactor امروز به فراخوانی برای سادگی تبدیل شد.

پاک کردن کد من

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

منو بگیر Roaster جزء به عنوان مثال.

مؤلفه ای که این را رندر می کند نیز رندر شده است هر صفحه در جریان، حاوی تمام JSX برای همه چیز است. اولین تغییری که انجام دادم تبدیل یک رندر شرطی 100 خطی به این بود، با صادرات هر رندر ممکن به جزء خودش:

return progress === 'start-roast-form' ? StartRoast currentRoast={currentRoast} nextProgress={nextProgress}  /> 
    : progress === 'roast-active' ? RoastCoffee time={time} currentRoast={currentRoast} roastStep={roastStep} handleRecordStep={handleRecordStep} nextStep={nextStep}  />
    : progress === 'finish-roast-form' ? FinishRoast time={time} currentRoast={currentRoast} nextProgress={nextProgress}  />
    : progress === 'roast-complete' ? RoastComplete   nextProgress={nextProgress} handleSave={handleSave}  />
    : />

بله، یک بیانیه بازگشت بسیار تمیزتر.

من همچنین یک را ایجاد کردم roasterController در تلاشی برای خواناتر کردن روستر واقعی من. تمام آن شامل دو تابع است که داده ها را در روستر من دستکاری می کند. اینها تنها دو تابعی هستند که در هنگام پیاده سازی یک پایگاه داده واقعی باید در مورد روستر من تغییر کنند.

import roasts from "../mocks/roasts";
import { currentRoast } from "../signals";

export const saveRoast = (roast) => {
  const found = roasts.find((item, index) => {
    if (item.id === currentRoast.value.id) {
        return index
    }
  })   
  if (found) {
      roasts[found] = currentRoast.value;
  } else {
      roasts.push(currentRoast.value);
  }
  return roasts[roasts.length - 1]
}

export const logTime = (roastStep, time) => {
  let key = '';
  if (roastStep === 1) key = 'firstCrackSeconds'
  if (roastStep === 2) key = 'tempRiseSeconds'
  if (roastStep === 3) key = 'openedLidSeconds'
  if (roastStep === 4) key = 'heatOffSeconds'
  if (roastStep === 5) key = 'dumpedSeconds'
  currentRoast.value[key] = time
}

این یک فایل بزرگ نیست، اما حذف 26 خط کد مبتنی بر منطق از مؤلفه ارائه من یک برد است!

کارهای بیشتر برای انجام

به طور خوش بینانه، من به بازسازی هایی که باید انجام شود و بهینه سازی های کوچک UI که باید انجام شوند نگاه می کنم، و معتقدم که قسمت جلویی تا آخر هفته از نظر بصری کامل می شود!

بنابراین، فردا، یک روز دیگر Refactor است و به دنبال آن پاکسازی برخی از رابط‌های کاربری باقی مانده است!