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

时间  2019-11-05
标签 前端词典 分享 有趣 实用 api 繁體版
原文   原文链接

前言

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

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

这些 API 的示例代码我已放在 github 上，感兴趣的能够 clone 代码到本地运行。望给个 star 支持一下。前端

API 也能够如此有趣

先看效果图：ios

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

定义：git

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

使用：web

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

若是只是样式的改变也能够经过媒体查询来监听：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 对象，对象中包含了如下信息：

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. 文本框输入状态下其高度会随文本内容自动撑开

像这样的需求咱们就可使用 <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();
            }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(): 退出全屏

后记

这篇文章很简单。个人目的是想介绍一下有趣的 API，来提升你们对前端的一点兴趣。

我认为这些 API 比较有趣，若你一直疲于业务，那么这些 API 或许能够给你不同的感觉。

Vue 相关文章输出计划

最近总有朋友问我 Vue 相关的问题，所以接下来我会输出 9 篇 Vue 相关的文章，但愿对你们有必定的帮助。我会保持在 7 到 10 天更新一篇。

  1. 【前端词典】Vuex 注入 Vue 生命周期的过程
  2. 【前端词典】浅析 Vue 响应式原理
  3. 【前端词典】新老 VNode 进行 patch 的过程
  4. 【前端词典】如何开发功能组件并上传 npm
  5. 【前端词典】从这几个方面优化你的 Vue 项目
  6. 【前端词典】从 Vue-Router 设计讲前端路由发展
  7. 【前端词典】在项目中如何正确的使用 Webpack
  8. 【前端词典】Vue 服务端渲染
  9. 【前端词典】Axios 与 Fetch 该如何选择

建议你关注个人公众号，第一时间就能够接收最新的文章。

若是你想加群交流，也能够添加有点智能的机器人，自动拉你进群：

热门文章传送门

  1. 【前端词典】滚动穿透问题的解决方案
  2. 【前端词典】5 种滚动吸顶实现方式的比较（性能升级版）
  3. 【前端词典】提升幸福感的 9 个 CSS 技巧
  4. 【前端词典】分享 8 个有趣且实用的 API
  5. 【前端词典】从输入 URL 到展示涉及哪些缓存环节(很是详细)
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程