Прослуховування змін у DOM через веб-API Javascript, Mutation Observer (підказка: це найкраща практика)

"MutationObserver" - це веб-API, що надається сучасними браузерами для виявлення змін у DOM. За допомогою цього API ви можете прослуховувати зміни в DOM, як-от додані чи видалені вузли, атрибути зміни або зміни в текстовому вмісті текстових вузлів та вносити зміни.

В даний час веб-додатки стають складними на стороні клієнта. Вам потрібно зробити багато, слухаючи зміни DOM. Наприклад, ви хочете надіслати сповіщення в режимі реального часу користувачеві від зміни DOM або ви використовуєте структуру JS, яка має різну поведінку для різного типу змін, або вам потрібно зробити щось на основі зворотного значення плагіна JS .

"Опитування" за допомогою API setInterval - одна з небагатьох альтернатив Mutation Observer. Давайте подивимось на це, щоб краще зрозуміти, що насправді робить «спостерігач мутацій».

index.html

місяців.js

addMonth - це проста функція, яка повертає випадкову назву місяця чи числа з масиву nameOfMonth через 2 секунди.

Додамо після нього функцію опитування.

Щоб надрукувати зміни DOM, CheckMonth потрібно перевіряти щосекунди, чи щось зміниться в DOM, і після перевірки він видаляється від зовнішньогоHTML. Після того, як він отримає зміну, виясняється інтервал. setInterval WebAPI може створити завдання, яке періодично перевірятиме, чи відбулися якісь зміни. Природно, що цей метод значно погіршує продуктивність веб-додатків / веб-сайтів.

Впровадження MutationObserver:

Впровадити MutationObserver у програму досить просто. Вам потрібно створити екземпляр MutationObserver, передавши йому функцію, яка буде викликатися щоразу, коли мутація відбулася. І що найкраще, це чудовий виконавець. Майже весь останній браузер підтримує це. Давайте перейдемо до коду, як можна зробити попередній код, застосувавши MutationObserver.

Замість того, щоб додавати функцію Polling, ми можемо використовувати MutationObserver після функції addMonth.

Що ми тут зробили, ми перевірили, чи був доданий будь-який вузол у DOM через mutation.addedNodes.length. Якщо вона повертається як істина, ми реєструємо доданий Вузол.

Створений об'єкт має три методи:

  • спостерігати - починає слухати зміни. Бере два аргументи - вузол DOM, який потрібно спостерігати, та об’єкт налаштувань
  • відключити - зупиняє прослуховування змін
  • takeRecords - повертає останню партію змін до початку зворотного дзвінка.

Наступний фрагмент показує, як почати спостерігати:

Повний код:

Окрім того, що ви просто додаєтеchildList, він також може прослуховувати видалення childList та багато іншого, наприклад, атрибути, піддірець тощо. Перевірте блок коду нижче.

Це все проMutationObserver` Він пропонує ряд переваг перед опитуваннями чи іншими рішеннями. Це набагато оптимізованіше, оскільки воно знімає зміни в партіях. Крім того, MutationObserver підтримується всіма основними сучасними браузерами, а також парами поліфаунів, які використовують MutationEvents під кришкою. API MutationObserver є потужним, інформативним та, зрештою, без злому.

Докладніше вивчіть асинхронний JavaScript (зворотний дзвінок, обіцянка, генератор та асинхронні очікування)

Дізнайтеся про гачки React JS зі статті нижче.

Це все на сьогодні :)