几个非常有意思的javascript API

作为一名前端爱好者, 笔者利用空余时间研究了几个国外网站的源码,发现不管是库,还是业务代码,都会用到了一些比较有意思的API,虽然平时在工作中部分接触过,但是经过这次的研究,觉得很有必要总结一下,毕竟已经2022年了,是时候更新一下技术储备了,本文主要通过实际案例来带大家快速了解以下几个知识点:

• Observer 原生观察者

• script标签事件深入 - 移除script标签后事件仍然能执行的原因

• Proxy/Reflect

• 自定义事件

• fileReader API

• Fullscreen 网页全屏

• URL API的使用

• Geolocation 地理位置API的使用

• Notifications 浏览器原生消息通知

• Battery Status 设备电量情况

我会对部分API做一些比较有意思的案例,那么开始我们的学习吧~

1. Observer API

Observer是浏览器自带的观察者,它主要提供了 Intersection ,  Mutation ,  Resize ,  Performance 这四类观察者, 这里笔者重点介绍 Intersection Observer .

1.1 Intersection Observer

IntersectionObserver 提供了一种异步观察目标元素与其祖先元素交叉状态的方法。当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域,并且无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，我们可以在同一个观察者对象中配置监听多个目标元素。

说简单点就是该api可以异步监听目标元素在根元素里的位置变动,并触发响应事件.我们可以利用它来实现更为高效的 图片懒加载 ,  无限滚动 以及 内容埋点上报 等.接下来我们通过一个例子来说明一下它的使用步骤.

// 1.定义观察者及观察回调 const intersectionObserver = new IntersectionObserver((entries, observer) => {     entries.forEach(entry => {       console.log(entry)       // ...一些操作     });    },    {     root: document.querySelector('#root'),     rootMargin: '0px',     threshold: 0.5    } ) // 2. 定义要观察的目标对象 const target = document.querySelector(“.target”); intersectionObserver.observe(target);

复制代码

以上代码就实现了一个基本的 Intersection Observer ,虽然已有代码中还体现不出什么实质性功能. 接下来介绍一下代码中使用到的参数的含义:

• callback IntersectionObserver实例的第一个参数, 当目标元素与根元素通过阈值:banana:时就会触发该回调.回调中第一个参数是被观察对象列表,一旦被观察对象发生突变就会被移入该列表, 列表中每一项都保留有观察者的位置信息;第二个参数为observer,观察者本身.如下图控制台打印:

  

  其中 rootBounds 表示根元素的位置信息,  boundingClientRect 表示目标元素的位置信息, intersectionRect 表示叉部分的位置信息,  intersectionRatio 表示目标元素的可见比例.

• 配置属性 IntersectionObserver实例的第二个参数,用来配置监听属性,具体有以下三个属性:

  • root 所监听对象的具体祖先元素(element)。如果未传入值或值为null，则默认使用顶级文档的视窗。

  • rootMargin 计算交叉时添加到根(root)边界盒bounding box的矩形偏移量， 可以有效的缩小或扩大根的判定范围从而满足计算需要

  • thresholds 一个包含阈值的列表, 按升序排列, 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会生成一个通知(Notification)。如果构造器未传入值, 则默认值为0。以上属性介绍字面上可能很难理解,笔者花几个草图来让大家有个直观的认知:

    

    当我们设置rootMargin为10px时,我们的root会增大影响范围,但目标元素移动到淡红色区域就会被监听到,当然我们还可以设置rootMargin为负值来减少影响区域.其支持的值为百分比和px,如下:

rootMargin: '10px'

rootMargin: '10%'

rootMargin:

'10px 0px 10px 10px'

复制代码

thresholds可以如下图理解:

由上图所示,当我们设置阈值为[0.25, 0.5]时, 目标元素的25%和50%进入根元素的影响范围时都会触发回调.利用这个特性我们往往可以实现位差动画,或者更根据目标元素的位置变化做不同的交互. 当然Intersection还提供了以下几个方法来控制观察对象:

• disconnect() 使IntersectionObserver对象停止监听工作

• takeRecords() 返回所有观察目标的IntersectionObserverEntry对象数组

• unobserve() 使IntersectionObserver停止监听特定目标元素

了解了使用方法和api之后,我们来看看一个实际应用--实现图片懒加载:

<img src = "loading.gif" data-src = "absolute.jpg" >

<img src = "loading.gif" data-src = "relative.jpg" >

<img src = "loading.gif" data-src =