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

時間 2021-01-19

標籤 css html 前端 git github web api promise 瀏覽器微信欄目 CSS 简体版

原文原文鏈接

前言

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

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

這些 API 的示例代碼我已放在 github 上了，地址：https://github.com/wanqihua/The-dictionary-of-front-end-test。感興趣的能夠 clone 代碼到本地運行。望給個 star 支持一下。前端

API 也能夠如此有趣

先看效果圖：
git

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

定義：

這個 API 能夠將你手機是否橫屏的狀況暴露給須要知道的人知道。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;

    });

},

經過這個 API 咱們在橫屏和豎屏的時候能夠添加一些動做或者是樣式的改變。web

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

/* 豎屏 */

@media screen and (orientation: portrait) {

    // some css code

}

/* 橫屏 */

@media screen and (orientation: landscape) {

    // some css code

}

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

定義：promise

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

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

使用：

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>, 這樣瀏覽器就變成了編輯器。

使用場景：

需求 —— 頁面須要一個文本輸入框。

該文本輸入框默認狀態下有默認文本提示信息
文本框輸入狀態下其高度會隨文本內容自動撐開

像這樣的需求咱們就可使用 <divcontentEditable='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 = '瀏覽器當前不能全屏';

    }

}

相關：