你（可能）不知道的web api

簡介

做爲前端er，咱們的工做與web是分不開的，隨着HTML5的日益壯大，瀏覽器自帶的webapi也隨着增多。本篇文章主要選取了幾個有趣且有用的webapi進行介紹，分別介紹其用法、用處以及瀏覽器支持度，同時我也分別爲這幾個api都作了一個簡單的demo（真的很簡單，樣式等於沒有~）這幾個api分別是：

• page lifecycle
• onlineState
• 利用deviceOrientation製做一個隨着手機旋轉的正方體
• battery status
• custom event
• 利用execCommand完成一個簡單的富文本

page lifecycle(網頁生命週期)

介紹

咱們能夠用document.visibitilityState來監聽網頁可見度，是否卸載，可是在手機和電腦上都會現這種狀況，就是好比說頁面打開過了好久沒有打開，這時你看在瀏覽器的tab頁中看着是能夠看到內容的，可是點進去卻須要加載。chrome68添加了 freeze和 resume事件，來完善的描述一個網頁從加載到卸載，包括瀏覽器中止後臺進程，釋放資源各類生命階段。從一個生命週期階段到另一個生命週期階段會觸發不一樣的事件，好比onfocus，onblur，onvisibilitychange，onfreeze等等，經過這些事件咱們能夠響應網頁狀態的轉換。具體的教程推薦你們看看阮一峯大神的教程。

用法

window.addEventListener('blur',() => {})
window.addEventListener('visibilitychange',() => {
    // 經過這個方法來獲取當前標籤頁在瀏覽器中的激活狀態。
    switch(document.visibilityState){
        case'prerender': // 網頁預渲染 但內容不可見
        case'hidden':    // 內容不可見 處於後臺狀態，最小化，或者鎖屏狀態
        case'visible':   // 內容可見
        case'unloaded':  // 文檔被卸載
    }
});
複製代碼

用處

你們能夠看下這個demo

因此說，這個API的用處就是用來響應咱們網頁的狀態，好比說咱們的頁面是在播放視頻或者是一個網頁的遊戲，你能夠經過這個API來去作出對應的響應，暫停視頻，遊戲暫停等等。

瀏覽器支持度

page visibilituState

online state（網絡狀態）

這個API就很簡單了，就是獲取當前的網絡狀態，同時也有對應的事件去響應網絡狀態的變化。

用法

window.addEventListener('online',onlineHandler)
window.addEventListener('offline',offlineHandler)
複製代碼

用處

好比說咱們的網站是視頻網站，正在播放的時候，網絡中斷了，咱們能夠經過這個API去響應，給用戶相應的提示等等。

瀏覽器支持度

Vibration（震動）

讓手機震動~~~ 嗯，就這麼簡單。

用法

// 能夠傳入一個大於0的數字，表示讓手機震動相應的時間長度，單位爲ms
navigator.vibrate(100)
// 也能夠傳入一個包含數字的數組，好比下面這樣就是表明震動300ms，暫停200ms，震動100ms，暫停400ms，震動100ms
navigator.vibrate([300,200,100,400,100])
// 也能夠傳入0或者一個全是0的數組，表示暫停震動
navigator.vibrate(0)
複製代碼

用處

用來給用戶一個提示，好比說數據校驗失敗，固然震動不止這點做用，你們本身去擴展吧~~~

瀏覽器支持度

device orientation（陀螺儀）

經過綁定事件來獲取設備的物理朝向，能夠獲取到三個數值，分別是：

• alpha：設備沿着Z軸的旋轉角度

• beta：設備沿着X軸的旋轉角度

• gamma：設備沿着Y軸的旋轉角度

用法

window.addEventListener('deviceorientation',e => {
    console.log('Gamma:',e.gamma);
    console.log('Beta:',e.beta);
    console.log('Alpha:',e.Alpha);
})
複製代碼

用處

這種天然是web VR 中的使用場景會相對較多。這是我寫的一個小demo

瀏覽器支持度

battery status

這個API就使用來獲取當前的電池狀態

用法

