LINUX.ORG.RU

Как производительно имитировать :has()?

 ,


0

1

Хочу скрывать div внутри которого есть определённый элемент. Т.е. условно .parent:has(.child) { display: none; } (скрываться должен .parent). Про то, что :has никто не поддерживает я в курсе, и нужно подключать JavaScript. Вопрос: как это сделать с максимальной производительностью в ванильном JS? DOM может меняться, нужно это учитывать.

Пока единственная идея - держать MutationObserver на body и на каждое изменение прогонять код, но это тормозить будет ужасно.

В идеале мне нужно передать CSS-селектор .parent куда-то в движок, чтобы он меня извещал только когда добавляется/изменяется элемент .parent или его содержимое. Но такого API не нашёл.

★★★★★

Собрать список всех определённых элементов, а после этого пройтись по нему и задать родителю-диву свойство.

fernandos ★★★
()
Ответ на: комментарий от Legioner

И что? Занесите это в процедуру и дёргайте при изменении ДОМа.

Если производительность будет сильно страдать, смотрите в сторону виртуального ДОМа.

fernandos ★★★
()

MutationObserver батчит измененния и вызывает обработчик асинхронно, для группы изменений за фрейм. Виртулаьный Дом тут не нужен - он делает то же самое, только в дополнительной абстракции.

Подписываться в обсервере можно не на все события сразу, а только на нужны.

Самый производительный вариант без обсервера - это преобразовать свой .parent или .child (в зависимости от логики) в нативный веб-компонент (custom element). В конструкторе и методах жизненного цикла описать проверки.

javascript
()

держать MutationObserver на body

Хочу скрывать div внутри которого есть определённый элемент

Зачем на body, если можно на этот самый div?

Nervous ★★★★★
()
Ответ на: комментарий от Legioner

Ты сам эти дивы вставляешь/удаляешь? А элементы внутри, при наличии которых дивы надо скрыть, ты добавляешь/удаляешь?

Nervous ★★★★★
()
Ответ на: комментарий от Nervous

Ты сам эти дивы вставляешь/удаляешь? А элементы внутри, при наличии которых дивы надо скрыть, ты добавляешь/удаляешь?

Нет, я делаю что-то вроде юзерскрипта для стороннего сайта, в котором хочу скрывать некоторые дивы. Сторонний сайт интерактивный и подгружает это всё дело на ходу. Можно считать это неким адблоком.

Legioner ★★★★★
() автор топика
Ответ на: комментарий от Legioner

В таком случае наиболее оптимальным на данный момент решением является обсервер. (помимо же добаления\удаления элементов, у уже существующие могут преобразовываться в целевые, наверняка).

Во всяком случае это единственный универсальный и максимально слабосвязанный способ. За тормоза переживать следует только в том отношениии, насколько оптимальным ты напишешь хэндлер обсервера.

Иначе, если задача все же не писать условный адблок под что-угодно, можеь попробовать формализовать задачу подробнее. По типу - точно ли элементы попадают только в body, а не вдругого родителя. Точно ли их селекторы это единственные классы. Не зависит ли их появление\удаление от каких-либо событий. Точно ли ты не можешь просто перехватить нужные события логики, а не модификации дома. Почему нужно отслеживать именно элементы по по содержимому, чем они отличаются. Ну и прочие специализации. Вплоть до доменной области или может даже покажешь целевой сайт, где тебе надо это применять.

В противном случае - обсервер с максимально оптимальным хэндлером.

javascript
()

если ты не знаешь как что-то сделать, то ты что-то делаешь не так (понимай как хочешь)

tz4678 ★★
()

MutationObserver… но это тормозить будет ужасно

Почему? Всегда можно обмазаться ифаками

CryNet ★★★★★
()

Раз уж всё равно js подключаешь, то почему бы не подключить jquery, в котором этот has сто лет уже как есть: https://api.jquery.com/has/

А производительно или нет – кому какое дело; вообще, jquery местами довольно умно реализован, с оптимизациями там всякими. Так что есть немалый шанс, что окажется быстрее самопальных решений.

dimgel ★★★★★
()
Ответ на: комментарий от anonymous

Нет, просто я хорошо знаком с современными подходами к разработке. :)

dimgel ★★★★★
()
Ответ на: комментарий от dimgel

И как ты предлагаешь мне его использовать? Мне нужно, чтобы стили применялись при изменении страницы, в jQuery такого функционала я не видел. А разово я и без jQuery прекрасно это могу сделать.

Legioner ★★★★★
() автор топика
Последнее исправление: Legioner (всего исправлений: 1)
Ответ на: комментарий от Legioner

Понятно, что вызывать ручками и так и так придётся. Просто с jquery писанины будет меньше.

dimgel ★★★★★
()

Пока единственная идея - держать MutationObserver на body и на каждое изменение прогонять код, но это тормозить будет ужасно.

единственная известная мне альтернатива MutationObserver - setInterval, что еще хуже

Ford_Focus ★★★★★
()

Извиняюсь.

Не имею представления. Регистранты особенно многозвездочные они «стриженые» как бы они прекрасно знают чем им чревато нарушение правил. Да звезды и score это всего лишь числовое значение из базы данных. Но если репутация хорошая то портить сознательно не станут за исключением тех кто сливает скор.

@XoFfiCEr ★★★ (22.07.21 13:11:39)

Я тебе неоднократно и с анонимуса помогал советом, просто что у тебя патологическая неприязнь к критике и нежелание к саморазвитию. Вот у тебя скоро тут 4 звёзды будет, а несколько они соответствуют квалификации?

И вот вопрос: ты действительно хочешь здесь перебанить оставшихся адекватных анонимов? И зачем? Будете с Шамой и т.п. личностями общаться в толксах? Ну, удачи…

anonymous
()
Ответ на: комментарий от Legioner

Ты какой-то ерундой страдаешь и в итоге все равно (если совсем не упорот) перейдешь для твоих нужд на библиотеку вроде реакта или т.п.

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.