8 個有趣且實用的 API

時間  2019-12-05
標籤 有趣 實用 api 简体版
原文   原文鏈接

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

前言

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

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

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

API 也能夠如此有趣

先看效果圖： git

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

定義：github

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

使用：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倒屏promise

經過這個 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 或許能夠給你提供一個不錯的思路。

使用： ![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="www.w3.org/2000/svg" version="1.1" width="386" height="180"></svg>) 不一樣瀏覽器返回的值稍微有點差別。你能夠經過如下封裝好的方法來消除這種差別： functiongetThisLang(){ 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 分鐘事後……

吃晚飯回到公司，打開電腦繼續把那篇文章看完，看完了打算點了贊，發現給了這個提示： ![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="www.w3.org/2000/svg" version="1.1" width="505" height="189"></svg>) 這個提示讓我有點懵（就是沒網絡了）。

這個時候咱們就可使用這個 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 可使頁面全部元素成爲可編輯狀態，使瀏覽器變成你的編輯器。

使用：

  1. 你能夠在地址欄輸入 data:text/html, <html contenteditable>, 這樣瀏覽器就變成了編輯器。

![](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="www.w3.org/2000/svg" version="1.1" width="648" height="390"></svg>) 使用場景：

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

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

像這樣的需求咱們就可使用 <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();
            }elseif( de.mozRequestFullScreen ){
                de.mozRequestFullScreen();
            }elseif( de.webkitRequestFullScreen ){
                de.webkitRequestFullScreen();
            }
            self.fullScreenInfo = '退出全屏'
        } else {
            if( document.exitFullscreen ){
                document.exitFullscreen();
            }elseif( document.mozCancelFullScreen ){
                document.mozCancelFullScreen();
            }elseif( document.webkitCancelFullScreen ){
                document.webkitCancelFullScreen();
            }
            self.fullScreenInfo = '打開全屏'
        }
    } else {
        self.fullScreenInfo = '瀏覽器當前不能全屏';
    }
}
複製代碼
複製代碼

相關：

  1. document.fullscreenElement: 當前處於全屏狀態的元素 element
  2. document.fullscreenEnabled: 標記 fullscreen 當前是否可用
  3. document.exitFullscreen(): 退出全屏
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程