Хотя vue/react помогает нам реализовать сопоставление операционных данных с операциями dom, ноЕсть еще много сценариев, в которых вам нужно использовать DOM API., я перечислю это для вас нижеAPI-интерфейсы DOM, которые часто появляются в некоторых библиотеках пользовательского интерфейса.(Написание бизнес-кода также может сделать больше с меньшими затратами).
Примечание: Эта статья представляет собой серию статей, которые будут постоянно обновляться, вы можете собирать их и следить за ними.Заметки на моем github, для меня будут существовать первые выпуски опубликованных здесь статейgithub.com/any86/Notesначальство.
MutationObserver
Мониторинг изменений элемента dom запускает обратный вызов.Изменения, которые можно отслеживать: атрибут (атрибут) / текст (characterData) и поддержка мониторинга дочерних узлов (childList/subtree),
Простой пример
// 注册监视器, 一旦发生变化会alert
let observer = new MutationObserver(()=>{
alert('change')
});
// 开始监视
observer.observe(el, { childList: true, subtree: true });
// 停止监视, 释放资源
observer.disconnect()
Где он обычно используется?
Обычно используется для загрузки прокрутки, чтобы отслеживать, был ли элемент добавлен к родительскому элементу, и запускать обратный вызов после успешного добавления, напримерГолодный интерфейсОн используется для регистрации обратного вызова после успешной загрузки прокрутки:
Голодный интерфейс
any-scroll
Я написал плагин прокрутки раньше, и использовал его для мониторинга увеличения и изменения элементов в контейнере
86 GitHub.com/ комфортно/уютно - это...
Для получения дополнительных инструкций см. такжеMDN - MutationObserver
совместимость
node.contains(otherNode)
Возвращаемое значение является логическим значением, указывающим, является ли входящий узел (otherNode) потомком этого узла (узла).
Простой пример
// 判断元素是否body元素且是否是body的子孙元素.
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
Где он обычно используется?
Голодный интерфейс
обычно используется ввсплывающее менюзакрытие, поcontainsОпределите, является ли щелкнутый элемент самим меню или внутри меню, если нет, это означает закрытие меню, например всплывающий компонент пользовательского интерфейса Ele.me:
совместимость
Уведомление
Хотя canisuse напоминает, что многие мобильные терминалы находятся в неизвестном состоянии, но "понравившиеся одноклассники" напомнили, чтоВам нравится мобильный интерфейсиспользовалcontains, После долгой онлайн-практики не было обнаружено никаких несовместимостей, поэтому мы можем с уверенностью использовать его на мобильном терминале/ПК.
Здесь особая похвала»Чен Цзяхан«Студенты выражают благодарность. 👏
Адрес источника:GitHub.com/YouZan/ван Т…
element.getBoundingClientRect():rect
получить элементОтносительно левого верхнего угла браузераинформация о смещении и размере элемента,возвращаемое значениеЯвляетсяrectобъектов, в том числе:left: верхний левый угол элементаСмещение оси X от верхнего левого угла браузера.top: верхний левый угол элементаСмещение оси Y от верхнего левого угла браузера.width: Ширина элемента.height: высота элемента.right: правый нижний угол элементаСмещение оси X от верхнего левого угла браузера.bottom: правый нижний угол элементаСмещение оси Y от верхнего левого угла браузера.x: такой жеleft.
y: такой жеtop.
Где он обычно используется?
vue-lazyload
Обычно используется для реализации «ленивой загрузки изображения», напримерvue-lazyloadИспользуйте его, чтобы контролировать, находится ли текущее изображение в видимой области:
совместимость
Уведомление
getBoundingClientRectполучитtransformэффект, такой как настройка вашего элементаtransform:scale(2), ТакgetBoundingClientRectВозвращаемая ширина будет вдвое больше фактической ширины элемента,topИ другая информация о местоположении также изменится, поскольку изменится размер элемента.
insertAdjacentElement
можно получить с разными параметрамиjQueryизappend | prepend | after | before.
Простая реализация
Позвольте мне сравнить и проиллюстрировать на примере, сначала посмотрите на структуру dom:
<div id="parent"></div>
Реализовать добавление (до конца), вставить в конце внутри указанного элемента
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等价于 $(parent).append(node);
parent.insertAdjacentElement('beforeend', node);
Реализовать prepend(afterbegin), который вставляется в заголовок внутри указанного элемента
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等价于 $(parent).prepend(node);
parent.insertAdjacentElement('afterbegin', node);
Реализуйте после (последействие), вставьте после указанного элемента
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等价于 $(parent).after(node);
parent.insertAdjacentElement('afterend', node);
Реализуйте до (добегин), вставьте перед указанным элементом
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等价于 $(parent).after(node);
parent.insertAdjacentElement('beforebegin', node);
Где он обычно используется?
vue-create-root
Например, компонент диалога не зависит от родительского элемента.overflow:hiddenЧтобы решить эту проблему, я написал плагин vue, который может перемещать любой компонент в любое положение тела:
совместимость
Суммировать
На самом деле, существует множество апис DOM, которые обычно используются в разработке компонентов. Для того, чтобы не сделать контент слишком долго и не способствовать изучению, я разделив его в несколько статей для объяснения, и могут быть 2-3 статьи в последующее наблюдение. Краткое изложение статей предоставляется для вашего удобства.
Вы также можете добавить меня в WeChat, я приглашу васГруппа WeChat(Из-за ограничения Tencent на 100 человек в группах WeChat я должен зайти после более чем 100 человек)
Чтобы научиться разработке компонентов, я также построил колесо🚀, просто для развлечения.GitHub.com/Anyi86/Anyi-U…