11个有用的前端技巧

1. 检测网络速度

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

if (navigator.connection) {
    const downlink = navigator.connection.downlink;
    console.log(`当前下载速度: ${downlink} Mbps`);
} else {
    console.log("Network Information 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]);
}

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

3. 禁止文本粘贴

例如密码输入框，不希望用户粘贴文本。可以通过下面的代码实现：

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

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

这个方法能够提高输入的安全性，但可能会影响用户体验。

4. 隐藏 DOM 元素

除了借助 JavaScript 来隐藏元素，HTML 的 hidden 属性也可以：

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

这个属性与 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; 
}

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

6. 高级 console 调试技巧

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

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

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

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

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

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

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

• console.clear()：清空日志：

我们已经在控制台输出了很多记录，可以使用console.clear()清空一下。

console.clear()

7. 防止移动端下拉刷新

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

body {
  overscroll-behavior-y: contain;
}

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

8. 让网页可编辑

使用 contentEditable 属性可以将整个网页变成可编辑的状态：

document.body.contentEditable = 'true';

如果只想让某个特定的元素可编辑，可以通过选中该元素然后设置其contentEditable属性为”true”：

<div id="editableElement" contentEditable="true"> 这里是可以编辑的文本内容。 </div>

这样，用户就可以在这个<div>元素中编辑文本了。

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

9. 使用 ID 生成全局变量

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

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

<script>
    console.log(myDiv); // 自动生成全局变量 myDiv
</script>

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

10. 平滑滚动效果

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

html {
    scroll-behavior: smooth;
}

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

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

p:empty {
  display: none;
}

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