后端开发教程 - Java、Spring Boot 实战 - msg200.com
7 个你不知道的 JavaScript Web API，助你构建未来网站
感谢阅读
欢迎回到未来！这是关于未来 JavaScript Web API的第二篇文章，如果你还没读过第一篇，推荐你先阅读这里。
以下是 7 个更先进的 JavaScript Web API，它们可以为你的项目增添魅力，让用户掏钱购买。
1. 网络演讲
Web Speech API可让你将语音数据集成到 Web 应用中。Web Speech API包含两个部分：（
SpeechSynthesis文本转语音）和SpeechRecognition（异步语音识别）。
// Speech Synthesis
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance("Hello World");
synth.speak(utterance);
// Speech Recognition
const SpeechRecognition =
window.SpeechRecognition ?? window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.start();
recognition.onresult = (event) => {
const speechToText = event.results[0][0].transcript;
console.log(speechToText);
};
笔记
-
尽管语音合成已被所有主流浏览器支持，覆盖率达到 96%，但语音识别在生产中使用仍为时过早，覆盖率仅为 86%。
-
如果没有用户交互（例如： ，等），则无法使用API 。
clickkeypress
2. 页面可见性
页面可见性 API允许您检查页面是否对用户可见。当您想暂停视频时，此功能非常有用。
有两种方法可以执行此检查：
// Method 1
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible") {
document.title = "Visible";
return;
}
document.title = "Not Visible";
});
// Method 2
window.addEventListener("blur", () => {
document.title = "Not Visible";
});
window.addEventListener("focus", () => {
document.title = "Visible";
});
两种方法的区别在于，第二种方法会在您切换到另一个应用程序或另一个选项卡时触发，而第一种方法仅在您切换到另一个选项卡时才会触发。
3.加速度计
加速度计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
}
});
4.地理位置
地理位置 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
}
});
5. Web Worker
Web Workers可以在 Web 应用程序的主执行线程之外的后台线程中运行脚本操作。这样做的好处是，繁琐的处理可以在单独的线程中执行，从而使主线程（通常是UI 线程）能够正常运行，而不会被阻塞/拖慢速度。
// main.js
const worker = new Worker("worker.js");
worker.onmessage = (e) => console.log(e.data);
worker.postMessage([5, 3]);
// worker.js
onmessage = (e) => {
const [a, b] = e.data;
postMessage(a + b);
};
6. 调整观察者大小
Resize 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);
7.通知
啊，通知！烦人的小弹窗（或者说，多巴胺泡泡，取决于你的情绪状态）。
通知API，顾名思义，允许您发送通知来惹恼用户（将其与页面可见性 API捆绑在一起会让他们更加恼火😈）
Notification.requestPermission().then((permission) => {
if (permission === "granted") {
new Notification("Hi there!", {
body: "Notification body",
icon: "https://tapajyoti-bose.vercel.app/img/logo.png",
});
}
});
附注
上面提到的一些API仍处于实验阶段，并非所有浏览器都支持。因此，如果要在生产环境中使用它们，请检查浏览器是否支持它们。
例如：
if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
// Speech Recognition is supported
}
就这些啦，朋友们！🎉
感谢阅读
需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我
想联系我吗？请在LinkedIn上联系我
关注我的博客，每两周在Medium上获取最新资讯
常问问题
这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。
-
我是初学者，该如何学习前端 Web 开发？
可以参考以下文章： -
你能指导我吗？
抱歉，我工作已经很忙了，没时间指导任何人。