// 首先去判斷當前瀏覽器是否支持此API
if ('getBattery' in navigator) {
    // 經過這個方法來獲取battery對象
    navigator.getBattery().then(battery => {
    // battery 對象包括中含有四個屬性
    // charging 是否在充電
    // level 剩餘電量
    // chargingTime 充滿電所需事件
    // dischargingTime 當前電量可以使用時間
    const { charging, level, chargingTime, dischargingTime } = battery;
    // 同時能夠給當前battery對象添加事件 對應的分別時充電狀態變化 和 電量變化
    battery.onchargingchange = ev => {
        const { currentTarget } = ev;
        const { charging } = currentTarget;
    };
    battery.onlevelchange = ev => {
        const { currentTarget } = ev;
        const { level } = ev;
    }
    })
} else {
    alert('當前瀏覽器不支持~~~')
}
複製代碼

用處

用來舒適的提示用戶當前電量~~~

瀏覽器支持度

這個瀏覽器的支持度很低。。。。

execCommand 執行命令

當將HTML文檔切換成設計模式時，就會暴露出 execcommand 方法，而後咱們能夠經過使用這個方法來執行一些命令，好比複製，剪切，修改選中文字粗體、斜體、背景色、顏色，縮進，插入圖片等等等等。

用法

用法也很簡單，這裏簡單介紹幾個，詳細的介紹你們能夠去MDN上看看。 這個API接受三個參數，第一個是要執行的命令，第二個參數mdn上說是Boolean用來表示是否展示用戶界面，但我也沒測試出來有什麼不一樣，第三個參數就是使用對應命令所須要傳遞的參數。

// 通常不會直接去操做咱們自己的HTML文檔，能夠去插入一個iframe而後經過contentDocument來獲取、操做iframe中的HTML文檔。
let iframe = document.createElement('ifram');
let doc = iframe.contentDocument;
// 首先要將HTML文檔切換成設計模式
doc.designMode = 'on';

// 而後就可使用execCommand 這個命令了；
// 執行復制命令，複製選中區域
doc.execCommand('copy')
// 剪切選中區域
doc.execCommand('cut')
// 全選
doc.execCommand('selectAll')
// 將選中文字變成粗體，同時接下來輸入的文字也會成爲粗體，
doc.execCommand('bold')
// 將選中文字變成斜體，同時接下來輸入的文字也會成爲斜體，
doc.execCommand('italic')
// 設置背景顏色，，好比設置背景色爲紅色，就傳入 'red'便可
doc.execCommand('backColor',true,'red')
複製代碼

用處

我用這些命令簡單的寫了一個富文本的demo，你們能夠看一下Demo，效果以下：

瀏覽器支持度

CustomEvent （自定義事件）

你們都知道各類事件是如何綁定的，可是有時候這些事件不夠用呢，custom event就能夠解決這樣的問題。

用法

let dom = document.querySelector('#app');
// 綁定事件， 傳遞過來的值能夠經過ev.detail 來獲取
dom.addEventListener('log-in',(ev) => {
    const { detail } = ev;
    console.log(detail);  // hello
})
// 派發事件，須要傳入兩個參數，一個是事件類型，另一個是一個對象，detail就是傳遞過去的值
dom.dispatchEvent(new CustomEvent('log-in',{
    detail:'hello'
}))
複製代碼

用處

綁定自定義事件，最近很火的框架Omi，其中的自定義事件就是基於customEvent實現的。

瀏覽器支持度

最後

就先介紹到這些，web api愈來愈多，固然每一個人不可能全都熟記於心，這篇文章也只是簡單介紹一下，還有不少有意思並且很重要的API，好比：web components， service worker，genric sensor等等，不過這些都有不少人在鑽研，同時文檔相對較多。 相信你看完這些至少已經知道這些API的大概用法了，若是有興趣瞭解用法的話，能夠去看下我寫的demo，也能夠去看看MDN文檔去深刻研究一下。

參考

• MDN文檔
• 阮一峯大神的博客
• web-api-you-dont-know 視頻演講
• www.zhangyunling.com/725.html
• Omi WeElement源碼