【前端词典】分享 8 个有趣且实用的 API

时间 2021-01-19

标签 css html 前端 git github web api promise 浏览器微信栏目 CSS 繁體版

原文原文链接

前言

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

这几个 API 使用得当的话，能够提升你应用的友好性。html

这些 API 的示例代码我已放在 github 上了，地址：https://github.com/wanqihua/The-dictionary-of-front-end-test。感兴趣的能够 clone 代码到本地运行。望给个 star 支持一下。前端

API 也能够如此有趣

先看效果图：
git

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

定义：

这个 API 能够将你手机是否横屏的状况暴露给须要知道的人知道。github

使用：

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 咱们在横屏和竖屏的时候能够添加一些动做或者是样式的改变。web

若是只是样式的改变也能够经过媒体查询来监听：api

/* 竖屏 */

@media screen and (orientation: portrait) {

    // some css code

}

/* 横屏 */

@media screen and (orientation: landscape) {

    // some css code

}

2. 电池状态：navigator.getBattery()

定义：promise

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

    }

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 或许能够给你不同的感觉。

前端词典系列

《前端词典》这个系列会持续更新，每一期我都会讲一个出现频率较高的知识点。但愿你们在阅读的过程中能够斧正文中出现不严谨或是错误的地方，本人将不胜感激；若经过本系列而有所得，本人亦将不胜欣喜。

若是你以为个人文章写的还不错，能够关注个人微信公众号，公众号里会提早剧透呦。

你也能够添加个人微信 wqhhsd，欢迎交流。