✨ این کار را انجام ندهید (مگر اینکه بخواهید کد جلو را انتخاب کنید)

📚 کتاب و ترفندهای React Rect 101 رایگان من را برای شروع کار بارگیری کنید.

به راحتی می توان با کد جبهه کثیف پایان یافت.

در این پست ، من به شما نشان می دهم 17 مورد برای جلوگیری از اگر می خواهید کد جلوی خود را تمیز و حفظ کنید.

بیایید شیرجه بزنیم

اشتباه شماره 1: استفاده از متغیرهای جهانی بیش از حد

متغیرهای جهانی از هر جای برنامه شما قابل دسترسی هستند و همین امر باعث خطرناک شدن آنها می شود.

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

آنها همچنین آزمایش را سخت تر می کنند ، زیرا رفتار عملکرد بسته به وضعیت جهانی ممکن است تغییر کند.

به جای آن از آرگومان های عملکرد یا متغیرهای scoped استفاده کنید.

❌ بد:

let userRole = 'guest';

function canEditPost() {
  return userRole === 'admin';
}

userRole = 'admin'; // Changes app behavior unexpectedly

✅ بهتر:

function canEditPost(userRole) {
  return userRole === 'admin';
}

const role = 'admin';
canEditPost(role);

اشتباه شماره 2: نام متغیر و عملکرد ضعیف

استفاده از نامهای مبهم مانند xبا data، یا handleStuff همه را کند می کند.

خوانندگان (از جمله آینده شما) باید حدس بزنند که هر کاری چه کاری انجام می دهد – یا از این بدتر ، برای پیدا کردن آن حرکت کنید.

یک قانون خوب: هرچه دامنه بزرگتر باشد ، باید توصیف کننده تر باشد.

حلقه های کوتاه؟ i خوب است

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

❌ بد:

function d(a, b) {
  return a - b;
}

const x = d(100, 50);

✅ بهتر:

function calculateDiscount(originalPrice, discountAmount) {
  return originalPrice - discountAmount;
}

const finalPrice = calculateDiscount(100, 50);

اشتباه شماره 3: عملکردهای “خدا”

این توابع سعی می کنند همه کارها را انجام دهند – اعتبارسنجی ، UI را به روز کنید ، داده ها را به روز کنید ، خطاهای رسیدگی را انجام دهید – همه در یک مکان.

در نتیجه؟ کارکردهای طولانی و کثیف که برای آزمایش و اشکال زدایی دردناک است.

در عوض ، منطق تقسیم به توابع کوچکتر و متمرکزبشر

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

❌ بد:

function handleFormSubmit(event) {
  event.preventDefault();

  const name = event.target.name.value;
  const email = event.target.email.value;

  if (!name || !email.includes("@")) {
    alert("Invalid form");
    return;
  }

  setLoading(true);

  fetch("/api/submit", {
    method: "POST",
    body: JSON.stringify({ name, email }),
  })
    .then(res => res.json())
    .then(data => {
      setUser(data.user);
      navigate("/dashboard");
    })
    .catch(() => {
      alert("Something went wrong");
    })
    .finally(() => setLoading(false));
}

✅ بهتر:

function handleFormSubmit(event) {
  event.preventDefault();

  const formData = getFormData(event);

  if (!isValidForm(formData)) {
    alert("Invalid form");
    return;
  }

  submitForm(formData);
}

function getFormData(event) {
  return {
    name: event.target.name.value,
    email: event.target.email.value,
  };
}

function isValidForm({ name, email }) {
  return name && email.includes("@");
}

async function submitForm(data) {
  try {
    setLoading(true);
    const response = await fetch("/api/submit", {
      method: "POST",
      body: JSON.stringify(data),
    });

    const result = await response.json();
    setUser(result.user);
    navigate("/dashboard");
  } catch (e) {
    alert("Something went wrong");
  } finally {
    setLoading(false);
  }
}

اشتباه شماره 4: توابع با بسیاری از پارامترهای همان نوع

هنگامی که یک تابع دارای چندین پارامتر از یک نوع است – مانند بول ها یا رشته ها – مخلوط کردن آنها آسان است.

در عوض ، با کلیدهای نامگذاری شده یک شی را منتقل کنیدبشر

به این ترتیب ، مشخص است که هر مقدار برای آن چیست – و برای درک آنچه اتفاق می افتد ، نیازی به پرش به تعریف عملکرد ندارید.

❌ بد:

createUser("Alice", true, false, true);

✅ بهتر:

createUser({ name: "Alice", isAdmin: true, isVerified: false, isActive: true });

اشتباه شماره 5: تمیز کردن منابع

