تكرار السؤال: …
الإجابة المختصرة
هو معيار هيكلي يقسم التطبيق إلى طبقات صارمة (app, pages, widgets, features, entities, shared) تضمن تدفق التبعيات في اتجاه واحد من الأعلى للأسفل وتمنع التشابك الفوضوي للكود.
الشرح
في المشاريع الكبيرة، يفشل التقسيم التقليدي (components, hooks, services) مع توسع الفريق. تفرض FSD طبقات دقيقة: الطبقة shared للأساسيات العامة، entities لكيانات الأعمال (مثل User, Product)، features للتفاعلات المحددة (مثل AddToCart)، widgets لتجميعات الواجهة، و pages للصفحات. لا يمكن لأي طبقة استيراد شيء من طبقة تعلوها، مما يمنع التبعيات الدائرية تماماً.
مثال بالكود
// src/features/add-to-cart/ui/AddToCartButton.tsx — FSD layers import only from layers below them
import { Button } from "@/shared/ui/Button"; // shared ✓
import type { Product } from "@/entities/product"; // entities ✓
// import { ProductPage } from "@/pages/product"; // ✗ forbidden: a feature must not import a higher layer
export function AddToCartButton({ product }: { product: Product }) {
return <Button onClick={() => addToCart(product.id)}>Add to cart</Button>;
}
// Layer order (top → bottom): app → pages → widgets → features → entities → sharedأخطاء شائعة
- استيراد كود من طبقة عليا إلى طبقة سفلى، مما يخلق تبعية دائرية تكسر استقلالية الوحدات.