اصل تک‌مسئولیتی (Single Responsibility Principle) یعنی هر ماژول یا کامپوننت فقط یک دلیل برای تغییر داشته باشد. در پروژه‌های وب پیچیده، رعایت SRP باعث می‌شود کد قابل تست‌تر، قابل تغییرتر و خواناتر شود. تجربهٔ عملی: وقتی کد را به واحدهای کوچکتر با مسئولیت مشخص تقسیم می‌کنید، باگ‌ها راحت‌تر پیدا و ویژگی‌های جدید سریع‌تر اضافه می‌شوند.

مثال فرانت‌اند (React)
کامپوننت بد: هم دیتا می‌گیرد، هم وضعیت مدیریت می‌کند، هم رندر می‌کند.

function Dashboard(){
  const [data,setData]=useState(null);
  useEffect(()=>{fetch('/api/items').then(r=>r.json()).then(setData)},[]);
  function save(item){fetch('/api/items', {method:'POST', body:JSON.stringify(item)})}
  return <div>{data?.map(i=><div key={i.id}>{i.name}</div>)}</div>
}

تقسیم به مسئولیت‌ها: یک useFetch hook و یک Presentational کامپوننت:


function useFetch(url){
  const [data,setData]=useState(null);
  useEffect(()=>{fetch(url).then(r=>r.json()).then(setData)},[url]);
  return data;
}
function DashboardView({data}){ return <div>{data?.map(i=><div key={i.id}>{i.name}</div>)}</div> }
function Dashboard(){ const data=useFetch('/api/items'); return <DashboardView data={data}/> }

این تقسیم باعث می‌شود تست hook و view جداگانه امکان‌پذیر و تغییر منطق دریافت داده بدون لمس رندر انجام شود.

مثال بک‌اند (Node.js / Express)
به‌جای نوشتن منطق اعتبارسنجی، منطق تجاری و دسترسی به دیتابیس در یک فایل کنترلر، آنها را جدا کنید:

// controller
async function createItem(req,res){ const item=await itemService.create(req.body); res.json(item) }
// service
async function create(data){ validate(data); return repository.insert(data) }

این ساختار واحدها را قابل تست می‌کند و تغییر در لایهٔ ذخیره‌سازی تأثیر کمتری روی کنترلر دارد.

برای مرجع بیشتر منابعی مثل Refactoring.Guru و کتاب "Clean Code" پیشنهاد می‌شوند. نکتهٔ عملی: اگر نوشتن تست برای یک تابع سخت است، احتمالاً آن تابع بیش از یک مسئولیت دارد — آن را شکسته و ساده کنید.

🔖 #Web #وب #Frontend #Backend #clean_code #SRP #React #Node.js #refactoring #architecture #best_practices

👤 Developix

💎 Channel: @DevelopixWeb