JavaScript！十个强到离谱的API，90%的人都不知道

原创 于 2025-10-28 14:06:26 发布 · 888 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

在Web开发中，JavaScript 已成为构建动态、交互式应用的核心工具。随着浏览器能力不断扩展，开发者已不再局限于基础DOM操作，而是能通过丰富的原生API实现复杂功能。从实时通信的Web Sockets到离线存储的IndexedDB等等，这些API覆盖了网络请求、性能优化等关键场景。

环境：SpringBoot3.4.2

1. 简介

在Web开发中，JavaScript 已成为构建动态、交互式应用的核心工具。随着浏览器能力不断扩展，开发者已不再局限于基础DOM操作，而是能通过丰富的原生API实现复杂功能。从实时通信的Web Sockets到离线存储的IndexedDB等等，这些API覆盖了网络请求、性能优化等关键场景。

本篇文章精选了10个神级API，涵盖页面生命周期管理、跨标签通信、数据可视化优化等前沿需求，将帮助开发者突破传统开发边界，以更简洁的代码实现更强大的功能。

2.实战案例

2.1 页面可见性

当用户切换标签页时，自动暂停视频播放或停止后台轮询任务，以节省资源。

HTML页面
<div class="api-section">
  <h2>1. Page Visibility API</h2>
  <p>当页面隐藏时自动暂停视频播放</p>
  <div class="video-container">
    <video id="myVideo" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      您的浏览器不支持HTML5视频
    </video>
  </div>
  <div class="info">状态: <span id="visibilityStatus">页面可见</span></div>
</div>
JavaScript实现
const video = document.querySelector('#myVideo')
const visibilityStatus = document.querySelector('#visibilityStatus')
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    video.pause();
    visibilityStatus.textContent = '页面隐藏 - 视频已暂停'
  } else {
    video.play();
    visibilityStatus.textContent = '页面可见 - 视频已播放'
  }
});
最终效果

图片

当我们将页面最小化后或者切换标签页时，这里的播放会自动暂停，切换回来时会自动的播放。

2.2 Web共享API

调用系统原生分享对话框，允许用户一键分享当前页面内容至社交平台或邮件，无需依赖第三方库，简化移动端分享流程。

HTML页面
<div class="api-section">
  <h2>2. Web Share API</h2>
  <p>调用系统原生分享对话框</p>
  <button id="shareBtn" class="btn">分享本页面</button>
  <div id="shareOutput" class="output"></div>
</div>
JavaScript实现
document.getElementById('shareBtn').addEventListener('click', async () => {
  const output = document.querySelector('#shareOutput');
  if (navigator.share) {
    try {
      await navigator.share({
        title: '现代浏览器API演示',
        text: '查看这些强大的浏览器API示例',
        url: window.location.href,
      });
      output.textContent = '分享成功!';
    } catch (err) {
      output.textContent = '分享取消或出错: ' + err.message;
    }
  } else {
    output.textContent = '您的浏览器不支持Web Share API';
  }
});
最终效果

图片

图片

2.3 跨标签页通信

实现跨标签页实时通信，通过统一频道发送和接收消息，适用于多标签页协同操作（如购物车同步），无需轮询或复杂后端支持。

HTML页面
<!-- 发送消息页面index.html -->
<div class="api-section">
  <h2>3. Broadcast Channel API</h2>
  <p>跨标签页通信 (打开多个标签页测试)</p>
  <button id="sendBroadcastBtn" class="btn">发送广播消息</button>
  <div id="broadcastOutput" class="output">等待接收消息...</div>
</div>
<!--接收消息页面-->
<div class="message"></div>

JavaScript实现

// 发送消息页面index.html
const broadcastChannel = new BroadcastChannel('demo_channel');
const broadcastOutput = document.querySelector('#broadcastOutput');


document.querySelector('#sendBroadcastBtn').addEventListener('click', () => {
  const message = `选择了《Spring Boot 3实战案例200讲》电子书`;
  broadcastChannel.postMessage(message);
  broadcastOutput.textContent = `已发送: ${message}`;
});
// 接收消息页面message.html
const broadcastChannel = new BroadcastChannel('demo_channel');
const message = document.querySelector('.message');


broadcastChannel.onmessage = (e) => {
  message.textContent = `已接收: ${e.data}`;
};
最终效果

图片

图片

2.4 数字格式化

国际化数字格式化工具，支持货币、百分比等格式本地化显示（如千位分隔符、货币符号），确保数字在不同语言环境下正确呈现。

