这 11 个前端技巧，一定有你不知道的！-51CTO.COM

Hello，大家好，我是 Sunday。

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

1. 检测网络速度 📡

通过 JavaScript 的 Network Information API，你可以轻松检测用户的网络下载速度，从而动态调整页面加载的资源大小。

if (navigator.connection) {
    const downlink = navigator.connection.downlink;
    console.log(`当前下载速度: ${downlink} Mbps`);
} else {
    console.log("Network Information API 不被支持");
}1.
2.
3.
4.
5.
6.

这对于在网络速度较慢时减少大文件加载尤其有用。但请注意，这个 API 并不在所有浏览器中支持。

2. 为移动端应用添加振动反馈 📳

如果你正在开发移动应用，可以使用 Vibrate API 来提供振动反馈，从而增强用户体验。

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

// 创建振动和暂停的模式
if (navigator.vibrate) {
    navigator.vibrate([200, 100, 200, 100, 200]);
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

这个功能在移动设备中尤其有效，但记得检查设备的兼容性。

3. 禁止文本粘贴 🔒

在某些场景下，例如密码输入框，你可能希望阻止用户粘贴文本。通过下面的代码可以简单实现：

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

<script>
  const input = document.getElementById('text-input');
  input.addEventListener("paste", function(e){
    e.preventDefault();
    alert("禁止粘贴内容！");
  });
</script>1.
2.
3.
4.
5.
6.
7.
8.
9.

这个方法能够提高输入的安全性，但应谨慎使用，避免对用户体验造成负面影响。

4. 隐藏 DOM 元素 🙈

有时候你不需要借助 JavaScript 来隐藏元素，HTML 的 hidden 属性就可以轻松完成这个任务：

<p hidden>这个文本是不可见的</p>1.

这个属性与 display: none; 类似，会让元素从页面中消失。

5. 使用 `inset` 简化定位 📍

CSS 中使用 top、left、right、bottom 进行绝对定位有时显得冗长，你可以使用 inset 来简化这个过程：

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

/* 使用 inset 简化 */
div {
  position: absolute;
  inset: 0; 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

这不仅让 CSS 更简洁，还提高了代码的可读性。

6. 高级 console 调试技巧 🛠️

除了常见的 console.log()，你还可以利用以下更强大的 console 方法来调试：

console.table()：以表格形式展示数组或对象：

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

console.group() 和 console.groupEnd()：将相关的日志进行分组：

console.group('调试日志');
console.log('消息 1');
console.log('消息 2');
console.groupEnd();1.
2.
3.
4.

console.time() 和 console.timeEnd()：测量代码执行的时间：

console.time('代码运行时间');
// 模拟耗时代码
console.timeEnd('代码运行时间');1.
2.
3.

7. 防止移动端下拉刷新 🚫

当用户在移动端使用你的应用时，可能会无意中触发下拉刷新。通过以下 CSS 属性，你可以防止这个行为：

body {
  overscroll-behavior-y: contain;
}1.
2.
3.

这个属性同样适用于阻止模态框滚动到边界时滚动背景页面。

8. 让网页可编辑 ✍️

如果你需要快速编辑网页内容，可以使用 contentEditable 属性将整个网页变成可编辑的状态：

document.body.contentEditable = 'true';1.

注意，这个功能可能会对页面结构和脚本产生影响，建议仅用于开发或调试阶段。

9. 使用 ID 生成全局变量 ⚠️

你可能不知道，HTML 元素的 id 会自动生成一个全局变量，直接在 JavaScript 中调用，而无需 document.getElementById()。

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

<script>
    console.log(myDiv); // 自动生成全局变量 myDiv
</script>1.
2.
3.
4.
5.

尽管这样做很方便，但在实际项目中应避免，仍然推荐使用 document.getElementById() 来保持代码的清晰性。

10. 平滑滚动效果 🚀

通过 CSS 的 scroll-behavior: smooth; 属性，你可以轻松为网页添加平滑滚动效果，增强用户体验：

html {
    scroll-behavior: smooth;
}1.
2.
3.

11. 使用 :empty 选择器隐藏空元素 🧹

CSS 的 :empty 选择器可以帮助你有效地选中并隐藏那些空的 HTML 元素：

p:empty {
  display: none;
}1.
2.
3.

这对保持页面干净整洁非常有用。

这 11 个前端技巧，一定有你不知道的！