【随手记】浏览器的高级API

---

前言

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);

---