簡介
作為前端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的數字，表示讓手機震動相應的時間長度，單位為msnavigator.vibrate(100)// 也可以傳入一個包含數字的陣列，比如下面這樣就是代表震動300ms，暫停200ms，震動100ms，暫停400ms，震動100msnavigator.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就使用來獲取當前的電池狀態
用法
// 首先去判斷當前瀏覽器是否支援此APIif ('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文件去深入研究一下。