雖然vue/react幫我們實現了運算元據對映到dom操作, 但是還是有很多不得不用DOM API的場景, 下面我就給大家列出一些UI庫中經常出現的DOM API(寫業務程式碼也可事半功倍).
注: 本文是系列文章會持續更新, 大家可收藏保持關注. 也可關注我github上的筆記, 在這裡釋出的文章的第一版我都會存在github.com/any86/Notes上.
MutationObserver
監視dom元素的變化觸發回撥, 可監視的變化有:屬性(attribute) / 文字(characterData), 同時支援監視子孫節點(childList/subtree),
簡單舉例
// 註冊監視器, 一旦發生變化會alert
let observer = new MutationObserver(()=>{
alert('change')
});
// 開始監視
observer.observe(el, { childList: true, subtree: true });
// 停止監視, 釋放資源
observer.disconnect()
複製程式碼常用在哪裡?
一般用在滾動載入, 用來監視元素是否已經加入父元素, 加入成功後觸發回撥, 比如餓了麼UI就用來註冊滾動載入成功後的回撥:
餓了麼UI
any-scroll
之前自己寫過scroll外掛, 用他來監視容器內元素的增加變化
更多說明, 還請參考MDN - MutationObserver
相容性
node.contains(otherNode)
返回的是一個布林值，來表示傳入的節點(otherNode)是否為該節點(node)的子孫節點.
簡單舉例
// 判斷元素是否body元素且是否是body的子孫元素.
function isInPage(node) {
return (node === document.body) ? false : document.body.contains(node);
}
複製程式碼常用在哪裡?
餓了麼UI
一般用在彈出選單的關閉, 通過contains判斷點選元素是否是選單本身或在選單內, 如果不在其內那麼表示要關閉選單, 比如餓了麼UI的popover元件:
相容性
注意
雖然canisuse上提醒移動端很多是unknown的狀態, 但是"有讚的同學"提醒說有贊移動端UI一直在使用contains, 經過長時間線上實踐, 並未發現不相容, 所以我們可以在移動端/pc放心使用.
這裡特別對有讚的"陳嘉涵"同學表示感謝. ?
原始碼地址: github.com/youzan/vant…
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返回的width會是元素實際寬度的2倍, top等位置資訊也會因為元素尺寸變化而發生變化.
insertAdjacentElement
可以通過不同的引數實現jQuery的append | prepend | after | before.
簡單實現
下面我舉例對比說明, 先看下dom結構:
<div id="parent"></div>
複製程式碼實現append(beforeend), 插入到指定元素內部的尾部
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);
複製程式碼實現after(afterend), 插入到指定元素後面
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等價於 $(parent).after(node);
parent.insertAdjacentElement('afterend', node);
複製程式碼實現before(beforebegin), 插入到指定元素前面
let parent = document.getElementById('parent');
let node = document.createElement('span');
// 等價於 $(parent).after(node);
parent.insertAdjacentElement('beforebegin', node);
複製程式碼常用在哪裡?
vue-create-root
比如對話方塊元件為了不受到父元素overflow:hidden的影響而被遮擋, 都會把元件移動到body的尾部, 我之前為了解決這個問題, 寫過一個vue的外掛, 可以把任意元件移動到body的任意位置:
相容性
總結
其實還有很多DOM API也是元件開發中常用的, 為了不讓內容太長不利於學習, 我會拆成多篇文章來講解, 後續可能還有2-3篇文章, 等都更新完, 我會出一個彙總的文章方便大家查閱.
也可加我微信, 我拉你進入微信群(由於騰訊對微信群的100人限制, 超過100人後必須由我拉進去)
為了學習元件開發自己也造了個輪子?, 僅供娛樂. github.com/any86/any-u…