⚡90%前端没摸过的 10 个 JS 神 API?复制即用,今晚早下班

每个 API 都附 浏览器支持率 + 30 秒上手代码 + 真实业务场景,复制即用,今晚下班早!


1 Page Visibility API ------ 页面"隐身"探测

支持率: 97%(Chrome 13+、Edge 12+)
场景: 用户切标签页时暂停视频、停止轮询

js 复制代码
document.addEventListener('visibilitychange', () => {
  document.visibilityState === 'hidden'
    ? video.pause()
    : video.play();
});

2 Web Share API ------ 一键唤起系统分享

支持率: 92%(需 HTTPS)
场景: 把当前文章内容分享到微信、微博

js 复制代码
if (navigator.share) {
  navigator.share({
    title: '我的新文章',
    text: '快来看看',
    url: location.href,
  });
}

3 Broadcast Channel ------ 跨标签页通信

支持率: 94%(Chrome 54+)
场景: A 标签页登录,B 标签页自动刷新

js 复制代码
const bc = new BroadcastChannel('login');
bc.postMessage({ token: 'abc123' });
bc.onmessage = (e) => console.log(e.data);

4 Intl.NumberFormat ------ 一键千分位

支持率: 100%
场景: 价格、股票、报表格式化

js 复制代码
new Intl.NumberFormat('zh-CN').format(1234567); // 1,234,567

5 IntersectionObserver ------ 懒加载 + 曝光埋点

支持率: 97%(Chrome 51+)
场景: 图片懒加载、广告曝光统计

js 复制代码
const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => e.isIntersecting && loadImg(e.target));
});
io.observe(img);

6 ResizeObserver ------ 元素级尺寸监听

支持率: 94%(Chrome 64+)
场景: 响应式图表、虚拟滚动

js 复制代码
const ro = new ResizeObserver((entries) => {
  entries.forEach((e) => console.log('尺寸变化', e.contentRect));
});
ro.observe(chartContainer);

7 Clipboard API ------ 无依赖复制

支持率: 95%(需 HTTPS)
场景: 一键复制邀请码、优惠券码

js 复制代码
await navigator.clipboard.writeText('COUPON2025');

8 URLSearchParams ------ 再也不用正则解析 query

支持率: 100%
场景: 路由、埋点、搜索参数

js 复制代码
const params = new URLSearchParams(location.search);
params.get('id'); // ?id=123

9 AbortController ------ 可取消的 fetch

支持率: 100%
场景: 取消过期请求、防抖动

js 复制代码
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // 立即中断

10 requestIdleCallback ------ 主线程垃圾时间调度器

支持率: 95%(Chrome 47+、Edge 79+)
场景: 埋点、预加载、长计算零阻塞

js 复制代码
requestIdleCallback(() => {
  // 在主线程空闲时执行
});

一键速查表(面试背)

API 一句话记忆
Page Visibility 页面隐藏时暂停
Web Share 一键系统分享
Broadcast Channel 跨标签页通信
Intl.NumberFormat 千分位/货币格式化
IntersectionObserver 懒加载+曝光
ResizeObserver 元素尺寸监听
Clipboard 无依赖复制
URLSearchParams 解析 query 神器
AbortController 可取消 fetch
requestIdleCallback 垃圾时间任务

把这张表贴在工位,下次写功能先翻 3 秒,别再手写轮询 + 正则了!

相关推荐
qczg_wxg3 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz4 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码4 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v4 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山5 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin5 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip5 小时前
结合Worker通知应用更新
前端·javascript
叶玳言6 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳6 小时前
HTML 基本结构
前端
Gazer_S6 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js