كيفية استخدام MutationObserver API للتغييرات عقدة DOM

إليك سيناريو: تقوم ريتا ، كاتبة مجلة ، بتحرير مقال لها عبر الإنترنت. إنها تحفظ تغييراتها وترى الرسالة “تم حفظ التغييرات!” عندها فقط ، لاحظت خطأ مطبعي فاتته. انها إصلاحه وعلى وشك النقر “حفظ”, عندما تتلقى مكالمة هاتفية غاضبة من رئيسها.

بعد انتهاء المكالمة ، عادت إلى الشاشة ، كما ترى “تم حفظ التغييرات!” يغلق جهاز الكمبيوتر الخاص بها والعواصف خارج المكتب.

بصرف النظر عن عدم رغبتي في سرد ​​القصص ، لاحظنا من هذا السيناريو القصير ما المشكلة التي أحدثتها تلك الرسالة المستمرة. لذلك ، نقرر في المستقبل تجنبه عندما يكون ذلك ممكنًا ، ونستخدم أحدهما يحث المستخدم على الإقرار بالنقر عليه - أو تختفي من تلقاء نفسها. استخدام الثانية لرسائل سريعة هو فكرة جيدة.

نحن نعرف بالفعل كيفية جعل عنصر ما يختفي من صفحة ما ، لذلك لا ينبغي أن يكون مشكلة. ما نحتاج إلى معرفته هو متى ظهرت? لذلك يمكننا أن نجعلها تختفي بعد وقت معقول.

MutationObserver API

عموما ، عندما عنصر DOM (مثل رسالة شعبة) أو أي تغييرات عقدة أخرى ، يجب أن نكون قادرين على معرفة ذلك. لفترة طويلة كان على المطورين الاعتماد على الاختراقات والأطر بسبب عدم وجود واجهة برمجة تطبيقات أصلية. لكن هذا قد تغير.

لدينا الآن MutationObserver (أحداث طفرة سابقة). MutationObserver هو كائن JavaScript أصلي مع مجموعة من الخصائص والأساليب. إنه يتيح لنا مراقبة التغيير على أي عقدة مثل عنصر DOM ، المستند ، النص ، إلخ. من خلال الطفرة ، نعني إضافة أو إزالة العقدة والتغييرات في سمة وبيانات العقدة.

دعونا نرى مثالا لفهم أفضل. سنقوم أولاً بإعداد مكان ظهور الرسالة عند النقر فوق الزر ، مثلما رأته ريتا. ثم جيدا إنشاء وربط مراقب طفرة بمربع الرسائل هذا و رمز المنطق لإخفاء الرسالة تلقائيًا. ذكاء?

ملحوظة: قد تكون في مرحلة ما أو سبق أن طلبت مني رأسك “لماذا لا تقوم فقط بإخفاء الرسالة من داخل زر النقر فوق الحدث نفسه في JavaScript?” في المثال الخاص بي ، لا أعمل مع خادم ، لذا بالطبع فإن العميل مسؤول عن إظهار الرسالة ويمكنه إخفاؤها بسهولة شديدة. ولكن كما هو الحال في أداة تحرير Rita إذا كان الخادم هو الذي يقرر تغيير محتوى DOM ، يمكن للعميل البقاء فقط في حالة تأهب وانتظار.

أولاً ، نقوم بإنشاء الإعداد لإظهار الرسالة عند النقر فوق الزر.

 اظهر الرسالة

var msg = document.querySelector ('# msg') ، SUCCESSMSG = "التغييرات محفوظة!"؛ / * إضافة زر النقر فوق الحدث * / document .querySelector ('button') .addEventListener ('click'، showMsg)؛ function showMsg () msg.textContent = SUCCESSMSG؛ msg.style.background = 'teal'؛  

بمجرد تشغيل الإعداد الأولي ، لنقم بما يلي ؛

• إنشاء MutationObserver كائن مع وظيفة رد اتصال المعرفة من قبل المستخدم (يتم تعريف وظيفة في وقت لاحق في المنشور). وظيفة ستنفذ على كل طفرة لوحظ من قبل MutationObserver.
• قم بإنشاء كائن تهيئة لتحديد نوع الطفرات التي يجب مراعاتها بواسطة MutationObserver.
• ربط MutationObserver إلى الهدف ، وهو "رسالة" شعبة في مثالنا.

(دالة startObservation () var / * 1) إنشاء كائن MutationObserver * / observer = جديد MutationObserver (دالة (طفرات) mutationObserverCallback (mutations)؛) ، / * 2) إنشاء كائن config * / config = childList: صحيح؛ / * 3) Glue'em all * / observer.observe (msg، config)؛ ) ()؛ 

أدناه قائمة من الخصائص ل التكوين كائن تحديد أنواع الطفرات المختلفة. نظرًا لأننا في مثالنا نتعامل فقط مع عقدة نصية فرعية تم إنشاؤها لنص الرسالة ، فقد استخدمنا childList خاصية.

أنواع الطفرات التي لوحظت

الآن ، إلى وظيفة رد الاتصال تلك التي يتم تنفيذها على كل طفرة ملحوظة.

function mutationObserverCallback (mutations) / * الاستيلاء على أول طفرة * / var mutationRecord = mutations [0]؛ / * إذا تمت إضافة عقدة تابعة ، فاختبأ msg بعد 2 ثانية * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg، 2000)؛  function hideMsg () msg.textContent = "؛ msg.style.background = 'none'؛ 

بما أننا نضيف فقط رسالة إلى شعبة, سنقوم فقط بالانتقال إلى أول طفرة لوحظت فيها والتحقق من إدراج عقدة نصية. إذا حصلنا على أكثر من تغيير يحدث ، فيمكننا إجراء حلقة عبر الطفرات مجموعة مصفوفة.

كل طفرة في الطفرات ويمثل مجموعة من وجوه MutationRecord مع الخصائص التالية.

خصائص MutationRecord

وهذا كل شيء. علينا فقط وضع الكود معًا للخطوة الأخيرة.

دعم المتصفح

مرجع

• “W3C DOM4 طفرة المراقب.” W3C. على شبكة الإنترنت. 19 يونيو 2015
• “MutationObserver.” موزيلا المطور الشبكة. على شبكة الإنترنت. 19 يونيو 2015.