关于前端:未来网站开发必备14个让你惊艳的JavaScript-Web-API

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

快来收费体验 ChatGpt plus 版本的，咱们出的钱 体验地址:https://chat.waixingyun.cn 能够退出网站底部技术群，一起找 bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

文章首先介绍了 JavaScript Web API 的概念，解释了它们是如何扩大网站性能并提供丰盛用户体验的。接着，文章列举了 14 个令人兴奋的 API，并详细描述了它们的特点和用法。

这些 API 包含：

Web Speech API：容许网站实现语音辨认和语音合成性能。
Web Bluetooth API：通过蓝牙技术连贯和管制外部设备。
WebVR API：为虚拟现实（VR）提供反对，使网站可能与 VR 设施进行交互。
WebUSB API：容许网站与 USB 设施进行通信和交互。
WebRTC API：提供实时音视频通信性能，反对网页间的实时数据传输。
Web Animations API：用于创立简单和晦涩的动画成果。
Web Speech Synthesis API：提供语音合成性能，让网站可能生成语音输入。

1. Screen Capture API

屏幕捕捉 API 正如其名，容许咱们捕捉屏幕内容，使构建屏幕录制器的过程变得轻而易举。咱们须要一个视频元素来显示捕捉的屏幕。开始按钮将启动屏幕捕捉。

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>

const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}

startBtn.addEventListener("click", startRecording);

2. Web Share API

Web Share API 容许咱们将文本、链接甚至文件从网页分享到设施上装置的其余应用程序。

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}

留神：要应用 Web Share API，须要用户的交互。例如，按钮点击或触摸事件。

3. Intersection Observer API

Intersection Observer API 检测元素何时进入或来到视口，这对于实现有限滚动十分有用。

4. Clipboard API

剪贴板 API 容许咱们读取和写入剪贴板中的数据。这对于实现复制到剪贴板的性能十分有用。

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

5. Screen Wake Lock API

你是否已经想过 YouTube 是如何在播放视频时避免屏幕敞开的？这是因为应用了屏幕放弃唤醒（Screen Wake Lock）API。

let wakeLock = null;

async function lockHandler() {wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {await wakeLock.release();
  wakeLock = null;
}

留神：只有在页面曾经在屏幕上可见的状况下，能力应用屏幕唤醒锁定 API。否则，会抛出谬误。

6. Screen Orientation API

Screen Orientation API 查看以后屏幕的方向，甚至将其锁定为特定的方向。

async function lockHandler() {await screen.orientation.lock("portrait");
}

function releaseHandler() {screen.orientation.unlock();
}

function getOrientation() {return screen.orientation.type;}

7. Fullscreen API

Fullscreen API 在全屏模式下显示一个元素或整个页面。

async function enterFullscreen() {await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {await document.exitFullscreen();
}

留神：要应用全屏 API，须要用户的交互。

8.Web Speech

Web Speech API 能够让你将语音数据整合到网络应用中。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);
};

1. 只管语音合成在所有次要浏览器上都有 96% 的覆盖率，但语音辨认在生产中的应用还为时尚早，只有 86% 的覆盖率。
2. API 不能在没有用户交互的状况下应用（例如：click，keypress 等）

9.Page Visibility

页面可见性 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";});

两种办法的区别在于，第二种办法将在您切换到另一个应用程序或不同的标签时触发，而第一种办法只会在咱们切换到另一个标签时触发。

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

13. Resize Observer

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

14.Notification

Notification 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}

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。