前言
在日常開發中總是和各種
API打交道，我們名為前端工程師實為API呼叫工程師。這篇文章我就分享 8 個有趣的API，你若通過閱讀這篇文章對前端增加一點點的樂趣，對我來說也是一種鼓勵。
這幾個 API 使用得當的話，可以提高你應用的友好性。
這些 API 的示例程式碼我已放在 github 上，感興趣的可以 clone 程式碼到本地執行。望給個 star 支援一下。
API 也可以如此有趣
先看效果圖：
1. 監聽螢幕旋轉變化介面: orientationchange
定義：
這個 API 可以將你手機是否橫屏的情況暴露給需要知道的人知道。
使用：
screenOrientation: function(){
let self = this;
let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
self.angle = orientation.angle;
});
},
複製程式碼| orientation.angle 值 | 螢幕方向 |
|---|---|
| 0 | 豎屏 |
| 90 | 向左橫屏 |
| -90/270 | 向右橫屏 |
| 180 | 倒屏 |
通過這個
API我們在橫屏和豎屏的時候可以新增一些動作或者是樣式的改變。
如果只是樣式的改變也可以通過媒體查詢來監聽：
/* 豎屏 */
@media screen and (orientation: portrait) {
// some css code
}
/* 橫屏 */
@media screen and (orientation: landscape) {
// some css code
}
複製程式碼2. 電池狀態：navigator.getBattery()
定義：
這個 API 可以將你手機電池狀態的情況暴露給需要知道的人知道。
這個
api返回的是一個promise物件，會給出一個BatteryManager物件，物件中包含了以下資訊：
| key | 描述 | 備註 |
|---|---|---|
| charging | 是否在充電 | 可讀屬性 |
| chargingTime | 若在充電，還需充電時間 | 可讀屬性 |
| dischargingTime | 剩餘電量 | 可讀屬性 |
| level | 剩餘電量百分數 | 可讀屬性 |
| onchargingchange | 監聽充電狀態的改變 | 可監聽事件 |
| onchargingtimechange | 監聽充電時間的改變 | 可監聽事件 |
| ondischargingtimechange | 監聽電池可用時間的改變 | 可監聽事件 |
| onlevelchange | 監聽剩餘電量百分數的改變 | 可監聽事件 |
使用：
getBatteryInfo: function(){
let self = this;
if(navigator.getBattery){
navigator.getBattery().then(function(battery) {
// 判斷是否在充電
self.batteryInfo = battery.charging ? `在充電 : 剩餘 ${battery.level * 100}%` : `沒充電 : 剩餘 ${battery.level * 100}%`;
// 電池充電狀態改變事件
battery.addEventListener('chargingchange', function(){
self.batteryInfo = battery.charging ? `在充電 : 剩餘 ${battery.level * 100}%` : `沒充電 : 剩餘 ${battery.level * 100}%`;
});
});
}else{
self.batteryInfo = '不支援電池狀態介面';
}
},
複製程式碼3. 讓你的手機震動: window.navigator.vibrate(200)
定義：
這個 API 可以讓你的手機按你的想法震動。
使用：
震動效果會在很多遊戲使用。比如歡樂鬥地主中，地主打完王炸後手機都會有震動的效果，以此來表達地主嘚瑟的心情也很是合理。
示例程式碼如下：
vibrateFun: function(){
let self = this;
if( navigator.vibrate ){
navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
}else{
self.vibrateInfo = "您的裝置不支援震動";
}
<!--
// 清除震動
navigator.vibrate(0);
// 持續震動
setInterval(function() {
navigator.vibrate(200);
}, 500);
-->
},
複製程式碼4. 當前語言：navigator.language
定義：
這個 API 可以告訴你當前應該使用什麼語言。
如果你需要和我一樣做多語言適配，這個 API 或許可以給你提供一個不錯的思路。
使用：
function getThisLang(){
const langList = ['cn','hk','tw','en','fr'];
const langListLen = langList.length;
const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();
for( let i = 0; i < langListLen; i++ ){
let lang = langList[i];
if(thisLang.includes(lang)){
return lang
}else {
return 'en'
}
}
}
複製程式碼不同的語言就對應不同的語言文案就好。
5. 聯網狀態：navigator.onLine
定義：
這個 API 可以告訴讓你知道你的裝置的網路狀態是否連線著。
使用：
比如我上午登陸了掘金在看一篇文章，可是沒看完就到了吃飯的點，這麼熱愛學習的我肯定是選擇吃完午飯回來繼續看。
30 分鐘過後……
吃晚飯回到公司，開啟電腦繼續把那篇文章看完，看完了打算點了贊，發現給了這個提示：
這個提示讓我有點懵（就是沒網路了）。
這個時候我們就可以使用這個 API，這樣就可以準確的告訴使用者“您的網路無法連線，請檢查”。這樣使用者是不是可以有更好的體驗呢？
程式碼如下：
mounted(){
let self = this;
window.addEventListener('online', self.updateOnlineStatus, true);
window.addEventListener('offline', self.updateOnlineStatus, true);
},
methods: {
updateOnlineStatus: function(){
var self = this;
self.onLineInfo = navigator.onLine ? "online" : "offline";
},
}
複製程式碼注意：
navigator.onLine只會在機器未連線到區域網或路由器時返回false，其他情況下均返回true。 也就是說，機器連線上路由器後，即使這個路由器沒聯通網路，navigator.onLine仍然返回true。
6. 頁面可編輯：contentEditable
定義：
這個 API 可以使頁面所有元素成為可編輯狀態，使瀏覽器變成你的編輯器。
使用：
- 你可以在位址列輸入
data:text/html, <html contenteditable>, 這樣瀏覽器就變成了編輯器。
使用場景：
需求 —— 頁面需要一個文字輸入框。
- 該文字輸入框預設狀態下有預設文字提示資訊
- 文字框輸入狀態下其高度會隨文字內容自動撐開
像這樣的需求我們就可以使用 <div contentEditable='true'></div> 代替 <textarea> 標籤。
不過 contentEditable='true' 是不會有 placeholder 的，那 placeholder 怎麼辦呢？
我一般會使用如下方案，輸入內容後改變 class：
<div class='haveInput' contentEditable='true' placeholder='請輸入'></div>
// css 樣式
.haveInput:before {
content: attr(placeholder);
display: block;
color: #333;
}
複製程式碼7. 瀏覽器活躍視窗監聽: window.onblur & window.onfocus
定義：
這兩個 api 分別表示視窗失去焦點和視窗處於活躍狀態。
瀏覽其他視窗、瀏覽器最小化、點選其他程式等， window.onblur 事件就會觸發;
回到該視窗， window.onfocus 事件就會觸發。
使用：
程式碼很簡單：
mounted(){
let self = this;
window.addEventListener('blur', self.doFlashTitle, true);
window.addEventListener('focus', function () {
clearInterval(self.timer);
document.title = '微信網頁版';
}, true);
},
methods: {
doFlashTitle: function(){
var self = this;
self.timer = setInterval( () => {
if (!self.flashFlag) {
document.title = "微信網頁版";
} else {
document.title = `微信（${self.infoNum}）`;
}
self.flashFlag = ! self.flashFlag
}, 500)
},
}
複製程式碼8. 全屏 API（Fullscreen API）
定義：
這個 API 可以使你所開啟的頁面全屏展示，沒有其他頁面外的內容展示在螢幕上。
使用：
Element.requestFullscreen() 方法用於發出非同步請求使元素進入全屏模式。
呼叫此 API 並不能保證元素一定能夠進入全屏模式。如果元素被允許進入全螢幕模式，document 物件會收到一個 fullscreenchange 事件，通知呼叫者當前元素已經進入全屏模式。如果全屏請求不被許可，則會收到一個 fullscreenerror 事件。
當進入/退出全屏模式時,會觸發 fullscreenchange 事件。你可以在監聽這個事件，做你想做的事。
fullScreenFun: function(){
let self = this;
var fullscreenEnabled = document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
if (fullscreenEnabled) {
let de = document.documentElement;
if(self.fullScreenInfo === '開啟全屏'){
if( de.requestFullscreen ){
de.requestFullscreen();
}else if( de.mozRequestFullScreen ){
de.mozRequestFullScreen();
}else if( de.webkitRequestFullScreen ){
de.webkitRequestFullScreen();
}
self.fullScreenInfo = '退出全屏'
} else {
if( document.exitFullscreen ){
document.exitFullscreen();
}else if( document.mozCancelFullScreen ){
document.mozCancelFullScreen();
}else if( document.webkitCancelFullScreen ){
document.webkitCancelFullScreen();
}
self.fullScreenInfo = '開啟全屏'
}
} else {
self.fullScreenInfo = '瀏覽器當前不能全屏';
}
}
複製程式碼相關：
- document.fullscreenElement: 當前處於全屏狀態的元素 element
- document.fullscreenEnabled: 標記 fullscreen 當前是否可用
- document.exitFullscreen(): 退出全屏
後記
這篇文章很簡單。我的目的是想介紹一下有趣的 API，來提高大家對前端的一點興趣。
我認為這些 API 比較有趣，若你一直疲於業務，那麼這些 API 或許可以給你不一樣的感受。
前端詞典系列
《前端詞典》這個系列會持續更新，每一期我都會講一個出現頻率較高的知識點。希望大家在閱讀的過程當中可以斧正文中出現不嚴謹或是錯誤的地方，本人將不勝感激；若通過本系列而有所得，本人亦將不勝欣喜。
如果你覺得我的文章寫的還不錯，可以關注我的微信公眾號，公眾號裡會提前劇透呦。
你也可以新增我的微信 wqhhsd， 歡迎交流。