Это на самом деле единственное, что можно применить. Не могу утверждать на 100%, но кажется, именно с ним под капотом работают фреймворки типа angular, react, etc.
Хм, возможно мне было легко, потому что перед этим я нехило вкурила в потоки и rxjs. Я попробую немного объяснить.
Вообще вот по той ссылке в примере нормально рассказано, что он делает. Это немного похоже, как вы прикручиваете слайдер на jquery. В том смысле, что есть некий класс, мы создаем экземпляр. И передаем этому экземпляру объект для работы и настройки. А если слайдер нам больше не нужен, то обычно есть метод, чтобы его отключить.
Тут то же самое. Только у нас тут не слайдер создаться, а поток событий, отфильтрованный наблюдателем по нашему конфигу.
То есть, вот тут: const observer = new MutationObserver(callback);
Мы создаем наблюдателя, даем ему колбек, который он должен запустить каждый раз, когда событие произойдет и пройдет через фильтр.
observer.observe(target, config);
Сообщаем за кем следить (например, body) и как фильтровать (наш конфиг), тем самым активируя слежение.
В колбеке считываем что изменилось, проводим какие-то действия - например, как в моем ответе, смотрим какие элемент были вставлены в этот момент, есть ли среди них искомый элемент.
И когда нам уже не нужно больше следить за изменениями, мы просто сообщаем нашему наблюдателю, что работу нужно остановить. observer.disconnect();
Например, это можно сделать в коллбеке из моего примера, потому что вторым параметров в callback функцию, наблюдатель передает себя же (вернее ссылку на себя же).
var collback = function(mutationsList, observer) {
mutationsList.forEach((mutation) => {
if (mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach((node) => {
if (
node.localName === "some" &&
node.hasAttribute("some")
) {
//нашли элемент some с атрибутом some. Провели с ним действия.
// и прекратили слежение
observer.disconnect();
}
});
}
});
});
aspirantes, в общем что-то я вам там ниже ответом описала. Я не знаю php вообще, но использовала такой подход в схеме, где я никак не могла узнать в какой момент вообще появляется в dom элемент, потому что его вклинивал чужой аякс, недоступный, с котором мне, как виджету, нельзя никак взаимодействовать. И нет никакой возможности его отследить, а реагировать на появление, например, новых товаров в корзине - было надо.
Если у вас похожая ситуация, то подойдет.
Практически всегда делаю адаптивные сайты, с полной поддержкой мобильных устройств. Поэтому конечно и опасаюсь немного. Спасибо за ответ. Я уже начала активно вникать в тему. Сейчас по работе в большей степени занимаюсь поддержкой готовых сайтов (их редизайны, адаптации, допиливание каких-то фич), так что на полноценные эксперименты времени не хватает, но теперь я буду знать на что в первую очередь обратить внимание.
Хм, возможно мне было легко, потому что перед этим я нехило вкурила в потоки и rxjs. Я попробую немного объяснить.
Вообще вот по той ссылке в примере нормально рассказано, что он делает. Это немного похоже, как вы прикручиваете слайдер на jquery. В том смысле, что есть некий класс, мы создаем экземпляр. И передаем этому экземпляру объект для работы и настройки. А если слайдер нам больше не нужен, то обычно есть метод, чтобы его отключить.
Тут то же самое. Только у нас тут не слайдер создаться, а поток событий, отфильтрованный наблюдателем по нашему конфигу.
То есть, вот тут:
const observer = new MutationObserver(callback);Мы создаем наблюдателя, даем ему колбек, который он должен запустить каждый раз, когда событие произойдет и пройдет через фильтр.
observer.observe(target, config);Сообщаем за кем следить (например, body) и как фильтровать (наш конфиг), тем самым активируя слежение.
В колбеке считываем что изменилось, проводим какие-то действия - например, как в моем ответе, смотрим какие элемент были вставлены в этот момент, есть ли среди них искомый элемент.
И когда нам уже не нужно больше следить за изменениями, мы просто сообщаем нашему наблюдателю, что работу нужно остановить.
observer.disconnect();Например, это можно сделать в коллбеке из моего примера, потому что вторым параметров в callback функцию, наблюдатель передает себя же (вернее ссылку на себя же).