这些有趣的 API 着实有点炫

前言

在日常开发中总是和各种 API 打交道，我们名为前端工程师实为 API 调用工程师。这篇文章我就分享 8 个有趣的 API，你若通过阅读这篇文章对前端增加一点点的乐趣，对我来说也是一种鼓励。

这几个 API 使用得当的话，可以提高你应用的友好性。

这些 API 的示例代码我已放在 github 上了，地址：https://github.com/wanqihua/blog。感兴趣的可以 clone 代码到本地运行。望给个 star 支持一下。

API 也可以如此有趣

先看效果图：

监听屏幕旋转变化接口: orientationchange

定义：

这个 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;    });},

通过这个 API 我们在横屏和竖屏的时候可以添加一些动作或者是样式的改变。

如果只是样式的改变也可以通过媒体查询来监听：

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

电池状态：navigator.getBattery()

定义：

这个 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;    }

在你的控制台输入 document.body.contentEditable = true，你会发现页面的任何元素都是可编辑的。试试逗一逗朋友，增加些乐趣。

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 =  浏览器当前不能全屏 ;        }    }

后记

这篇文章很简单。我的目的是想介绍一下有趣的 API，来提高大家对前端的一点兴趣。

我认为这些 API 比较有趣，若你一直疲于业务，那么这些 API 或许可以给你不一样的感受。

另外，这篇文章是我半年前写的，不用惊讶。

前言