وارد کردن داده های JSON در Astro (با Typescript)

کد Refactoring برای قابلیت نگهداری پیشرفته: از اشیاء داده درون فایل تا JSON

رویکرد اصلی: شی داده درون فایل

در ابتدا، داده های پشته فناوری برای صفحه اول fzeba.com به طور مستقیم در مولفه React با استفاده از یک آرایه ثابت جاسازی شد. cactusTech. این آرایه چندین ورودی فناوری را در خود جای داده است که هر کدام با ویژگی هایی مانند توصیف شده اند desc، href، و title. آرایه به طور مستقیم در کامپوننت برای ارائه بخش پشته فناوری استفاده شد.

در حالی که این روش کار می کرد، راه حل بهتر (برای من) جدا کردن داده ها از کد مؤلفه بود. سپس داده ها را از یک فایل JSON بارگیری کنید، که باعث می شود کد قابل نگهداری و مقیاس پذیرتر باشد.

در اینجا یک قطعه از مؤلفه اصلی (React) با استفاده از شی داده درون فایل آمده است:

 class="mt-16">
  
 class="title mb-4 text-xl">Technology Stack
  
 class="space-y-4">
    {cactusTech.map(({ desc, href, title }) => (
    
    ))}
  

رویکرد بهبودیافته: فایل داده JSON

برای پرداختن به این مشکلات، کد را برای بارگیری داده‌های پشته فناوری از یک فایل JSON مجزا بازسازی کردم. این تغییر چندین مزیت را به همراه داشت:

• قابلیت نگهداری بهبود یافته: جداسازی داده ها از کد مؤلفه، نگهداری و اصلاح سیستم را آسان تر می کند.
• مقیاس پذیری پیشرفته: با داده‌های موجود در یک فایل جداگانه، افزودن یا به‌روزرسانی ورودی‌های پشته فناوری ساده‌تر است و نیازی به تغییر در کد مؤلفه ندارد.
• سازماندهی بهتر: این جداسازی به شیوه‌های توسعه مدرن پایبند است و پایگاه کد را تمیزتر و سازماندهی‌تر نگه می‌دارد.

کد بازسازی شده اکنون داده های فناوری را از یک فایل JSON بارگیری می کند، همانطور که در زیر نشان داده شده است:

 class="mt-16">
  
 class="title mb-4 text-xl">Tech Stack
  
 class="space-y-4">
    {techStack.map(techPoint => (
    
    ))}
  

فایل دیتا techStack.json به نظر می رسد این است:

[
  {
    "desc": "OOP and so on...",
    "href": "#",
    "title": "Java"
  },
  {
    "desc": "Website stuff and so on...",
    "href": "#",
    "title": "Javascript"
  }
  // Other technologies and so on...
]

نتیجه و مزایا

انتقال به یک رویکرد مدیریت داده مبتنی بر JSON، پایگاه کد را انعطاف‌پذیرتر و قابل نگهداری‌تر کرده است. به‌روزرسانی‌ها را ساده می‌کند و تضمین می‌کند که برنامه می‌تواند با افزایش فناوری‌های جدید به پشته، مقیاس‌پذیرتر شود. این ریفکتور نه تنها وضعیت فعلی پروژه را بهبود می بخشد، بلکه آن را با بهترین روش ها برای توسعه و نگهداری آینده هماهنگ می کند.

نتیجه گیری

Refactoring ممکن است به تلاش اولیه نیاز داشته باشد، اما اغلب به دلیل مزایایی که از نظر نگهداری و مقیاس پذیری به همراه دارد، ارزش آن را دارد. با جدا کردن نگرانی‌ها و استخراج لایه داده از لایه ارائه، برنامه‌ها می‌توانند به طور یکپارچه‌تر رشد کنند و حتی با تکامل آن‌ها قابل مدیریت باقی بمانند (کاملاً توسط هوش مصنوعی نوشته نشده است – به من اعتماد کنید).

این مقاله و موارد دیگر را در fzeba.com بخوانید.