14个让你惊艳的JavaScript Web API!( 二 )


// Method 1document.addEventListener("visibilitychange", () => {if (document.visibilityState === "visible") {document.title = "Visible";return;}document.title = "Not Visible";});// Method 2window.addEventListener("blur", () => {document.title = "Not Visible";});window.addEventListener("focus", () => {document.title = "Visible";});两种方法的区别在于,第二种方法将在您切换到另一个应用程序或不同的标签时触发,而第一种方法只会在我们切换到另一个标签时触发 。
10、Accelerometer加速度计API允许我们访问设备的加速度数据 。这可以用来创建使用设备的动作控制或者在用户摇动设备时添加交互的游戏,可能性无限!
const acl = new Accelerometer({ frequency: 60 });acl.addEventListener("reading", () => {const vector = [acl.x, acl.y, acl.z];const magnitude = Math.sqrt(vector.reduce((s, v) => s + v * v, 0));if (magnitude > THRESHOLD) {console.log("I feel dizzy!");}});acl.start();可以使用以下方式请求加速度计权限:
navigator.permissions.query({ name: "accelerometer" }).then((result) => {if (result.state === "granted") {// now you can use accelerometer api}});11、Geo-location地理定位 API 允许我们访问用户的位置 。如果你正在构建与地图或基于位置的服务相关的任何内容,这将非常有用 。
navigator.geolocation.getCurrentPosition(({ coords }) => {console.log(coords.latitude, coords.longitude);});可以使用以下方式请求地理位置权限:
navigator.permissions.query({ name: "geolocation" }).then((result) => {if (result.state === "granted") {// now you can use geolocation api}});12、Web workerWeb Workers 使得在与Web应用程序的主执行线程分离的后台线程中运行脚本操作成为可能 。这样做的好处是可以在一个独立的线程中执行繁重的处理,使得主线程(通常是UI线程)能够在没有被阻塞/减慢的情况下运行 。
// main.jsconst worker = new Worker("worker.js");worker.onmessage = (e) => console.log(e.data);worker.postMessage([5, 3]);// worker.jsonmessage = (e) => {const [a, b] = e.data;postMessage(a + b);};13、Resize ObserverResize Observer API 允许我们轻松观察元素的大小并处理其变化 。当你拥有一个可调整大小的侧边栏时,它非常有用 。
const sidebar = document.querySelector(".sidebar");const observer = new ResizeObserver((entries) => {const sidebar = entries[0];//Do something with the element's new dimensions});observer.observe(sidebar);14、NotificationNotification API,顾名思义,允许您发送通知以打扰用户(与页面可见性 API 捆绑在一起,以更加打扰他们



推荐阅读