HTML页面
<div class="api-section">
  <h2>4. Intl.NumberFormat</h2>
  <p>数字和货币格式化</p>
  <button id="formatNumberBtn" class="btn">格式化数字</button>
  <button id="formatCurrencyBtn" class="btn">格式化货币</button>
  <div id="numberFormatOutput" class="output"></div>
</div>
JavaScript实现
document.querySelector('#formatNumberBtn').addEventListener('click', () => {
  const number = 1234567.89
  const formatted = new Intl.NumberFormat('en-US').format(number)
  document.querySelector('#numberFormatOutput').textContent = `格式化结果: ${formatted}`
});
document.querySelector('#formatCurrencyBtn').addEventListener('click', () => {
  const number = 1234567.89;
  const formatted = new Intl.NumberFormat('zh-CN', { 
    style: 'currency', 
    currency: 'CNY' 
  }).format(number)
  document.querySelector('#numberFormatOutput').textContent = `货币格式化结果: ${formatted}`
});
最终效果

图片

图片

2.5 监听元素与可视窗口

高效监听元素与视口的交叉状态，实现图片懒加载或广告曝光统计，替代传统滚动事件监听，减少性能损耗并优化页面加载速度。

HTML页面
<div class="api-section">
  <h2>5. IntersectionObserver</h2>
  <p>图片懒加载 (向下滚动查看效果)</p>
  <div style="height: 100px;"></div>
  <img data-src="https://picsum.photos/600/400?random=1" alt="Lazy Image 1">
  <img data-src="https://picsum.photos/600/400?random=2" alt="Lazy Image 2">
  <img data-src="https://picsum.photos/600/400?random=3" alt="Lazy Image 3">
  <div style="height: 100px;"></div>
  <div id="lazyLoadOutput" class="output">等待图片进入视口...</div>
</div>
JavaScript实现
const lazyLoadObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target
      img.src = img.dataset.src
      lazyLoadObserver.unobserve(img)
      document.querySelector('#lazyLoadOutput').textContent += `\n已加载图片: ${img.alt}`
    }
  })
})
document.querySelectorAll('img[data-src]').forEach(img => {
  lazyLoadObserver.observe(img)
})
最终效果

图片

2.6 观察元素大小变化

实时追踪元素尺寸变化（如拖动调整大小），精准响应布局调整，适用于动态画布、响应式组件开发，避免手动计算和重绘。

HTML实现
<div class="api-section">
  <h2>6. ResizeObserver</h2>
  <p>监听元素尺寸变化 (拖动右下角调整大小)</p>
  <div id="box">调整我的大小</div>
  <div id="resizeOutput" class="output">尺寸: 等待调整...</div>
</div>
JavaScript实现
const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect
    document.querySelector('#resizeOutput').textContent = 
      `尺寸: ${width.toFixed(0)}px × ${height.toFixed(0)}px`
  }
})
resizeObserver.observe(document.querySelector('#box'))
最终效果

图片

2.7 异步剪贴板操作

异步读写剪贴板内容，支持无权限提示的文本复制（如优惠券代码），替代传统document.execCommand，提供更安全可靠的剪贴板操作。

HTML页面
<div class="api-section">
  <h2>7. Clipboard API</h2>
  <p>复制文本到剪贴板</p>
  <div class="coupon-container">
    <input type="text" id="coupon" value="COUPON2025" readonly>
    <button id="copyBtn" class="btn">复制</button>
  </div>
  <div id="clipboardOutput" class="output"></div>
</div>
JavaScript实现
document.getElementById('copyBtn').addEventListener('click', async () => {
  const output = document.querySelector('#clipboardOutput')
  try {
    await navigator.clipboard.writeText(document.getElementById('coupon').value)
    output.textContent = '已复制到剪贴板!'
  } catch (err) {
    output.textContent = '复制失败: ' + err.message
  }
})
最终效果

图片

2.8 URL查询字符串解析

简化URL查询参数解析与构建，支持动态增删改查参数（如分页、筛选条件），无需手动拼接字符串，提升前端路由和API调用效率。

HTML页面
<div class="api-section">
  <h2>8. URLSearchParams</h2>
  <p>解析和构建URL查询字符串</p>
  <button id="parseUrlBtn" class="btn">解析当前URL参数</button>
  <button id="buildUrlBtn" class="btn">构建新URL</button>
  <div id="urlOutput" class="output"></div>
