在日常开发工作中，我们经常遇到一些重复性的需求。如果能巧妙利用浏览器原生提供的 JavaScript 功能，就能省去大量编写重复代码的时间。下面介绍一些非常实用的 JS api 和技巧，你可以直接用到自己的项目中。

快速复制文本内容

在调试的时候，有时需要复制接口返回的 JSON 数据，手动选择既麻烦又容易出错。使用 Clipboard API 可以很方便地实现一键复制：

function copyText(text) {
  navigator.clipboard.writeText(text);
}
// 示例：点击按钮复制数据
// <button onclick="copyText(JSON.stringify(data))">复制</button>

延迟搜索请求

在搜索框输入内容时，通常不需要每输入一个字就请求一次接口。我们可以设置一个延迟，等用户停止输入再执行搜索：

let timer;
const searchInput = document.getElementById('search');

searchInput.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    // 在这里执行搜索请求
  }, 500);
});

判断页面是否被隐藏

如果用户切换到了其他标签页或最小化浏览器，我们可以暂停一些不必要的操作，比如数据刷新或动画播放：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 暂停任务
  } else {
    // 恢复任务
  }
});

检测网络状态变化

在网络不稳定的情况下，提示用户当前状态可以避免很多误解：

window.addEventListener('online', () => {
  console.log('网络已恢复');
});

window.addEventListener('offline', () => {
  console.log('网络已断开');
});

判断页面滚动到底部

实现无限滚动加载更多内容时，这个功能非常有用：

window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    // 加载更多内容
  }
});

获取用户地理位置

在需要定位功能的场景下，比如地图应用或者位置服务，可以使用：

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(position.coords.latitude, position.coords.longitude);
  },
  (error) => {
    console.log('获取位置失败', error);
  }
);

全屏显示网页内容

在做演示或者展示型页面时，全屏功能能提升用户体验：

// 进入全屏
document.documentElement.requestFullscreen();

// 退出全屏
document.exitFullscreen();

判断设备类型

根据屏幕宽度简单区分手机和电脑设备：

function isMobile() {
  return window.innerWidth <= 768;
}

在页面加载完成后执行代码

确保代码在 dom 准备就绪后才执行：

document.addEventListener('DOMContentLoaded', () => {
  // 初始化操作
});

本地存储数据

使用 localStorage 可以保存用户的设置或偏好：

// 保存数据
localStorage.setItem('key', 'value');

// 读取数据
const value = localStorage.getItem('key');

以表格形式输出数据

在控制台调试时，使用 console.table 可以让数据更易读：

const data = [
  { name: '张三', age: 25 },
  { name: '李四', age: 30 }
];
console.table(data);

这些技巧都是我们在实际开发中经常用到的，它们不仅能提高工作效率，还能让代码更加简洁可靠。建议你收藏这篇文章，在需要的时候随时参考。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12912