دستورات سفارشی
دستورات سفارشی در ویو جی‌اس (Vue.js) یکی از قدرتمندترین قابلیت‌هایی است که امکان کنترل مستقیم روی DOM را بدون نقض معماری واکنشی ویو فراهم می‌کند. این قابلیت زمانی اهمیت پیدا می‌کند که نیازمند رفتارهای تکراری و سطح پایین DOM هستیم که با کامپوننت‌ها یا پراپرتی‌ها به‌صورت مؤثر قابل مدیریت نیستند؛ مانند مدیریت فوکوس، دستکاری کلاس‌ها بر اساس محاسبات پیچیده، یا تعامل با کتابخانه‌هایی که خارج از چرخه واکنش‌گرایی ویو عمل می‌کنند. دستورات سفارشی به توسعه‌دهندگان اجازه می‌دهند منطق مشخصی را در قالب یک دستور مستقل، قابل استفاده مجدد و ساختاریافته تعریف کنند. این رویکرد، علاوه‌بر تقویت اصول OOP مانند انتزاع (Abstraction) و جداسازی مسئولیت‌ها (Separation of Concerns)، باعث می‌شود کد قابل نگهداری‌تر شود.
در این آموزش، خواننده با نحوه ساخت، ثبت و استفاده از دستورات سفارشی آشنا می‌شود. مباحثی مانند syntax صحیح در ویو، استفاده از ساختارهای داده مناسب، مدیریت صحیح حافظه برای جلوگیری از memory leak، و پیاده‌سازی الگوریتم‌هایی که با DOM تعامل دارند، بررسی خواهند شد. همچنین نقش دستورات سفارشی در معماری سیستم و نحوه استانداردسازی آن‌ها در پروژه‌های بزرگ واقعی تحلیل می‌شود. این آموزش برای توسعه‌دهندگان پیشرفته طراحی شده که به دنبال تسلط بر رفتارهای سطح پایین در ویو جی‌اس و ایجاد قابلیت‌های قابل توسعه هستند.
مثال پایه
textconst app = Vue.createApp({
data() {
return {
message: 'Hello Custom Directive!'
}
}
});
// دستور سفارشی برای فوکوس خودکار
app.directive('auto-focus', {
mounted(el) {
// اطمینان از این‌که عنصر آماده است
setTimeout(() => {
el.focus();
}, 0);
}
});
// کامپوننت اصلی
app.component('custom-input', {
template: ` <div> <input v-auto-focus type="text" :placeholder="message"/> </div>
`,
props: ['message']
});
app.mount('#app');در مثال بالا، یک دستور سفارشی ساده به نام auto-focus تعریف کرده‌ایم که رفتار فوکوس خودکار را روی عنصر ورودی اعمال می‌کند. این دستور با استفاده از app.directive ثبت شده و شامل مرحله چرخه حیات mounted است که در آن می‌توانیم به عنصر DOM دسترسی مستقیم داشته باشیم. استفاده از setTimeout تضمین می‌کند که عملیات فوکوس پس از تکمیل رندرینگ DOM اجرا شود و باعث جلوگیری از خطاهای رایج در مدیریت زمان‌بندی DOM می‌شود. این رویکرد نشانه‌ای از درک عمیق چرخه رندر ویو است.
در کامپوننت custom-input، دستور v-auto-focus به‌عنوان یک ویژگی DOM به عنصر input افزوده شده است. این الگو یکی از بهترین مثال‌ها برای نشان دادن نحوه تعامل دستورات سفارشی با داده‌های کامپوننت و ساختار DOM است. همچنین، چون دستورات محدود به نقش مشخص خود هستند، اصول OOP مانند تک‌مسئولیتی رعایت می‌شود. از طرفی به‌جای افزودن منطق فوکوس به کامپوننت، آن را در قالب یک دستور مجزا پیاده‌سازی کرده‌ایم تا امکان استفاده مجدد در کامپوننت‌های دیگر فراهم شود. این به کاهش تکرار کد و افزایش پایداری پروژه کمک می‌کند. چنین رفتارهایی در پروژه‌های بزرگ بسیار ارزشمند هستند زیرا امکان مدیریت بهتر منطق تعامل با DOM را بدون ایجاد پیچیدگی اضافی فراهم می‌کنند.
مثال کاربردی
textconst app = Vue.createApp({
data() {
return {
isActive: false,
logs: []
}
},
methods: {
toggle() {
this.isActive = !this.isActive;
}
}
});
// دستور سفارشی با الگوریتم مدیریت کلاس و ثبت رخداد
app.directive('active-toggle', {
mounted(el, binding, vnode) {
const updateClass = (state) => {
if (state) {
el.classList.add('active-state');
} else {
el.classList.remove('active-state');
}
};
// اعمال مقدار اولیه
updateClass(binding.value);
// مانیتور تغییر مقدار
el.__updateHandler__ = () => {
updateClass(binding.value);
vnode.context.logs.push(`State changed to: ${binding.value}`);
};
},
updated(el) {
if (typeof el.updateHandler === 'function') {
el.updateHandler();
}
},
unmounted(el) {
delete el.updateHandler;
}
});
app.mount('#app');در مثال کاربردی فوق، چندین بهترین الگوی ویو جی‌اس در دستورات سفارشی رعایت شده است. ابتدا الگوریتم مدیریت کلاس‌ها در دستور active-toggle پیاده‌سازی شده که بر اساس مقدار بایندینگ، حالت فعال یا غیرفعال عنصر را تغییر می‌دهد. این الگوریتم ساده اما کارآمد است و از عملیات DOM بهینه استفاده می‌کند. در متد mounted، یک تابع داخلی updateClass تعریف شده که مسئولیت اعمال تغییرات بصری را برعهده دارد. سپس handler اختصاصی برای مدیریت به‌روزرسانی‌ها ذخیره شده تا در updated فراخوانی گردد. این الگو باعث جلوگیری از memory leak می‌شود چون handler در unmounted حذف می‌شود.
در پروژه‌های واقعی، این نوع دستورات سفارشی برای کنترل وضعیت عناصر، تعامل کاربر با رابط، یا نگاشت رویدادها به ساختار داده استفاده می‌شوند. ثبت لاگ در vnode.context نمونه‌ای از استفاده صحیح از OOP و encapsulation است زیرا رفتار دستور مستقل باقی می‌ماند اما همچنان قابلیت تعامل با محدوده داده‌ای والد را دارد. همچنین، pattern استفاده از updateHandler یکی از الگوهای مهم جلوگیری از ایجاد رفتارهای نامشروع در چرخه حیات DOM است. این مثال نشان می‌دهد چگونه دستورات سفارشی می‌توانند نقش میانی میان منطق کامپوننت و DOM را در پروژه‌های مقیاس بزرگ مدیریت کنند.
📊 جدول مرجع
| ویو جی‌اس (Vue.js) Element/Concept | Description | Usage Example |
|---|---|---|
| global directive | ثبت دستور در سطح اپلیکیشن | app.directive('my-dir', { mounted(){} }) |
| local directive | ثبت دستور در سطح کامپوننت | directives: { highlight: { mounted(el){...} } } |
| mounted hook | اولین زمان دسترسی به DOM | v-my-dir در mounted رفتار را اعمال می‌کند |
| updated hook | مدیریت تغییرات واکنشی | updated(el){ console.log('updated') } |
| directive arguments | ارسال ورودی به دستور | v-toggle="isActive" |
جمع‌بندی و گام‌های بعدی در ویو جی‌اس (Vue.js):
در این آموزش با مفاهیم پیشرفته دستورات سفارشی در ویو جی‌اس آشنا شدیم و نقش آن‌ها در مدیریت رفتارهای سطح پایین DOM را بررسی کردیم. یاد گرفتیم چگونه دستورات را در پروژه‌های واقعی طراحی کنیم، چرخه حیات آن‌ها را مدیریت کنیم، و از memory leak جلوگیری نماییم. این مفاهیم برای پروژه‌های بزرگ و معماری‌محور بسیار حیاتی هستند زیرا امکان جداسازی مسئولیت و بهبود ساختار پروژه را فراهم می‌کنند. یادگیری دستورات سفارشی زمینه‌ای از درک عمیق‌تری از چرخه رندرینگ، واکنش‌گرایی، و تعامل بین کامپوننت‌ها فراهم می‌سازد. برای ادامه مسیر یادگیری، پیشنهاد می‌شود مباحثی مانند Render Functions، Teleport، و Asynchronous Components مطالعه شوند. ترکیب این مباحث با دستورات سفارشی امکان ساخت ابزارهای سطح پایین و پیشرفته را در ویو فراهم می‌کند. همچنین برای پرورش مهارت‌های بیشتر، کار روی پروژه‌های واقعی و ایجاد دستورات سفارشی برای مدیریت کتابخانه‌های ثالث بسیار مفید است.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود