前言在日常的开发中，我们总是要和各种各样的API打交道。我们叫前端工程师，其实是API调用工程师。在本文中，我将分享8个有趣的API。如果你通过阅读这篇文章为前端增添了一点乐趣，那也是对我的一种鼓励。正确使用这些API可以提高您的应用程序的友好性。这些API的示例代码我都放在了github上，有兴趣的可以clone代码在本地运行。希望给个star支持一下。API也可以这么有趣。先看效果图：1.监控屏幕旋转变化的接口：orientationchange定义：这个API可以把你的手机是否横着暴露给需要知道的人。使用：screenOrientation:function(){letself=this;让orientation=screen.orientation||screen.moz方向||屏幕.ms方向；window.addEventListener("onorientationchange"inwindow?"orientationchange":"resize",function(){self.angle=orientation.angle;});},orientation.anglevalue屏幕方向0竖屏90左横屏-90/270右横屏180倒屏通过这个API我们可以在横屏和竖屏的时候添加一些动作或者样式变化。如果只是样式改变，也可以通过媒体查询来监听：/*verticalscreen*/@mediascreenand(orientation:portrait){//somecsscode}/*horizo??ntalscreen*/@mediascreenand(orientation:landscape){//一些CSS代码}2.电池状态：navigator.getBattery()定义：该API可以将手机电池的状态暴露给需要知道的人。这个api返回一个promise对象，它会给出一个BatteryManager对象，这个对象包含以下信息：key描述，remark，充电是否充电，可读属性chargingTime，如果是充电，充电需要的时间，可读属性dischargeTime，remainingpower,可读属性级别剩余电量百分比可读属性onchargingchange监听充电状态的变化可以监听事件onchargingtimechange监听充电时间的变化可以监听事件ondischargingtimechange监听电池可用时间的变化可以监听事件onlevelchange监听剩余电量百分比的变化可以监听事件使用：getBatteryInfo:function(){letself=this;if(navigator.getBattery){navigator.getBattery().then(function(battery){//判断是否在充电self.batteryInfo=battery.charging?`Charging:remaining${battery.level*100}%`:`Notcharging:remaining${battery.level*100}%`;//电池充电状态改变事件battery.addEventListener('chargingchange',function(){self.batteryInfo=battery.charging?`Charging:remaining${battery.level*100}%`:`不充电：剩余${battery.level*100}%`;});});}else{self.batteryInfo='不支持电池状态接口';}},3.让你的手机振动：window.navigator.vibrate(200)定义：这个API可以让你的手机按照你的想法振动。用途：振动效果在许多游戏中都有使用。比如在欢乐游戏中，楼主打王渣后会有震动效果，表达楼主的心情也是很合理的。示例代码如下：vibrateFun:function(){letself=this;if(navigator.vibrate){navigator.vibrate([500,500,500,500,500,500,500,500,500,500]);}else{self.vibrateInfo="您的设备不支持振动";}},4.当前语言：navigator.language定义：这个API可以告诉你当前应该使用什么语言。如果你像我一样需要做多语言适配，这个API或许能给你提供一个很好的思路。用法：不同的浏览器返回的值略有不同。你可以通过下面封装的方法消除这种差异：functiongetThisLang(){constlangList=['cn','hk','tw','en','fr'];constlangListLen=langList.length;constthisLang=(navigator.language||navigator.browserLanguage).toLowerCase();for(leti=0;i
