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 可使页面全部元素成为可编辑状态，使浏览器变成你的编辑器。

使用：

你能够在地址栏输入 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>) 使用场景：

需求 —— 页面须要一个文本输入框。

该文本输入框默认状态下有默认文本提示信息
文本框输入状态下其高度会随文本内容自动撑开

像这样的需求咱们就可使用 <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 = '浏览器当前不能全屏';
    }
}
复制代码
复制代码