Mutation Observer در جاوا اسکریپت چیست و چطور از آن استفاده کنیم؟

Mutation Observer یک API قدرتمند Javascript است که به توسعه‌دهندگان اجازه می‌دهد تغییرات در DOM را به صورت بلادرنگ نظارت کنند و به آن‌ها واکنش نشان دهند. این ابزار چندمنظوره به بخش ضروری توسعه وب مدرن تبدیل شده است و امکان ایجاد Web app تعاملی‌تر را فراهم می‌کند. در ادامه به Mutation Observer در جاوا اسکریپت چیست و نحوه استفاده از آن می پردازیم.

Mutation Observer در جاوا اسکریپت چگونه کار می‌کند

نحو پایه برای پیاده‌سازی یک Mutation Observer به شرح زیر است:

یک نمونه جدید Mutation Observer با یک تابع فراخوانی ایجاد کنید..

تابع فراخوانی را برای مدیریت تغییرات DOM تعریف کنید.

از متد observe برای شروع نظارت بر یک گره DOM خاص با تنظیماتی که در باره آن صحبت می کنیم، استفاده کنید.

let observer = new MutationObserver(callback);
function callback(mutations) {
 // Do anything with the mutations
}

observer.observe(targetNode, observerOptions);

مهم است توجه داشته باشید که حداقل یکی از childList، attributes، یا characterData باید به true تنظیم شود تا observer عمل کند. ترکیب این گزینه‌ها امکان کنترل دقیق بر روی تغییراتی که observer را فعال می‌کنند فراهم می‌کند و به بهینه‌سازی عملکرد با تمرکز فقط بر تغییرات مرتبط کمک می‌کند.

پیکربندی نحوه نظارت (Monitor) گره DOM در Mutation Observer چیست ؟

متد Observe، پیکربندی زیر را می تواند به عنوان یک شی، بگیرد.

childList

وقتی به true تنظیم شود، این گزینه به observer می‌گوید که تغییرات در فرزندان مستقیم گره را مشاهده کند. این شامل موارد زیر می‌شود:

• Addition - اضافه شدن گره‌های فرزند جدید
• Deletion - حذف گره‌های فرزند موجود
• Reorder - تغییر در ترتیب گره‌های فرزند

attributes

اگر true باشد، observer تغییرات در ویژگی‌های گره را نظارت می‌کند. این شامل موارد زیر است:

• Addition - افزودن ویژگی‌های جدید
• Deletion - حذف ویژگی‌های موجود
• Update Value - تغییر مقادیر ویژگی‌ها

characterData

تنظیم این گزینه به true به observer اجازه می‌دهد تغییرات در محتوای متنی گره را تشخیص دهد. این به ویژه برای نظارت بر گره‌های متنی (مثل Text Node، Span و یا P) مفید است.

subtree

وقتی True باشد Monitor یا نظارت بر روی تمامی زیر گره های گره مد نظر نیز انجام می شود. این برای نظارت بر تغییرات در بخش بزرگتری از درخت DOM بسیار کاربردی است.

attributeFilter

این گزینه آرایه‌ای از نام‌های ویژگی‌ها را می‌پذیرد و به شما اجازه می‌دهد فقط تغییرات در ویژگی‌های خاص را مشاهده کنید. برای مثال:

attributeFilter: ['id', 'class', 'style']

فقط بر روی تغییرات روی فیلد های id، class و style را خبر می دهد.

attributeOldValue و characterDataOldValue

وقتی به true تنظیم شوند، به observer اجازه می‌دهند مقدار قبلی یک ویژگی یا محتوای متنی را قبل از تغییر ثبت کند و مقدار قدیم و جدید را همراه هم به عنوان ورودی Callback بدهد.

مقادیر Mutation در Mutation Observer در جاوا اسکریپت چیست؟

پس از هر تغییری، callback اجرا می شود تغییرات در آرگومان اول به عنوان لیستی از اشیاء MutationRecord ارسال می شود. اشیاء MutationRecord دارای ویژگی های زیر هستند:

نوع Mutation، یکی از مقادیر زیر می تواند باشد:

• “attributes” – تغییرات در ویژگی گره
•  “characterData” – تغییرات در محتوای متنی گره
• “childList” – تغییر در فزرندان گره

 target – المان DOM، جایی که تغییر رخ داده است

AddNodes/RemovedNodes – گره هایی که اضافه/حذف شدند،

previousSibling/nextSibling – گره هم سطح قبلی و بعدی به گره های اضافه/حذف شده

AttributeName/attributeNamespace – نام/ فضای نام (برای XML) ویژگی تغییر یافته

oldValue – مقدار قبلی، فقط برای تغییر ویژگی یا متن، در صورتی که گزینه مربوطه با ویژگی OldValue/characterDataOldValue تنظیم شود.

نکات تکمیلی

پس از اینکه با Mutation دیگر کاری ندارید و نمی خواهید رویداد های جدید ایجاد شوند، باید متد disconnect را روی شی observer، فراخوانی کنید.

let observer = new MutationObserver(callback);
function callback(mutations) {
 // Do anything with the mutations
}

observer.observe(targetNode, observerOptions);
// … after some time
observer.disconnect()

یک مثال کامل از Mutation Observer در جاوا اسکریپت

// Select the target node to observe
const targetNode = document.getElementById('server-data');
// Configure the observer options
const config = { 
 attributes: true, 
 childList: true, 
 subtree: true 
};

// Callback function to execute when mutations are observed
const callback = (mutationsList) => {
 for (const mutation of mutationsList) {
  if (mutation.type === 'childList') {
   console.log('A child node has been added or removed.');
   // Perform actions on new child nodes
   mutation.addedNodes.forEach(node => {
    if (node.nodeType === Node.ELEMENT_NODE) {
     node.style.backgroundColor = 'yellow';
    }
   });
  } 
  else if (mutation.type === 'attributes') {
   console.log(`The ${mutation.attributeName} attribute was modified.`);
  }
  else if (mutation.type === 'characterData') {
   console.log(`The Content of the node was modified.`);
  }
 }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);

 Mutation Observer یک ابزار کارآمد برای مدیریت تغییرات پویای DOM است که توسعه‌دهندگان را قادر می‌سازد تا تجربیات کاربری پیشرفته‌تر و تعاملی‌تری ایجاد کنند. این API با ارائه روشی کارآمد و بهینه برای نظارت بر تغییرات DOM، راه حلی مدرن برای چالش‌های قدیمی مدیریت رویدادها فراهم می‌کند.

مزایای کلیدی Mutation Observer چیست؟

1. کارایی بالا: مکانیزم بهینه‌سازی شده برای نظارت بر تغییرات DOM
2. انعطاف‌پذیری: قابلیت پیکربندی دقیق برای مشاهده انواع مختلف تغییرات
3. سازگاری گسترده: پشتیبانی از مرورگرهای مدرن
4. عملکرد بهینه: کمترین تأثیر بر عملکرد صفحه

توصیه‌های پایانی

• همیشه observer را پس از اتمام کار قطع کنید
• از گزینه‌های پیکربندی برای بهینه‌سازی استفاده کنید
• عملیات سنگین را در callback اجرا نکنید
• از requestAnimationFrame برای عملیات پیچیده استفاده کنید

  Mutation Observer نشان می‌دهد که چگونه API‌ های مدرن Javascript می‌توانند توسعه وب را ساده‌تر، کارآمدتر و خلاقانه‌تر کنند. حال که با Mutation Observer در جاوا اسکریپت چیست آشنا شدید، می توانید از دیگر مقالات سایت Evolearn | ایوولرن دیدن کنید.