如何快速實現REST API集成以優化業務流程
你可能也喜歡這些API文章!
Fullscreen API 在全屏模式下顯示一個元素或整個頁面。
async?function?enterFullscreen()?{
??await?document.documentElement.requestFullscreen();
}
async?function?exitFullscreen()?{
??await?document.exitFullscreen();
}注意：要使用全屏API，需要用戶的交互。
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);
};頁面可見性 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";
});兩種方法的區別在于，第二種方法將在您切換到另一個應用程序或不同的標簽時觸發，而第一種方法只會在我們切換到另一個標簽時觸發。
加速度計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
????}?
??});
地理定位 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
????}?
??});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);
};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);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
}文章轉自微信公眾號@技術胖學程序
