مفهوم: اطمینان میدهد که تنها یک نمونه از یک کلاس یا ماژول وجود داشته باشد.
چه زمانی: سرویسهای اشتراکی (مثل پیکربندی، لاگگیری، کلاینتهای API).
// singleton.js
let instance;
class Logger {
constructor() {
if (instance) return instance;
instance = this;
}
log(msg) {
console.log(msg);
}
}
export const logger = new Logger();
در React: در لایههای سرویس خارج از درخت کامپوننت استفاده میشود.
مفهوم: ایجاد کامپوننتها بر اساس نوع ورودی.
const componentFactory = (type) => {
switch (type) {
case 'text': return <TextInput />;
case 'select': return <SelectInput />;
default: return <DefaultInput />;
}
};
چه زمانی: فرمهای دینامیک یا داشبوردهای مبتنی بر پیکربندی.
مفهوم: ساخت گامبهگام یک عنصر رابط کاربری.
class CardBuilder {
constructor() {
this.card = {};
}
setTitle(title) { this.card.title = title; return this; }
setContent(content) { this.card.content = content; return this; }
build() {
return <Card {...this.card} />;
}
}
چه زمانی: کامپوننتهای رابط کاربری با بخشهای اختیاری زیاد (مثل مدالها).
مفهوم: اشتراک رفتار از طریق پروتوتایپها به جای کلاسها.
در React: بهندرت بهصورت مستقیم استفاده میشود، اما در جاوااسکریپت زیربنایی است. برای گسترش اشیا (مثل سیستمهای رویداد سفارشی یا پلیفیلها) مفید است.
const proto = {
greet() { return `Hello ${this.name}`; }
};
const user = Object.create(proto);
user.name = "Alice";
مفهوم: افزودن رفتار بدون تغییر اصل.
مثال React (HOC):
const withLogger = (Component) => (props) => {
console.log('Rendered with props:', props);
return <Component {...props} />;
};
چه زمانی: نگرانیهای متقاطع (احراز هویت، لاگگیری، معیارها).
مفهوم: ترجمه یک رابط به رابط دیگر.
const legacyApi = { fetchData: () => fetch('/old-endpoint') };
const apiAdapter = {
getData: () => legacyApi.fetchData().then(res => res.json())
};
در React: بستهبندی APIهای شخص ثالث در ماژولهای سرویس استاندارد.
مفهوم: رفتار یکسان با کامپوننتهای تکی و ترکیبی.
const TreeNode = ({ node }) => (
<li>
{node.label}
{node.children && (
<ul>
{node.children.map((child) => (
<TreeNode node={child} />
))}
</ul>
)}
</li>
);
مفهوم: ارائه یک رابط یکپارچه برای زیرساختهای پیچیده.
// apiFacade.js
export const api = {
getUser: () => fetch('/user'),
getSettings: () => fetch('/settings')
};
کاربرد در React: ماژولهای سرویس متمرکز برای منطق تمیز کامپوننت.
مفهوم: کنترل دسترسی به یک شیء (مثل کشینگ، اعتبارسنجی).
const api = new Proxy(fetch, {
apply(target, thisArg, args) {
console.log('Fetching:', args[0]);
return target(...args);
}
});
چه زمانی: لاگگیری، کشینگ، بارگذاری تنبل.
مفهوم: محصورسازی منطق در یک واحد خودکفا.
// counterModule.js
let count = 0;
export const counter = {
increment: () => ++count,
get: () => count
};
کاربرد در React: منطق ابزار اشتراکی یا سرویسهای دارای وضعیت.
مفهوم: یک سوژه به مشاهدهکنندگان در زمان تغییر وضعیت اطلاع میدهد.
class EventBus {
observers = [];
subscribe(fn) { this.observers.push(fn); }
notify(data) { this.observers.forEach(fn => fn(data)); }
}
کاربرد در React: انتشار/اشتراک برای اشتراک وضعیت در میکروفرانتاند یا تبها.
مفهوم: تعویض الگوریتمها/استراتژیها در زمان اجرا.
const sortStrategies = {
byName: (a, b) => a.name.localeCompare(b.name),
byAge: (a, b) => a.age - b.age
};
const sortData = (data, strategy) => data.sort(sortStrategies[strategy]);
کاربرد در React: منطق رابط کاربری دینامیک (فیلترها، طرحبندیها، اعتبارسنجیها).
مفهوم: محصورسازی دستورات کاربر (لغو/بازگردانی).
class Command {
execute() {}
undo() {}
}
class AddItemCommand extends Command {
execute() { /* add */ }
undo() { /* remove */ }
}
کاربرد در React: سازندههای فرم، ویرایشگرهای بوم.
مفهوم: شیء مرکزی ارتباطات را هماهنگ میکند.
const mediator = {
notify: (sender, event) => {
if (event === 'save') console.log(`${sender} triggered save`);
}
};
کاربرد در React: سیستمهای گفتوگو یا داشبوردهای با اتصال آزاد.
مفهوم: انتقال درخواست در یک زنجیره تا زمانی که مدیریت شود.
const handlerA = (req, next) => req.type === 'A' ? 'Handled A' : next(req);
const handlerB = (req) => req.type === 'B' ? 'Handled B' : 'Unhandled';
const chain = (req) => handlerA(req, handlerB);
کاربرد در React: منطق رابط کاربری شبیه میانافزار، زنجیرههای اعتبارسنجی فرم.
مفهوم: تابعی که رفتار را به یک کامپوننت اضافه میکند.
const withLoading = (Component) => ({ isLoading, ...rest }) =>
isLoading ? <Spinner /> : <Component {...rest} />;
مزایا: قابلیت استفاده مجدد، جداسازی نگرانیها
معایب: تداخل پراپها، پیچیدگی تودرتو
مفهوم: اشتراک منطق از طریق تابع بهعنوان فرزند.
<MouseTracker render={({ x, y }) => <Cursor x={x} y={y} />} />
کاربرد: منطق قابل استفاده مجدد بدون مشکلات HOC.
مفهوم: استفاده از Context React برای تزریق مقادیر جهانی.
const ThemeContext = React.createContext();
const ThemeProvider = ({ children }) => {
const [theme] = useState("dark");
return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
};
کاربرد: احراز هویت، تمدهی، پیکربندی، محلیسازی.
مفهوم: جداسازی منطق (ظرف) از نمایش (نمایشدهنده).
// Container
const UserContainer = () => {
const [user, setUser] = useState(null);
return <UserProfile user={user} />;
};
// Presentational
const UserProfile = ({ user }) => <div>{user?.name}</div>;
کاربرد: تست، استفاده مجدد، جداسازی نگرانیها.
هدف: کمک به توسعهدهندگان برای انتخاب الگوها بر اساس نیت، نه فقط آشنایی.