昨天看了一篇博客，里面講到了一些非常有意思的前端技巧，今天分享給大家。

1. 檢測(cè)網(wǎng)絡(luò)速度

通過 JavaScript 的 Network Information API，你可以輕松檢測(cè)用戶的網(wǎng)絡(luò)下載速度，從而動(dòng)態(tài)調(diào)整頁面加載的資源大小。

if (navigator.connection) {
    const downlink = navigator.connection.downlink;
    console.log(`當(dāng)前下載速度: ${downlink} Mbps`);
} else {
    console.log("Network Information API 不被支持");
}

這對(duì)于在網(wǎng)絡(luò)速度較慢時(shí)減少大文件加載尤其有用。但請(qǐng)注意，這個(gè) API 并不在所有瀏覽器中支持。

2. 為移動(dòng)端應(yīng)用添加振動(dòng)反饋

如果你正在開發(fā)移動(dòng)應(yīng)用，可以使用 Vibrate API 來提供振動(dòng)反饋，從而增強(qiáng)用戶體驗(yàn)。

// 振動(dòng) 500 毫秒
if (navigator.vibrate) {
    navigator.vibrate(500);
} else {
    console.log("Vibrate API 不被支持");
}

// 創(chuàng)建振動(dòng)和暫停的模式
if (navigator.vibrate) {
    navigator.vibrate([200, 100, 200, 100, 200]);
}

這個(gè)功能在移動(dòng)設(shè)備中尤其有效，但記得檢查設(shè)備的兼容性。

3. 禁止文本粘貼

在某些場(chǎng)景下，例如密碼輸入框，你可能希望阻止用戶粘貼文本。通過下面的代碼可以簡(jiǎn)單實(shí)現(xiàn)：

<input type="text" id="text-input" />

<script>
  const input = document.getElementById('text-input');
  input.addEventListener("paste", function(e){
    e.preventDefault();
    alert("禁止粘貼內(nèi)容！");
  });
</script>

這個(gè)方法能夠提高輸入的安全性，但應(yīng)謹(jǐn)慎使用，避免對(duì)用戶體驗(yàn)造成負(fù)面影響。

4. 隱藏 DOM 元素

有時(shí)候你不需要借助 JavaScript 來隱藏元素，HTML 的 hidden 屬性就可以輕松完成這個(gè)任務(wù)：

<p hidden>這個(gè)文本是不可見的</p>

這個(gè)屬性與 display: none; 類似，會(huì)讓元素從頁面中消失。

5. 使用 inset 簡(jiǎn)化定位

CSS 中使用 top、left、right、bottom 進(jìn)行絕對(duì)定位有時(shí)顯得冗長(zhǎng)，你可以使用 inset 來簡(jiǎn)化這個(gè)過程：

/* 原始方法 */
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* 使用 inset 簡(jiǎn)化 */
div {
  position: absolute;
  inset: 0; 
}

這不僅讓 CSS 更簡(jiǎn)潔，還提高了代碼的可讀性。

6. 高級(jí) console 調(diào)試技巧

除了常見的 console.log()，你還可以利用以下更強(qiáng)大的 console 方法來調(diào)試：

• console.table()：以表格形式展示數(shù)組或?qū)ο螅?/li>

const data = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 }
];
console.table(data);

• console.group() 和 console.groupEnd()：將相關(guān)的日志進(jìn)行分組：

console.group('調(diào)試日志');
console.log('消息 1');
console.log('消息 2');
console.groupEnd();

• console.time() 和 console.timeEnd()：測(cè)量代碼執(zhí)行的時(shí)間：

console.time('代碼運(yùn)行時(shí)間');
// 模擬耗時(shí)代碼
console.timeEnd('代碼運(yùn)行時(shí)間');

7. 防止移動(dòng)端下拉刷新

當(dāng)用戶在移動(dòng)端使用你的應(yīng)用時(shí)，可能會(huì)無意中觸發(fā)下拉刷新。通過以下 CSS 屬性，你可以防止這個(gè)行為：

body {
  overscroll-behavior-y: contain;
}

這個(gè)屬性同樣適用于阻止模態(tài)框滾動(dòng)到邊界時(shí)滾動(dòng)背景頁面。

8. 讓網(wǎng)頁可編輯

如果你需要快速編輯網(wǎng)頁內(nèi)容，可以使用 contentEditable 屬性將整個(gè)網(wǎng)頁變成可編輯的狀態(tài)：

document.body.contentEditable = 'true';

注意，這個(gè)功能可能會(huì)對(duì)頁面結(jié)構(gòu)和腳本產(chǎn)生影響，建議僅用于開發(fā)或調(diào)試階段。

9. 使用 ID 生成全局變量

你可能不知道，HTML 元素的 id 會(huì)自動(dòng)生成一個(gè)全局變量，直接在 JavaScript 中調(diào)用，而無需 document.getElementById()。

<div id="myDiv">Hello</div>

<script>
    console.log(myDiv); // 自動(dòng)生成全局變量 myDiv
</script>

盡管這樣做很方便，但在實(shí)際項(xiàng)目中應(yīng)避免，仍然推薦使用 document.getElementById() 來保持代碼的清晰性。

10. 平滑滾動(dòng)效果

通過 CSS 的 scroll-behavior: smooth; 屬性，你可以輕松為網(wǎng)頁添加平滑滾動(dòng)效果，增強(qiáng)用戶體驗(yàn)：

html {
    scroll-behavior: smooth;
}

11. 使用 :empty 選擇器隱藏空元素

CSS 的 :empty 選擇器可以幫助你有效地選中并隱藏那些空的 HTML 元素：

p:empty {
  display: none;
}

這對(duì)保持頁面干凈整潔非常有用。