浏览器的高级API
- 前言
- 一、URLSearchParams和URL类
- 二、window.requestAnimationFrame()
- 三、IntersectionObserver
- 四、document.createRange()
- 五、navigator.sendBeacon
前言
window下的高级API:
1、URLSearchParams和URL类
2、requestAnimationFrame()
3、IntersectionObserver
4、ocument.createRange()
5、navigator.sendBeacon()
一、URLSearchParams和URL类
1、URL将一个string的url变成一个url对象
const myURL = new URL("https://example.org/?abc=123");
// searchParams.get() 获取
myURL.searchParams.get(‘abc’); // 123
// 追加
myURL.searchParams.append('mun', '123');
// https://example.org?abc=123&mun=123
// 删除
myURL.searchParams.delete("mun");
// 添加
myURL.searchParams.set("a", "1");
// https://example.org?a=1
2、URLSearchParams将string类型的search转化对象,会忽略?号
let params = new URLSearchParams('user=123&pas=456');
params.get('user'); // 123
// 打印所有的提交数据 可以将 ？省略
params.toString(); // user=123&pas=456
二、window.requestAnimationFrame()
1、使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。
2、而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
const timer = window.requestAnimationFrame(function fn() {
if (length.value < 95) {
length.value += 1;
window.requestAnimationFrame(fn)
} else {
window.cancelAnimationFrame(timer);
};
});
三、IntersectionObserver
1、可见性监听,可以用做滚动跟随等效果
var observer = new IntersectionObserver(changes => {
for (const change of changes) {
console.log(change.time);
// Timestamp when the change occurred
// 当可视状态变化时，状态发送改变的时间戳
// 对比时间为，实例化的时间，
// 比如，值为1000时，表示在IntersectionObserver实例化的1秒钟之后，触发该元素的可视性变化
console.log(change.rootBounds);
// Unclipped area of root
// 根元素的矩形区域信息，即为getBoundingClientRect方法返回的值
console.log(change.boundingClientRect);
// target.boundingClientRect()
// 目标元素的矩形区域的信息
console.log(change.intersectionRect);
// boundingClientRect, clipped by its containing block ancestors,
// and intersected with rootBounds
// 目标元素与视口（或根元素）的交叉区域的信息
console.log(change.intersectionRatio);
// Ratio of intersectionRect area to boundingClientRect area
// 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，
// 完全可见时为1，完全不可见时小于等于0
console.log(change.target);
// the Element target
// 被观察的目标元素，是一个 DOM 节点对象
// 当前可视区域正在变化的元素
}
}, {});
// Watch for intersection events on a specific target Element.
// 对元素target添加监听，当target元素变化时，就会触发上述的回调
observer.observe(target);
// Stop watching for intersection events on a specific target Element.
// 移除一个监听，移除之后，target元素的可视区域变化，将不再触发前面的回调函数
observer.unobserve(target);
// Stop observing threshold events on all target elements.
// 停止所有的监听
observer.disconnect();
四、document.createRange()
范围选择节点操作
// 选择节点
var range1 = document.createRange(),
range2 = document.createRange(),
p1 = document.getElementById("p1");
range1.selectNode(p1);
range2.selectNodeContents(p1);
// 选择范围
range = document.createRange();
p1 = document.getElementById("p1").childNodes[0];
range.setStart(p1,2);
range.setEnd(p1,8);
// deleteContents() 这个方法能够从文档中删除范围缩包含的内容
// extractContents() 会删除并返回文档片段
//CloneContents() 创建范围对象的一个副本，不会影响原来的节点
//insertNode() 向范围选区的开始处插入一个节点
//surroundContents() 环绕范围插入内容
五、navigator.sendBeacon
1、该方法只能post请求
2、该方法和ajax最大的区别在于即使浏览器窗口关闭也可以完成请求发送,常常用于打点请求
const params =Object.assign(this.data, data, { time: new Date().getTime() })
let headers = {
type: 'application/x-www-form-urlencoded'
};
let blob = new Blob([JSON.stringify(params)], headers);
navigator.sendBeacon(this.data.requestUrl, blob);
