الاستماع إلى تغييرات DOM من خلال Javascript Web API و Mutation Observer (تلميح: إنها أفضل ممارسة)

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

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

يعد "Polling" باستخدام setInterval API أحد البدائل القليلة لبرنامج Mutation Observer. دعنا نلقي نظرة عليه لفهم أفضل فعليًا لما تفعله "مراقبة الطفرة".

index.html و

months.js

addMonth هي وظيفة بسيطة تقوم بإرجاع اسم عشوائي لشهر أو رقم من مجموعة nameOfMonth بعد ثانيتين.

دعنا نضيف وظيفة الاقتراع بعدها.

لطباعة تغيير DOM ، يحتاج CheckMonth إلى التحقق من كل ثانية إذا تغير أي شيء في DOM وبعد التحقق من طباعته بعيدًا عن outerHTML. بعد أن يحصل على التغيير ، يخلص الفاصل الزمني. يمكن لـ setInterval WebAPI إعداد مهمة تحقق بشكل دوري إذا حدثت أي تغييرات. بطبيعة الحال ، تؤدي هذه الطريقة إلى تدهور أداء تطبيق الويب / موقع الويب بشكل كبير.

تطبيق MutationObserver:

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

بدلاً من إضافة دالة Polling ، يمكننا استخدام MutationObserver بعد وظيفة addMonth.

ما فعلناه هنا ، تحققنا من إضافة أي عقدة في DOM بواسطة mutation.addedNodes.length. إذا عاد صحيحًا ، فإننا نقوم بتسجيل العقدة المضافة.

يحتوي الكائن الذي تم إنشاؤه على ثلاث طرق:

  • مراقبة - يبدأ الاستماع للتغييرات. يأخذ وسيطين - عقدة DOM التي تريد ملاحظتها وكائن الإعدادات
  • قطع الاتصال - توقف عن الاستماع للتغييرات
  • takeRecords - يُرجع آخر دفعة من التغييرات قبل بدء رد الاتصال.

يوضح المقتطف التالي كيفية بدء المراقبة:

كود كامل:

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

هذا كل ما يتعلق بـMutationObserver` وهو يوفر عددًا من المزايا على الاقتراع أو غيره من الحلول. إنها طريقة أكثر تحسينًا لأنها تطلق التغييرات في الدُفعات. علاوة على ذلك ، يتم دعم MutationObserver من قبل جميع المتصفحات الحديثة الرئيسية ، جنبا إلى جنب مع عدة polyfills التي تستخدم MutationEvents تحت غطاء محرك السيارة. واجهة برمجة تطبيقات MutationObserver قوية وغنية بالمعلومات ، وفي نهاية المطاف خالية من الاختراق.

تعرف على JavaScript غير متزامن بالتفاصيل (رد الاتصال ، الوعد ، المولد ، عدم التزامن)

تعرف على React JS hooks من المقالة أدناه.

هذا كل شيء لهذا اليوم :)