MutationObserver очень заинтересовал меня для одного из сценариев ленивой загрузки модулей в javascript: когда какой-то модуль нужен только для работы с каким-то конкретным элементом, которого может не быть на странице изначально, но который может появиться впоследствии (как вариант, после какого-нибудь ajax запроса).
Это также может быть полезно, например, в блогах, когда в одних записях нужен какой-нибудь слайдер, в других фотогалерея, в третьих видеоплеер и так далее. И вместо того, чтобы заранее раздувать бандл всеми возможными вариантами, просто подгружаем необходимые модули в случае необходимости.
Вот такой набросок
function waitForSelectorOnce(selector) {
return new Promise((resolve) => {
let observer = null;
let checker = () => {
if (document.querySelector(selector)) {
observer && observer.disconnect();
resolve();
return true;
} else {
return false;
}
};
// проверяем, может быть селектор сразу имеется на странице
// тогда и не надо инициализировать MutationObserver
if (!checker()) {
observer = new MutationObserver(checker);
observer.observe(document.documentElement, {
attributes: true,
childList: true,
subtree: true,
});
}
});
}
waitForSelectorOnce(".gallery").then(() => import("./gallery"));
waitForSelectorOnce(".fotorama").then(() => import("./fotorama"));
waitForSelectorOnce("a[href$='.mp3']").then(() => import("./audio-player"));
Работает даже в ie 11.
По хорошему, надо еще использовать throttle. И промис тут скорее всего избыточен, можно просто передать коллбэк при вызове функции. Ну а вообще, это только набросок. Production ready код я никому не обещал.