几个非常有意思的Javascript知识点总结

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

Observer 原生观察者。script标签事件深入 - 移除script标签后事件仍然能执行的意思原因。Proxy/Reflect。知总结自定义事件。识点fileReader API。个非Fullscreen 网页全屏。意思URL API的知总结使用。服务器租用Geolocation 地理位置API的识点使用。Notifications 浏览器原生消息通知。个非Battery Status 设备电量情况。意思

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

一、Observer API

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

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,虽然已有代码中还体现不出什么实质性功能. 接下来介绍一下代码中使用到的参数的含义:

callbackIntersectionObserver实例的亿华云第一个参数, 当目标元素与根元素通过阈值