哈喽大家好，我是Lotzinfly，一位前端小猎人。欢迎大家来到前端丛林，在这里你将会遇到各种各样的前端猎物。我希望可以把这些前端猎物统统拿下嚼碎了服用，并成为自己身上的骨肉。怎么说呢，当我们学习前端的时候，JavaScript是最关键的事。老实说，学会JavaScript将大大提高我们的开发效率。所以一定要掌握好JavaScript。

这篇文章让我们手写10个JavaScript浏览器API。并逐行分析，每一次浏览器的更新都仿佛为我们打开了新世界的大门。今天就

一、页面可见状态监听：智能暂停。流畅体验

从痛点来看，切换标签页时后台视频仍在播放，浪费流量且影响使用者体验。

你是否遇到过在切换浏览器标签时后台的视频仍在默默播放，既浪费流量又影响体验？现在有了visibilitychange事件，这一切都将成为过去式！

document.addEventListener => {
document.visibilityState === 'hidden'?老实说，video.pause : video.play;})，

只需几行代码。就能实现使用者切换标签时自动暂停视频播放，回来时继续播放，流畅体验，尽在掌握！老实说，

二、程序原生分享：一键触达。社交无忧

痛点的观点是，复制链接、打开APP、粘贴链接流程繁琐，让分享变得低效。

移动端分享文章到微信、微博等社交网站，再也不用复制链接、打开APP、粘贴链接那么麻烦了！navigator.shareAPI让你一键分享，轻松触达！

if {
navigator.share({
从title来看。'我的新文章',text: '快来看看',url: location.href,});}

记得哦。这个功能需要在HTTPS环境下使用，安全又便捷！

三、同源标签页通信：登录状态。 全局同步

再看痛点，同源多个标签页间认证状态不同步导致使用者多次登录。

在一个标签页登录后其他同源标签页自动更新认证状态，这不再是梦！BroadcastChannelAPI让你的标签页间通信变得如此简单。

const bc = new BroadcastChannel;bc.postMessage;bc.onmessage = => console.log;不过，

无论是电商网站的购物车同步。还是管理后台的权限更新，都能轻松应对！

四、智能数字格式化：金融数据。一目了然

说到痛点，金融场景中数字过长或缺乏分隔符导致数据难以阅读。话说回来，

金融场景中的价格展示、股票数据呈现。再也不用担心数字太长难以阅读了！Intl.NumberFormatAPI帮你轻松搞定。

new Intl.NumberFormat.format;其实，// 输出：1,234,567

五、元素视口交叉检测：懒加载。高效渲染

痛点这方面，图片懒加载或广告曝光统计实现复杂，占用资源。

"IntersectionObserver" API让你比较容易做到懒加载与曝光统计，只需几行代码就可以完成。

const io = new IntersectionObserver => {
entries.forEach => e.isIntersecting && loadImg);})，话说回来，io.observe;// img 为待懒加载图片节点

六、监听元素尺寸变化：响应式。随心所欲

说到痛点，响应式图表或虚拟滚动列表需要手动监听窗口/容器尺寸变化。

const ro = new ResizeObserver => {
entries.forEach => console.log);})，ro.observe;// chartContainer 为需要监听大小的容器

七、现代化剪贴板操作：一键复制，轻松分享