</div>
JavaScript实现
document.querySelector('#parseUrlBtn').addEventListener('click', () => {
  const params = new URLSearchParams(window.location.search)
  const output = document.querySelector('#urlOutput')


  if (params.toString() === '') {
    output.textContent = '当前URL没有查询参数'
  } else {
    let result = '解析结果:\n'
    params.forEach((value, key) => {
      result += `${key}: ${value}\n`
    });
    output.textContent = result
  }
});
document.querySelector('#buildUrlBtn').addEventListener('click', () => {
  const params = new URLSearchParams()
  params.append('page', '2')
  params.append('sort', 'desc')
  params.append('q', '浏览器API')
  const url = `${window.location.origin}${window.location.pathname}?${params.toString()}`
  document.querySelector('#urlOutput').textContent = `构建的URL: ${url}`
});
最终效果

图片

图片

2.9 终止异步操作

中止异步操作（如fetch请求），通过信号对象统一管理取消逻辑，避免资源浪费，适用于搜索建议、实时数据流等可中断场景。

HTML页面
<div class="api-section">
  <h2>9. AbortController</h2>
  <p>中止fetch请求</p>
  <button id="fetchBtn" class="btn">发起请求</button>
  <button id="abortBtn" class="btn btn-secondary">中止请求</button>
  <div id="fetchOutput" class="output"></div>
</div>
JavaScript实现
let fetchController;
document.querySelector('#fetchBtn').addEventListener('click', async () => {
  const output = document.querySelector('#fetchOutput')
  fetchController = new AbortController()


  try {
    output.textContent = '请求中...'
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1', {
      signal: fetchController.signal
    })
    const data = await response.json()
    output.textContent = `请求成功: ${JSON.stringify(data).substring(0, 100)}...`
  } catch (err) {
    if (err.name === 'AbortError') {
      output.textContent = '请求已被中止'
    } else {
      output.textContent = '请求出错: ' + err.message
    }
  }
});


document.querySelector('#abortBtn').addEventListener('click', () => {
  if (fetchController) {
    fetchController.abort()
  }
});

最终效果

图片

图片

2.10 空闲时间执行任务

利用浏览器空闲期执行低优先级任务（如日志上报、预加载），避免阻塞主线程，优化页面响应速度，提升用户交互流畅度。

HTML页面
<div class="api-section">
  <h2>10. requestIdleCallback</h2>
  <p>在浏览器空闲时执行任务</p>
  <button id="idleTaskBtn" class="btn">安排空闲任务</button>
  <div id="idleOutput" class="output"></div>
</div>
JavaScript实现
const tasks = ['任务1', '任务2', '任务3', '任务4', '任务5']


document.querySelector('#idleTaskBtn').addEventListener('click', () => {
  const output = document.getElementById('idleOutput')
  output.textContent = '已安排空闲任务...'


  function executeTasks(deadline) {
    while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
      const task = tasks.pop()
      output.textContent += `\n执行: ${task}`
      // 模拟任务耗时
      const start = performance.now()
      while (performance.now() - start < 50) {}
    }
    if (tasks.length > 0) {
      requestIdleCallback(executeTasks, { timeout: 1000 })
    } else {
      output.textContent += '\n所有任务完成!'
    }
  }
  requestIdleCallback(executeTasks, { timeout: 1000 })
})
最终效果

图片

AI大模型学习福利

作为一名热心肠的互联网老兵，我决定把宝贵的AI知识分享给大家。 至于能学习到多少就看你的学习毅力和能力了 。我已将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

一、全套AGI大模型学习路线

AI大模型时代的学习之旅：从基础到前沿，掌握人工智能的核心技能！

因篇幅有限，仅展示部分资料，需要点击文章最下方名片即可前往获取

二、640套AI大模型报告合集

这套包含640份报告的合集，涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。无论您是科研人员、工程师，还是对AI大模型感兴趣的爱好者，这套报告合集都将为您提供宝贵的信息和启示。

因篇幅有限，仅展示部分资料，需要点击文章最下方名片即可前往获

三、AI大模型经典PDF籍

随着人工智能技术的飞速发展，AI大模型已经成为了当今科技领域的一大热点。这些大型预训练模型，如GPT-3、BERT、XLNet等，以其强大的语言理解和生成能力，正在改变我们对人工智能的认识。 那以下这些PDF籍就是非常不错的学习资源。


因篇幅有限，仅展示部分资料，需要点击文章最下方名片即可前往获

四、AI大模型商业化落地方案

因篇幅有限，仅展示部分资料，需要点击文章最下方名片即可前往获

作为普通人，入局大模型时代需要持续学习和实践，不断提高自己的技能和认知水平，同时也需要有责任感和伦理意识，为人工智能的健康发展贡献力量

jike007gt
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值