分享 8 个有趣且实用的 API

最新推荐文章于 2024-03-19 17:20:14 发布

前端大全

最新推荐文章于 2024-03-19 17:20:14 发布

阅读量2.8k

点赞数

（给前端大全加星标，提升前端技能）

作者：小生方勤公号 / 小生方勤（本文来自作者投稿）

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

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

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

先看效果图：

640?wx_fmt=gif

定义：

这个 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 我们在横屏和竖屏的时候可以添加一些动作或者是样式的改变。

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

定义：

这个 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 = '不支持电池状态接口';
}
},

定义：

这个 API 可以让你的手机按你的想法震动。

使用：
震动效果会在很多游戏使用。比如欢乐斗地主中，地主打完王炸后手机都会有震动的效果，以此来表达地主嘚瑟的心情也很是合理。

示例代码如下：

定义：

这个 API 可以告诉你当前应该使用什么语言。

如果你需要和我一样做多语言适配，这个 API 或许可以给你提供一个不错的思路。

使用：

640?wx_fmt=png

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

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'
}
}
}