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

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

前言

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

这些 API 的示例代码我已放在 github 上了,地址:https://github.com/wanqihua/The-dictionary-of-front-end-test

API 也可以如此有趣

先看效果图:

1. 监听屏幕旋转变化接口: 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;    });},

orientation.angle 值

屏幕方向

0

竖屏

90

向左横屏

-90/270

向右横屏

180

倒屏

通过这个 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 或许可以给你提供一个不错的思路。

使用:

不同浏览器返回的值稍微有点差异。你可以通过以下封装好的方法来消除这种差异:

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 可以使页面所有元素成为可编辑状态,使浏览器变成你的编辑器。

使用:

  1. 你可以在地址栏输入 data:text/html,<html contenteditable>, 这样浏览器就变成了编辑器。

使用场景:

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

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

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

相关:

  1. document.fullscreenElement: 当前处于全屏状态的元素 element
  2. document.fullscreenEnabled: 标记 fullscreen 当前是否可用
  3. document.exitFullscreen(): 退出全屏

本文分享自微信公众号 - 小生方勤(XSFQ_HSD),作者:小生方勤

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端词典】4 (+1)种滚动吸顶实现方式的比较

    我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop ...

    小生方勤
  • 【前端词典】4 种滚动吸顶实现方式的比较

    我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug,后来我查看代码才发现直接用的是 offsetTop ...

    小生方勤
  • 【前端词典】几个有益的 CSS 小知识

    因为浏览器首先会找到所有 p 标签,然后再向上查找包含 class 为 div 的元素。这样一来如果 代码中有很多 p 标签,无疑是会做很多重复工作的。

    小生方勤
  • iOS12 切换到后台请求丢失的问题

    iOS12版本后,AFNetworking请求过程中,app返回后台,会出现以下错误,并且网络请求中断(只在真机中出现,模拟器不会复现)

    freesan44
  • 基于STM32MP1和Qt的新冠疫情监控平台

    既然Qt是跨平台的,那么能不能在嵌入式平台实现一下呢?最近刚好看到,ST官方在开展创客大赛活动,就买了米尔科技的YA157C开发板移植一下。

    单片机点灯小能手
  • 关于产品那些事

    上面是 Urban Dictionary 对 Badass 的英文解释,非常到位。Badass = bad + ass,bad 是“坏的”,ass 是“屁股、愚...

    Jean
  • 平台安全之中间件安全

    一次web访问的顺序,web浏览器->web服务器(狭义)->web容器->应用服务器->数据库服务器

    信安之路
  • 基于NXP i.MX28 MPU的疫情监控平台3-监控平台实现

    之前我使用在桌面版本Qt实现了肺炎疫情监控平台:基于Qt的新冠肺炎疫情数据实时监控平台(开源小项目)。既然Qt是跨平台的,正好手里有一块iMX287A的开发套件...

    单片机点灯小能手
  • 我用STM32MP1做了个疫情监控平台3—疫情监控平台实现

    既然Qt是跨平台的,那么能不能在嵌入式平台实现一下呢?最近刚好看到,ST官方在开展创客大赛活动,就买了米尔科技的YA157C开发板移植一下。

    单片机点灯小能手
  • 关于java中死锁的总结

    关于死锁,估计很多程序员都碰到过,并且有时候这种情况出现之后的问题也不是非常好排查,下面整理的就是自己对死锁的认识,以及通过一个简单的例子来来接死锁的发生,自己...

    coders

扫码关注云+社区

领取腾讯云代金券