大家好，今天給大家分享5個(gè)不常用但又很重要的 JAVAScript 原生API，熟悉了這些，將會(huì)為我們的前端開發(fā)帶來意想不到的便利。

getBoundingClientRect()

getBoundingClientRect()是JavaScript中的一個(gè)函數(shù)，它返回一個(gè) DOMRect 矩形對(duì)象，該對(duì)象表示元素在視口中的位置。這個(gè)矩形對(duì)象包含了元素的左，上，右和下邊界，以及寬度和高度。

domRect = element.getBoundingClientRect();

注意：getBoundingClientRect()是基于視口的，所以坐標(biāo)是相對(duì)于當(dāng)前視口的。一些瀏覽器的實(shí)現(xiàn)會(huì)四舍五入返回的數(shù)值，如果精確度要求高可以使用Math.round()解決

例如，獲取DOM元素相對(duì)于頁面左上角的top和left定位距離的值。

const h3 = document.querySelector("h3");
const rect = h3.getBoundingClientRect();
const topElement = document.documentElement;

const positionTop = topElement.scrollTop + rect.top;
const positionLeft = topElement.scrollLeft + rect.left;

window.getComputedStyle()

window.getComputedStyle()是JavaScript中的一個(gè)函數(shù)，它可以獲取一個(gè)元素的計(jì)算后的樣式。返回的是一個(gè)cssStyleDeclaration對(duì)象，可以使用它來讀取元素的樣式信息。

document.defaultView.getComputedStyle(element, [pseudo-element])
//或
window.getComputedStyle(element, [pseudo-element])

它有兩個(gè)參數(shù)，第一個(gè)是計(jì)算樣式的元素，第二個(gè)是偽元素；如果偽元素不存在，則傳遞 null。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        #root {
            background-color: pink;
            width: 100px;
            height: 200px;
        }
        #root::after {
            content: 'Haskell';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="root" style="background-color: rgb(135, 206, 235);"></div>
</body>
<script>
    function getStyleByAttr(node, name) {
        return window.getComputedStyle(node, null)[name]
    }
    const node = document.getElementById('root')
    // rgb(135, 206, 235)
    console.log(getStyleByAttr(node, 'backgroundColor'))
    // 100px
    console.log(getStyleByAttr(node, 'width'))
    // 200px
    console.log(getStyleByAttr(node, 'height'))
    // table
    console.log(window.getComputedStyle(node, '::after').display)
    // Haskell
    console.log(window.getComputedStyle(node, '::after').content)
</script>
</html>

once: true

once: true 不是 API，看起來也不像。用于屬性配置，有了它，lodash的once就不用了。

"once: true" 是一種 JavaScript 中的事件監(jiān)聽器選項(xiàng)。

當(dāng)在元素上綁定事件監(jiān)聽器時(shí)，可以為其傳遞一些配置選項(xiàng)。其中之一就是 "once: true"，它表示這個(gè)事件監(jiān)聽器只會(huì)觸發(fā)一次，之后就會(huì)被自動(dòng)移除。

這種方式可以避免在后續(xù)操作中重復(fù)觸發(fā)已經(jīng)不需要的事件監(jiān)聽器。

舉個(gè)例子：

const button = document.querySelector('button');
button.addEventListener('click', handleClick, { once: true });

function handleClick(event) {
  console.log('Button was clicked.');
}

第一次點(diǎn)擊按鈕時(shí)，會(huì)在控制臺(tái)中打印 "Button was clicked."，之后再點(diǎn)擊按鈕將不會(huì)有任何反應(yīng)。

這個(gè)特性是在 DOM4 規(guī)范中引入的，并在現(xiàn)代瀏覽器中被廣泛支持。

注意：在使用這種方式時(shí)，需要注意的是，一旦事件監(jiān)聽器被移除，就不能再次觸發(fā)。如果需要多次觸發(fā)，就需要重新綁定事件監(jiān)聽器。

getModifierState()

JavaScript 中的 getModifierState() 方法可用于檢查特定的修飾鍵（如 Alt、Ctrl、CapsLock 或 Shift）是否當(dāng)前被按下。它是 Event 對(duì)象的一個(gè)方法。

示例代碼：

<input type="text" size="40" onkeydown="myFunction(event)">

<p id="demo"></p>

<script>
    function myFunction(event) {
        var x = event.getModifierState("CapsLock");
        document.getElementById("demo").innerHTML = "Caps Lock: " + x;
    }
</script>

clipboard.readText()

剪貼板，我敢肯定，是一個(gè)常用的功能。

要從剪貼板中讀取文本，請(qǐng)調(diào)用
navigator.clipboard.readText() 并等待返回的 Promise 進(jìn)行解析。

async function getClipboardContents() {
  try {
    const text = awAIt navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
}

要將文本復(fù)制到剪貼板，只需調(diào)用 writeText()

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

結(jié)束語

今天的分享就到這里，希望對(duì)你有所幫助，感謝你的閱讀，如果你喜歡我的分享，別忘了點(diǎn)贊轉(zhuǎn)發(fā)，讓更多的人看到，最后別忘記點(diǎn)個(gè)關(guān)注，你的支持將是我分享最大的動(dòng)力，后續(xù)我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。