هر زمان که شنونده رویداد را اضافه کنید ، فواصل زمانی ایجاد کنید ، زمان بندی تنظیم کنید یا استفاده کنید useEffect در واکنش ، آنها را تمیز کنید که دیگر نیازی به آنها نباشد.

اگر این کار را نکنید ، می توانید به پایان برسید نشت حافظهبا شنوندگان رویداد انباشته، یا تماس های شبکه شبحبشر

برای برنامه های Frontend که برای مدت طولانی اجرا می شود (مانند داشبورد یا پانل های مدیر) ، این اشکالات می توانند به طور قابل توجهی بر عملکرد تأثیر بگذارند – یا حتی برنامه شما را به طور کامل خراب کنید.

❌ بد (واکنش):

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

✅ بهتر:

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

اشتباه شماره 6: متغیرهای واحد کمتر

اگر یک مقدار دارای یک واحد باشد – مانند میلی ثانیه ، پیکسل یا مگابایت – آن واحد را در نام متغیر قرار دهیدبشر

در غیر این صورت ، سایر شیاطین (یا آینده شما) باید حدس بزنند که این تعداد به چه معنی است.

❌ بد:

const timeout = 3000; 

✅ بهتر:

const timeoutMs = 3000;

اشتباه شماره 7: شرط های لانه سازی> 3 سطح عمق

هنگامی که منطق شما بیش از 2 یا 3 سطح قرار دارد ، خواندن و استدلال در مورد آن سخت می شود ، به خصوص اگر تعداد زیادی داشته باشید if/else بلوک ها

در عوض ، سعی کنید کد خود را “صاف کنید”:

این باعث می شود که هر بلوک خواندن و اشکال زدایی را آسانتر کند.

❌ بد:

if (user) {
  if (user.isAdmin) {
    if (user.hasAccess) {
      // do stuff
    }
  }
}

✅ بهتر:

if (!user || !user.isAdmin || !user.hasAccess) return;

// do stuff

اشتباه شماره 8: URL های کدگذاری یا پیکربندی در کد

موارد سخت مانند URL ، کلیدهای API یا پیکربندی خاص محیط یک تله است.

لحظه ای که ارزش تغییر می کند ، باید آن را در سراسر پایگاه کد شکار کنید.

در عوض ، مقادیر پیکربندی را در ثابت یا متغیرهای محیط ذخیره کنید ، سپس در صورت لزوم آنها را وارد کنیدبشر

شما از اشکالات ، desyncs و ساعت های هدر رفته خودداری خواهید کرد.

❌ بد:

fetch('https://api.example.com/posts');

✅ بهتر:

const API_BASE_URL = process.env.API_BASE_URL;
fetch(`${API_BASE_URL}/posts`);

اشتباه شماره 9: نگه داشتن کد مرده “فقط در مورد”

همه ما این کار را کرده ایم – برخی از کد ها را اظهار نظر کنید و آن را “فقط در مورد” بگذارید.

اما این حقیقت است: 99 ٪ از زمان ، هیچ کس هرگز از آن استفاده نمی کند 😅 و هیچ کس نمی خواهد از آن عبور کند.

از github یا gitlab استفاده کنید و آن کد را حذف کنید.

❌ بد:

// old validation logic (maybe needed later)
// function validateInput(input) { ... }

✅ بهتر: فقط آن را حذف کنید.

اشتباه شماره 10: پرونده های غول پیکر “استفاده”

کلاسیک utils.js پرونده همیشه بی گناه شروع می شود ، سپس به آرامی به یک سینک آشپزخانه از عملکردهای تصادفی تبدیل می شود.

قبل از اینکه آن را بدانید ، صدها خط طولانی و غیرممکن است.

در عوض ، توابع ابزار colocate در نزدیکی کدی که از آنها استفاده می کندبشر

یا تقسیم آنها به پرونده های متمرکز مانند arrayUtils.jsبا dateUtils.js، و غیره

❌ بد:

// utils.js
export function doStuff() {}

✅ بهتر:

// listUtils.js (next to List component)
export function getVisibleItems(items, filter) {
  return items.filter(item => item.visible && item.category === filter);
}

اشتباه شماره 11: خطاهای بلع

اگر کد شما ممکن است خطایی ایجاد کند ، فقط آن را نادیده نگیرید.

خطاهای بلعیده کابوس برای اشکال زدایی است ، به خصوص در تولید.

حتی یک ساده console.error می تواند ساعت ها حدس را صرفه جویی کند.

و اگر کاربران تحت تأثیر قرار بگیرند ، در UI نشانه ای از خود نشان دهید تا آنها بدانند که چیزی اشتباه پیش آمده است (به جای صفحه خالی).

❌ بد:

