摸鱼神器！前端大佬私藏的 11 个 JS 神级 API，复制粘贴就能用，效率翻倍

大家好，我是大华！今天给大家分享一些我私藏的JS神级API。每一个都很简单，复制粘贴就能用，真的能让你效率翻倍，摸鱼时间更多。嘿嘿！

1. 一键复制文本

场景：调试时，想复制接口返回的一大串JSON，点半天复制不全。以前：console.log→手动选中→复制现在：一行代码，直接复制到剪贴板。

javascript 复制代码

// 复制任意文本
function copyText(text) {
  navigator.clipboard.writeText(text);
}

// 用法
copyText("这串数据太长了，直接复制走！");

案例：封装一个按钮，点一下，接口返回的data自动复制。

html 复制代码

<button onclick="copyText(JSON.stringify(apiData))">复制数据</button>

省下30秒，够刷半条抖音了。

2. 检测用户是否在打字

场景：搜索框输入，不想每敲一个字就发请求，想等用户停手再查。 API ：input事件 + setTimeout组合。

javascript 复制代码

let typingTimer;
const input = document.getElementById('search');

input.addEventListener('input', () => {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(() => {
    console.log('用户打完了，去请求吧');
    // 调搜索接口
  }, 500); // 500毫秒内没再输入，就认为打完了
});

公司内部的用户搜索，加了这个，接口请求量直接降了80%。

3. 监听页面是否在后台

场景：用户切到其它软件，页面不可见。这时候别疯狂刷新数据。

javascript 复制代码

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('用户去摸鱼了，切后台了');
    // 可以暂停轮询、视频、动画
  } else {
    console.log('用户回来了，继续干活');
    // 恢复轮询
  }
});

后台管理系统的实时订单刷新，切后台就暂停，回来再重新拉取。省电又省服务器。

4. 获取用户在线状态

场景：用户地铁进隧道，网络断了。你得知道，不然他点了提交，没反应，以为你代码有bug。

javascript 复制代码

window.addEventListener('online', () => {
  alert('网络恢复啦，可以继续操作了！');
});

window.addEventListener('offline', () => {
  alert('大哥，没网了！先别点了！');
});

我们有个表单提交功能，断网时按钮变灰，提示请检查网络，用户体验直接拉满。

5. 检测用户是否滚动到底部

场景：做列表页，想实现上拉加载更多。

javascript 复制代码

window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
  
  if (scrollTop + clientHeight >= scrollHeight - 5) {
    console.log('用户到底了，加载下一页');
    // 调接口，加载更多数据
  }
});

公司商品列表页，50行代码搞定无限滚动，产品经理直呼专业。

6. 获取用户地理位置

场景：打卡、签到、本地服务推荐。

javascript 复制代码

function getLocation() {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude } = position.coords;
      console.log(`纬度: ${latitude}, 经度: ${longitude}`);
      // 传给后端，判断是否在公司范围内
    },
    (error) => {
      console.log('获取位置失败：', error.message);
    }
  );
}

// 调用
getLocation();

注意：浏览器会弹授权框，用户可能会点拒绝。

7. 全屏显示

场景：给老板演示系统，想全屏展示，逼格拉满。

javascript 复制代码

function openFullscreen() {
  const elem = document.documentElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
}

// 退出全屏
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

汇报PPT嵌在页面里，点一下全屏，领导："这小伙子可以啊。"

8. 检测设备是手机还是电脑

场景：手机端隐藏某些复杂功能，PC端才显示。

javascript 复制代码

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

// 用法
if (isMobile()) {
  document.getElementById('complex-feature').style.display = 'none';
}

看屏幕宽度。比解析UA字符串靠谱多了。

9. 页面加载完成后执行

场景：DOM还没加载完，JS就执行了，报错"找不到元素"。

javascript 复制代码

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM加载完了，可以操作元素了');
  // 初始化你的组件、绑定事件
});

比window.onload快：它等所有资源（图片、CSS）加载完。DOMContentLoaded只等HTML结构。

10. 本地存储，记住用户偏好

场景：用户调了字体大小、主题颜色，关了页面又打开，还是原来的设置。

javascript 复制代码

// 存
localStorage.setItem('theme', 'dark');
localStorage.setItem('fontSize', '16px');

// 取
const theme = localStorage.getItem('theme'); // 'dark'
const size = localStorage.getItem('fontSize'); // '16px'

// 页面加载时应用
document.body.className = theme;
document.body.style.fontSize = size;

公司后台系统，用户换肤后，下次登录自动记住，省得再调。

11. 结构化数据控制台打印：console.table()

场景：还在用console.log看数组数据？眼睛都快看花了吧？

javascript 复制代码

const users = [
  { name: '张三', age: 25, job: '前端' },
  { name: '李四', age: 30, job: '后端' },
  { name: '王五', age: 28, job: '设计' }
];

console.table(users);

一行代码，表格形式展示数据，清晰多了！

总结

以上就是我今天要分享的11个JS神级API，每一个都是我日常开发中经常用到的。简单、实用、能偷懒（划掉）提高效率。

我是大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！

📌往期精彩

《写给小公司前端的 UI 规范：别让页面丑得自己都看不下去》

《只会写 Mapper 就敢说会 MyBatis？面试官：原理都没懂》

《Elasticsearch 太重？来看看这个轻量级的替代品 Manticore Search》

《别再手写判空了！SpringBoot 自带的 20 个高效工具类》

《Vue3+TS设计模式：5个真实场景让你代码更优雅》