JS中比較冷門但非常好用的方法總結(jié)
getBoundingClientRect()
getBoundingClientRect() 是一個(gè)用于獲取元素位置和尺寸信息的方法。它返回一個(gè) DOMRect對(duì)象，其提供了元素的大小及其相對(duì)于視口的位置，其中包含了以下屬性：
x：元素左邊界相對(duì)于視口的 x 坐標(biāo)。y：元素上邊界相對(duì)于視口的 y 坐標(biāo)。width：元素的寬度。height：元素的高度。top：元素上邊界相對(duì)于視口頂部的距離。right：元素右邊界相對(duì)于視口左側(cè)的距離。bottom：元素下邊界相對(duì)于視口頂部的距離。left：元素左邊界相對(duì)于視口左側(cè)的距離。
const box = document.getElementById('box');
const rect = box.getBoundingClientRect();
console.log(rect.x); // 元素左邊界相對(duì)于視口的 x 坐標(biāo)
console.log(rect.y); // 元素上邊界相對(duì)于視口的 y 坐標(biāo)
console.log(rect.width); // 元素的寬度
console.log(rect.height); // 元素的高度
console.log(rect.top); // 元素上邊界相對(duì)于視口頂部的距離
console.log(rect.right); // 元素右邊界相對(duì)于視口左側(cè)的距離
console.log(rect.bottom); // 元素下邊界相對(duì)于視口頂部的距離
console.log(rect.left); // 元素左邊界相對(duì)于視口左側(cè)的距離為了更好地理解，我在頁面上設(shè)置了一個(gè)容器，其對(duì)應(yīng)屬性看下圖：
應(yīng)用場(chǎng)景
這個(gè)方法通常用于需要獲取元素在視口中的位置和尺寸信息的場(chǎng)景，比如實(shí)現(xiàn)拖拽、定位或響應(yīng)式布局等，兼容性很好，一般用滾動(dòng)事件比較多。
特殊場(chǎng)景會(huì)用上，比如你登錄了淘寶的網(wǎng)頁，當(dāng)你下拉滑塊的時(shí)候，下面的圖片不會(huì)立即加載出來，有一個(gè)懶加載的效果。當(dāng)上面一張圖片沒在可視區(qū)內(nèi)時(shí)，就開始加載下面的圖片。
下面代碼就是判斷一個(gè)容器是否出現(xiàn)在可視窗口內(nèi)：
const box = document.getElementById('box')
window.onscroll = function () {//window.addEventListener('scroll',()=>{})
console.log(checkInView(box));
}
function checkInView(dom) {
const { top, left, bottom, right } = dom.getBoundingClientRect();
return top > 0 &&
left > 0 &&
bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
right <= (window.innerWidth ||
document.documentElement.clientWidth)
}當(dāng)容器在可視區(qū)域內(nèi)就輸出true，否則就是false。
intersectionObserver
IntersectionObserver 是一個(gè)構(gòu)造函數(shù)，可以接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，第二個(gè)參數(shù)是一個(gè)對(duì)象。這個(gè)方法用于觀察元素相交情況，它可以異步地監(jiān)聽一個(gè)或多個(gè)目標(biāo)元素與其祖先元素或視口之間的交叉狀態(tài)。它提供了一種有效的方法來檢測(cè)元素是否可見或進(jìn)入視口。
用法
使用 IntersectionObserver 需要以下步驟：
- 創(chuàng)建一個(gè)
IntersectionObserver實(shí)例，傳入一個(gè)回調(diào)函數(shù)和可選的配置對(duì)象。
const observer = new IntersectionObserver(callback, options);
const callback = (entries, observer) => {
// 處理交叉狀態(tài)變化的回調(diào)函數(shù)
};
const options = {
// 可選配置
};- 將要觀察的目標(biāo)元素添加到觀察者中。
const target = document.querySelector('#targetElement');
observer.observe(target);- 在回調(diào)函數(shù)中處理交叉狀態(tài)的變化。
const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 元素進(jìn)入視口
} else {
// 元素離開視口
}
});
};entries 參數(shù)是一個(gè)包含每個(gè)目標(biāo)元素交叉狀態(tài)信息的數(shù)組。每個(gè) entry 對(duì)象都有以下屬性：
target：觀察的目標(biāo)元素。intersectionRatio：目標(biāo)元素與視口的交叉比例，值在 0 到 1 之間。isIntersecting：目標(biāo)元素是否與視口相交。intersectionRect：目標(biāo)元素與視口的交叉區(qū)域的位置和尺寸信息。
options 對(duì)象是可選的配置，其中常用的配置選項(xiàng)包括：
root：指定觀察器的根元素，默認(rèn)為視口。rootMargin：設(shè)置根元素的外邊距，用于擴(kuò)大或縮小交叉區(qū)域。threshold：指定交叉比例的閾值，可以是單個(gè)數(shù)值或由多個(gè)數(shù)值組成的數(shù)組。
應(yīng)用場(chǎng)景
IntersectionObserver 適用于實(shí)現(xiàn)懶加載、無限滾動(dòng)、廣告展示和可視化統(tǒng)計(jì)等場(chǎng)景，同樣可以判斷元素是否在某一個(gè)容器內(nèi)，不會(huì)引起回流。
createNodeIterator()
createNodeIterator() 方法是 DOM API 中的一個(gè)方法，用于創(chuàng)建一個(gè) NodeIterator 對(duì)象，可以用于遍歷文檔樹中的一組 DOM 節(jié)點(diǎn)。
通俗一點(diǎn)來講就是它可以遍歷 DOM 結(jié)構(gòu)，把 DOM 變成可遍歷的。
比較偏的面試考點(diǎn)
這種方法算是一個(gè)比較偏的面試考點(diǎn)，面試官問你怎樣實(shí)現(xiàn)遍歷 DOM 結(jié)構(gòu)？其實(shí)就可以用到這個(gè)方法。但是大多數(shù)程序員答不上來這個(gè)問題，因?yàn)槲覀冊(cè)谌粘ｉ_發(fā)中這個(gè)方法用得極少。這個(gè)方法常在框架源碼中體現(xiàn)。
應(yīng)用
<body>
<div id="app">
<p>hello</p>
<div class="title">標(biāo)題</div>
<div>
<div class="content">內(nèi)容</div>
</div>
</div>
<script>
const body = document.getElementsByTagName('body')[0]
const item = document.createNodeIterator(body)//讓body變成可遍歷的
let root = item.nextNode() // 下一層
while (root) {
console.log(root);
if (root.nodeType !== 3) {
root.setAttribute('data-index', 123)//給每個(gè)節(jié)點(diǎn)添加一個(gè)屬性
}
root = item.nextNode()
}
</script>
</body>上面代碼成功遍歷到了各個(gè) DOM 結(jié)構(gòu)：
并且在每個(gè) DOM 節(jié)點(diǎn)上都添加了data-index = "123"。
getComputedStyle()
getComputedStyle()是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值的方法。返回的是一個(gè)CSS樣式聲明對(duì)象。
這個(gè)方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是你想要獲取哪個(gè)元素的 CSS ，第二個(gè)參數(shù)是一個(gè)偽元素。
用法
<style>
#box {
width: 200px;
height: 200px;
background-color: cornflowerblue;
position: relative;
}
#box::after {
content: "";
width: 50px;
height: 50px;
background: #000;
position: absolute;
top: 0;
left: 0;
}
</style> const box = document.getElementById('box')
const style = window.getComputedStyle(box, 'after')
const height = style.getPropertyValue('height')
const width = style.getPropertyValue('width')
console.log(style);
console.log(width, height);上述代碼輸出結(jié)果為：
有一個(gè) id 為 box 容器的 CSS 樣式聲明對(duì)象，以及偽元素的寬高。
requestAnimationFrame()
上面4種方法我們可能用得不是很多，但是requestAnimationFrame方法相對(duì)使用較多。requestAnimationFrame() 是一個(gè)用于在下一次瀏覽器重繪之前調(diào)用指定函數(shù)的方法，它是 HTML5 提供的 API。
與setInterval和setTimeout
requestAnimationFrame的調(diào)用頻率通常為每秒60次。這意味著我們可以在每次重繪之前更新動(dòng)畫的狀態(tài)，并確保動(dòng)畫流暢運(yùn)行，而不會(huì)對(duì)瀏覽器的性能造成影響。
setInterval與setTimeout它可以讓我們?cè)谥付ǖ臅r(shí)間間隔內(nèi)重復(fù)執(zhí)行一個(gè)操作，不會(huì)考慮瀏覽器的重繪，而是按照指定的時(shí)間間隔執(zhí)行回調(diào)函數(shù)，可能會(huì)被延遲執(zhí)行，從而影響動(dòng)畫的流暢度。
效果對(duì)比
我們?cè)O(shè)置了兩個(gè)容器，分別用requestAnimationFrame()方法和setTimeout方法進(jìn)行平移效果，Js 代碼如下所示：
let distance = 0
let box = document.getElementById('box')
let box2 = document.getElementById('box2')
window.addEventListener('click', function () {
requestAnimationFrame(function move() {
box.style.transform = `translateX(${distance++}px)`
requestAnimationFrame(move)//遞歸
})
setTimeout(function change() {
box2.style.transform = `translateX(${distance++}px)`
setTimeout(change, 17)
}, 17)
})效果圖如下：
可能我們?nèi)庋劭吹貌皇呛芮宄谴_實(shí)下面的圖形平移沒有上面圖形流暢，用setTimeout會(huì)有卡頓現(xiàn)象。
小結(jié)
本文主要介紹了在 Js 中五個(gè)不常用但很高級(jí)的方法，看完這篇文章希望對(duì)你學(xué)習(xí)有所幫助。最后祝大家周末愉快，我們下篇文章見。
以上就是JS中比較冷門但非常好用的方法總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JS方法總結(jié)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript 尚未實(shí)現(xiàn)錯(cuò)誤解決辦法
打開頁面的時(shí)候，F(xiàn)F下一切正常，但是當(dāng)我用IE6測(cè)試的時(shí)候，JS總執(zhí)行不下去了，提示“尚未實(shí)現(xiàn)”，無論怎么搞就搞不定。2008-11-11
JavaScript中操作字符串是一個(gè)很重要的話題,下面這篇文章主要給大家介紹了關(guān)于javascript中字符串處理常用的方法,文中通過圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Js實(shí)現(xiàn)粘貼上傳圖片的原理及示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
javascript下對(duì)于事件、事件流、事件觸發(fā)的順序隨便說說
向同一個(gè)標(biāo)簽 動(dòng)態(tài)的添加事件是 執(zhí)行的順序在ie和其他非ie內(nèi)核的瀏覽器有所不同 ie是“先進(jìn)先出 ” 就是最先添加的最先執(zhí)行，其他非ie內(nèi)核的瀏覽器是 “先進(jìn)后出”，就是 最后添加的事件 先執(zhí)行。2010-07-07
取消單選按鈕選中并判斷對(duì)象是否為空，在項(xiàng)目中也是比較常見的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
javascript實(shí)現(xiàn)checkBox的全選，反選與賦值
這篇文章主要介紹了javascript實(shí)現(xiàn)checkBox的全選，反選與賦值的方法，以實(shí)例形式詳細(xì)分析了實(shí)現(xiàn)的思路及對(duì)應(yīng)的html與js代碼的實(shí)現(xiàn)過程2015-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)支持多選的遍歷下拉列表代碼,涉及javascript遍歷select及設(shè)置css屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
javascript中parentNode,childNodes,children的應(yīng)用詳解
本篇文章是對(duì)javascript中parentNode,childNodes,children的應(yīng)用進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
js實(shí)現(xiàn)可拖動(dòng)DIV的方法
這篇文章主要介紹了js實(shí)現(xiàn)可拖動(dòng)DIV的方法，有需要的朋友可以參考一下2013-12-12
[紅色]拖動(dòng)層...2006-10-10