try {
  riskyFunction();
} catch (e) {
  // nothing
}

✅ بهتر:

try {
  riskyFunction();
} catch (e) {
  console.error("Error in riskyFunction:", e);
  showToast("TODO: Useful error message + actions");
}

اشتباه شماره 12: یک پرونده غول پیکر

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

شما در پایان با 800+ خط پیمایش جهنم.

در عوض:

من بار شناختی را پایین می آورد و باعث می شود که سوار شدن جدید بسیار ساده تر شود.

❌ بد:

// App.js — 1000+ lines of code

✅ بهتر: آن را به پوشه ها تقسیم کنید:

/components
/context
/pages

اشتباه شماره 13: بدون لانتور

خطوطی مانند مشکلات صید Eslint پیش از آنها به تولید ، از اشکالات ساده گرفته تا وابستگی های React از دست رفته در useEffectبشر

آنها همچنین به استاندارد سازی سبک کد در یک تیم کمک می کنند.

لطفاً اطمینان حاصل کنید که در مورد هشدارها خوانده و عمل کرده اید: فقط سیلی نزنید // eslint-disable همه جا 😉

❌ بد:

useEffect(() => {
  fetchData();
}, []); // missing fetchData in deps

✅ بهتر: از افزونه ESLINT + React Hooks استفاده کنید. این به شما هشدار می دهد:

React Hook useEffect has a missing dependency: 'fetchData'.

اشتباه شماره 14: ساختار پوشه کثیف

پوشه پروژه شما نباید مانند یک کشو ناخواسته باشد.

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

در عوض ، از یک ساختار بر اساس ویژگی ها یا دامنه ها استفاده کنید.

پرونده های مرتبط با گروه با هم بنابراین devs جدید می توانند به سرعت درک کنند که چه چیزی است.

❌ بد:

/src
  App.js
  helpers.js
  styles.css
  randomStuff.js

✅ بهتر:

/src
  /components
  /services
  App.js

اشتباه شماره 15: اظهار نظر در مورد کد آشکار

شما نیازی به توضیح چه چیزی ندارید let count = 0 معنی

به خواننده خود اعتماد کنید.

اگر چیزی گیج کننده است ، منطق را ساده کنید یا از نامهای واضح تر استفاده کنیدبشر

نظرات باید توضیح دهد چرا کاری انجام شده است ، نه چه یک خط کد انجام می دهد.

❌ بد:

// Set count to 0
let count = 0;

✅ بهتر:

let itemCount = 0;

اشتباه شماره 16: هیچ نظری برای منطق عجیب نیست

بعضی اوقات شما نیاز به اضافه کردن یک راه حل یا پشتیبانی از یک مورد میراث دارید.

خوب است – اما توضیح دهید *چرا*.

بدون اظهار نظر ، هم تیمی های شما (یا آینده شما) وقت خود را برای فهمیدن چه چیزی تلف می کنند magicFix42(data) معنی

یک یادداشت کوتاه بگذارید. بعداً از خود تشکر خواهید کرد

❌ بد:

const result = magicFix42(data);

✅ بهتر:

// Applies patch for backend bug #321. Read ticket for more context 
const result = magicFix42(data);

اشتباه شماره 17: بازنویسی آنچه در حال حاضر وجود دارد

چرخ را دوباره اختراع نکنید.

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

اگر می توانید مشکل را با یک بسته معتبر حل کنید ، از آن استفاده کنید.

فقط وابستگی های خود را بررسی کنید تا اندازه بسته نرم افزاری شما بالون نباشد (پست من را بررسی کنید ✨ چگونه من اندازه بسته نرم افزاری React خود را 30 ٪ کاهش دادم (با نمونه های واقعی).

🟠 خوب:

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

✅ آسان تر:

import { debounce} from 'lodash-es';

const debouncedFn = debounce(myFn, 300);

خلاصه

کد Frontend می تواند سریع کثیف شود.

از این 17 اشتباه خودداری کنید و کد شما خواندن ، اشکال زدایی و حفظ آن آسان تر خواهد بود.

خود آینده – و هم تیمی های شما – از شما متشکرم.

این یک بسته بندی است.

یک نظر بگذارید 📩 برای اضافه کردن یک نکته دیگر.

و فراموش نکنید که یک “💖🦄🔥” را رها کنید.

اگر در حال یادگیری React هستید ، کتاب و ترفندهای Rect Rect 101 من را بارگیری کنید رایگانبشر

اگر مقالاتی از این دست را دوست دارید ، به من بپیوندید رایگان خبرنامه ، جبههبشر

اگر نکات روزانه می خواهید ، مرا پیدا کنید X/توییتر یا بلوزکی