【前端詞典】分享 8 個有趣且實用的 API

時間 2019-11-16

標籤前端詞典分享有趣實用 api 简体版

原文原文鏈接

前言

在平常開發中老是和各類 API 打交道，咱們名爲前端工程師實爲 API 調用工程師。這篇文章我就分享 8 個有趣的 API，你若經過閱讀這篇文章對前端增長一點點的樂趣，對我來講也是一種鼓勵。

這幾個 API 使用得當的話，能夠提升你應用的友好性。css

這些 API 的示例代碼我已放在 github 上，感興趣的能夠 clone 代碼到本地運行。望給個 star 支持一下。html

API 也能夠如此有趣

先看效果圖：前端

1. 監聽屏幕旋轉變化接口: orientationchange

定義： ios

這個 API 能夠將你手機是否橫屏的狀況暴露給須要知道的人知道。git

使用：github

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 咱們在橫屏和豎屏的時候能夠添加一些動做或者是樣式的改變。

若是隻是樣式的改變也能夠經過媒體查詢來監聽：web

/* 豎屏 */
@media screen and (orientation: portrait) {
    // some css code
}
/* 橫屏 */
@media screen and (orientation: landscape) {
    // some css code
}

2. 電池狀態：navigator.getBattery()

定義： npm

這個 API 能夠將你手機電池狀態的狀況暴露給須要知道的人知道。api

這個 api 返回的是一個 promise 對象，會給出一個 BatteryManager 對象，對象中包含了如下信息：

key	描述	備註
charging	是否在充電	可讀屬性
chargingTime	若在充電，還需充電時間	可讀屬性
dischargingTime	剩餘電量	可讀屬性
level	剩餘電量百分數	可讀屬性
onchargingchange	監聽充電狀態的改變	可監聽事件
onchargingtimechange	監聽充電時間的改變	可監聽事件
ondischargingtimechange	監聽電池可用時間的改變	可監聽事件
onlevelchange	監聽剩餘電量百分數的改變	可監聽事件

使用：promise

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 = '瀏覽器當前不能全屏';
    }
}

相關：