این کار را نکنید – مگر اینکه بخواهید 💩 کد Frontend

کد تمیز ، قابل نگه داشتن باعث صرفه جویی در وقت و سردرد می شود. در زیر وجود دارد 17 مورد برای جلوگیری از، به علاوه 8 جایزه بهترین روش– همه با نمونه های ساده.

1. با تکیه بر متغیرهای جهانی

مشکل: ردیابی و آزمایش سخت است.

// ❌ Globals
window.userId = 42;

// ✅ Pass as argument
function greet(userId) {
  console.log(`Hello, user ${userId}`);
}
greet(42);

2. با استفاده از نامهای مبهم

مشکل: هدف نامشخص

// ❌ Vague
function doStuff(a) { … }

// ✅ Descriptive
function formatDate(timestamp) { … }

3. ایجاد توابع “خدا”

مشکل: مسئولیت های بیش از حد

// ❌ One big function
function init() {
  fetchData();
  validate();
  render();
}

// ✅ Split into small functions
async function init() {
  const data = await loadData();
  const clean = validateData(data);
  renderUI(clean);
}

4. عبور از پارامترهای مشابه

مشکل: آسان برای مخلوط کردن سفارش.

// ❌ Many args
setup(true, 5, 3000);

// ✅ Options object
setup({ autoStart: true, retries: 5, timeoutMs: 3000 });

5. منابع نشت

مشکل: نشت حافظه و شنوندگان بی نظیر.

useEffect(() => {
  window.addEventListener('resize', onResize);
  return () => {
    window.removeEventListener('resize', onResize);
  };
}, []);

6. حذف واحدها در نام های متغیر

مشکل: سردرگمی نسبت به ارزش ها معنی دارد.

// ❌ What is 500?
const delay = 500;

// ✅ Include unit
const delayMs = 500;

7. شرط های عمیق تو در تو

مشکل: خواندن سخت

// ❌ Too nested
if (user) {
  if (user.active) {
    if (!user.error) {
      doWork();
    }
  }
}

// ✅ Early return
function doWorkIfActive(user) {
  if (!user || !user.active || user.error) return;
  doWork();
}

8. URL یا کلیدهای سخت کد

مشکل: تغییر در هر محیط دشوار است.

# .env
API_URL=https://api.example.com

const apiUrl = process.env.API_URL;

9. نگه داشتن نظرات “فقط در مورد”

مشکل: کد Clutters.

نکته: از تاریخ GIT به جای بلوک های اظهار نظر استفاده کنید.

10. یک عظیم utils.js پرونده

مشکل: پیدا کردن یاران سخت است.

src/
  utils/
    date.js
    string.js
    api.js

11. خطاهای بلع سکوت

مشکل: اشکالات پنهان.

try {
  riskyAction();
} catch (err) {
  console.error(err);
  alert('Oops, something went wrong');
}

12. پرونده های یکپارچه

مشکل: بیش از حد در یک مکان

نکته: منطق ، UI و سبک ها را به پرونده های مختلف جدا کنید.

13. بدون خط مشی

مشکل: سبک های متناقض و خطاهای از دست رفته.

نکته: از ESLINT یا هشدارهای مشابه استفاده کنید – آنها را در سطح جهان غیرفعال نکنید.

14. ساختار پوشه کثیف

مشکل: پیمایش سخت است.

src/
  auth/
    LoginForm.vue
    authAPI.js
  dashboard/
    Dashboard.vue
    stats/
      StatsChart.js

15. نظرات بی فایده

مشکل: کد آشکار بیش از حد.

نکته: به جای نوشتن “// افزایش من” ، چیزها را به وضوح نامگذاری کنید.

16. هیچ نظری در مورد راه حل ها

مشکل: آینده نمی دانید چرا.

نکته: هک ها را با پیوندها به مسائل یا مشخصات توضیح دهید.

17. اختراع چرخ

مشکل: زمان زباله ها و اندازه بسته را افزایش می دهد.

نکته: از کتابخانه های مشهور استفاده کنید (به عنوان مثال date-fnsبا lodash-es) و فقط آنچه را که شما نیاز دارید وارد کنید.

8 جایزه بهترین روش

1. تقسیم کد
   ماژول ها را فقط در صورت لزوم بارگذاری کنید:

   const Chart = React.lazy(() => import('./Chart'));

1. عمل

• تصاویر تنبل:
• حافظه پنهان با کارگران سرویس

• حسابرسی با فانوس دریایی.

  1. تست

• توابع خالص آزمون واحد.

• UI آزمون ادغام با JEST + کتابخانه تست.

  1. مدیریت دولت
     مؤلفه را محلی نگه دارید. از Redux/Vuex برای حالت جهانی با ساختار ماژول روشن استفاده کنید.
  2. قابلیت دسترسی (A11y)

• از نقش ها/برچسب های آریا استفاده کنید.

• از ناوبری صفحه کلید اطمینان حاصل کنید.

• کنتراست رنگ را بررسی کنید.

  1. مستند سازی

• یک readme روشن بنویسید.

• از کتاب داستان برای اجزای نسخه ی نمایشی استفاده کنید.

  1. CI/CD

• تست/تست را روی هر فشار اجرا کنید (اقدامات GitHub ، Gitlab CI).

• خطوط لوله استقرار خودکار.

  1. بررسی کد

• نیاز به بررسی درخواست کشش دارد.

• بازخورد و اشکالات را زود به اشتراک بگذارید.