⚡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 秒,别再手写轮询 + 正则了!

相关推荐
吃饺子不吃馅13 小时前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学
90后的晨仔13 小时前
Mac 上配置多个 Gitee 账号的完整教程
前端·后端
PAK向日葵13 小时前
【算法导论】一道涉及到溢出处理的笔试题
算法·面试
无敌最俊朗@14 小时前
Qt 自定义控件(继承 QWidget)面试核心指南
开发语言·qt·面试
清***鞋14 小时前
转行AI产品如何准备面试
人工智能·面试·职场和发展
成成成成成成果14 小时前
软件测试面试八股文(一)
面试·职场和发展·测试用例·压力测试
少年阿闯~~14 小时前
CSS——实现盒子在页面居中
前端·css·html
开发者小天14 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
阿波罗尼亚14 小时前
复杂查询:直接查询/子查询/视图/CTE
java·前端·数据库
正义的大古14 小时前
OpenLayers地图交互 -- 章节九:拖拽框交互详解
前端·vue.js·openlayers