作为一名前端爱好者, 笔者运用空余时间研讨了几个国外网站的源码,发现不管是库,仍是事务代码,都会用到了一些比较有意思的API,尽管平时在作业中部分触摸过,可是经过这次的研讨,觉得很有必要总结一下,究竟现已2020年了,是时分更新一下技能储备了,本文首要经过实践案例来带咱们快速了解以下5 o 几个知识点:

  • Observer 原生调查者
  • script标签工作深入 – 移除S W ? T y F Kscript标签后工作依然能履行的原因
  • Proxy/Reflect
  • 自定义工作
  • fileReader API
  • Fullscreen 网页全屏
  • URL API的运用
  • Geolocation 地理方位API的运用
  • Notifications 浏览器原3 , ^生消息告诉
  • BatR / Y qtery Status 设备电量状况

我会对部分API做一些比较有意思的案例,那么开端咱们的– F M ^ ( m学习吧~

1. Observer API

Observer是浏览器自带的调查者,它首要供给了Intersection, Mutation, Resize, Performance这四类调查者, 这儿笔者重点介绍Intersection Observer.

1.1 Intersection Observer

IntersectionObse9 T 2 f k * ; l 7rver供给了一种异步调查方针元素与其祖先元素穿插状况的办法。当一个IntersectionObserver方针被创立时，其被装备为监听根中一段给定比例的可见区3 * q域,并1 M i 2且无法更改其装备，所以一个给定的调查者方f z ( ( * 9针只能用来监听可E z E &见区域的特定改动值；可是，咱们能够在同一个调查者方针中装备监听多个方针元素。

说简单点便是该aE – k s X j / a ;pi能够异步监听方针元素在根元素里S y u Z K w 的方位改动,并触发呼应工作.咱们能够运用它来完成更为高效的图片懒加载, 无限翻滚以及内容埋点上报等.接下来咱们经过一个比方来阐明一下它的运用步骤] z ~ 3 ] q 9 K.

// 1.定义调查者及调查回调
const intersectionObserver = new Intersectios y C t & _ `nObserver((entries, observer) =>I + ? - {
entries.forEach(entry =&gG s y O w N & 4t;E / [ {
console.log(entry)
// ...一些操作
});
},
{
root: document.querySelector(U n 7 R'#root'),
rootMargin: '0px',
thresho l B Dld: 0.5
}
)
// 2. 定义要调查的方针方针
const target = document.querySelector(“.c B 0 mtarget”);
intersectionObserver.observe(target);

以上代码就完成了一个G l m 1 J根本的Intersection Observer,尽管已有代码中还表现不出什么实质性功用. 接下来介绍一下代码中o e – u [ y u运用到的参数的意m E , ` 4 @ @义:

  • c/ X 7 Qallback IntersectionObserver实例的第一个参数3 / g 9, 当方针元素与根元素经过阈值时就会触发该回调.回调中第一个参数是被调查方针列表,一旦被调查方针发作突变就会被移入该列表,! ) L X 9 L 5 列表中每一项都保存有调查者的方位信息;第二个参数为observer,调查者本身.如下图操控台打印:

    几个非常有意思的javascript知识点总结

    其中rootBoun( u I O F nds表明根元素的方位信息, boundingClientRect表明方针元素的方位信息,ink ( 7 [ O NtersectionRect表明叉部分r i Q D 的方位信息, U k . t + i intersectionRatio表明方针元素的可见比例.

  • 装备特点! { R | W P IntersectionObserver实例的第二个参数,用来装备监听特点,^ m K d b 4具体有以下三个特点:

    • root 所监听方针的具体祖先元素(element)。假如未传入值或值为null，则默许运用尖端文档的视窗。
    • rootMargin 核算穿插时添加到根(r[ M moot)鸿沟盒bouP x ^ L & v Vnding box的矩形偏移量， 能够有用的缩小或扩展根的断定规模然后满意核算需求
    • thresholds 一个包括阈值的列表, 按升序摆放, 列表中的每个阈值都是监听方针的穿插区域与鸿沟区域的比率。当监听方针的任何阈值被越过期，都会生成一个告诉(Notification)。假如结构器未传入– s X # { 8 C值, 则默许值为0。
      以上特点介绍字面上可能很难了解,笔者花几个草图来让咱们有个直观的认知:

      几个非常有意思的javascript知识点总结

      当咱们设置rootMargin为10px时,咱们的p a $root会增大影响规模,但方针8 L S o 4 j H #元素移动到淡红色区域式就会被监听到,当然咱们还能够设置rootMargin为负值来削减影响区域.其支撑的值为Y l Z X W百分比和pxF . A ,,如下:

rootMaU u K | yrgin: '10px'
rootMargin: '10%'
rootM~ 9 o ? W 3 ]argin: '10px 0px 10px 10px'

thresholds能够如下d H # s F [ X %图了解:

几个非常有意思的javascript知识点总结

由上图所示,当咱们设置阈值为[0.25, 0.5]时, 方针元素的25%和50%进入根元素的影响规模时都会触发回调.运用这个特性咱们往往8 P – L J Y @ u c能够完成位差动Y 5 N B t 4画,或许更依据方针元素的方位改动做不同的交互.
当然Intersection还供给了以下几个办法来操控调查方针:

  • disconnect() 使IntersectionObserv1 . ; o e C r ^er方针中止监e o _听作业
  • takeRecords() 回来一切调查方针的IntersectionObserverEntry方针数组
  • unobserve() 使IntersectionObserver中止监听特定方针元素

了解了运用办法和api之后,咱们来看看一个实践运用–完成图片懒加载:

<i- S . B ) mmg src="loading.gif" data-src="absolute.jpg">
<img src="loading.gif" data-src="relZ z x :  : 5ative.jpg">: i j W l o;
<img src="loading.gif" data-src="fixed.jpg">
<script>
let ob2 z ` W g 2 E 5 eserverImg = new IntersectionObserver(
(entries, observer) => {
entrie3 E t 2 y , d Y ms.forEach(entry =>4 m C [ w; {
// 替换为正+ R S ) v X [ 0式的图片
entry.target.src = entry.target.o a # b ` j | sdataset.src;
// 中1 S 5 | Z p y止监听
observef } R H D F ( Yr.unobserve(entry.target);
});
},
{
root: documennt.getElem3 ~ }entById('scrollView'),
threshold: 0.3
}
);
document.querySelectorAll('img').forEach(im= q c e hgL X ` => { observerImg.ob I d K z A : lbserve(img) });
</script>

以上代码就完成了一个图片懒加载功用, 当图片的30%进入根元素时才加载实在的图片,这} = w ?又让我想起了之前在某条做广告埋点上报时运用reac@ 1 | L 4 g ) B [t-lazyload的画面.咱们还能够运用它完成无限翻滚, H5视差动画等有意思的交互场x | P 3 Y e W景.

1.2 Mutation Observer和R. } X d f $esize Observer

Mutation Observer首要用来完F X R a ; w i成dom改动时的监听,同样也是异步触发,对监听功用十分友爱.
Resize Observer首要用来监听元素巨细的改动,比较于每次窗口改动都触发的window.resize工作, Resize Observer有更好的功用和对dom有更细粒度的操控,~ u z ! = = /它只会在制作前或布局后触发调y S Y 6用.
以上两个api的运用和Intersection运用十分相似,官方材料也写得很全,咱们能够好好研P ; 9 M Y | + E n讨一下.

2.g s V ^ e s + 移除script标签后工作依然能履行的原因

这个问题首要是之前有朋友问过我，当时的想法便是简% f n C l单的以为script内的代码履行完之后以及与dom绑定了，存放在了浏览器内存中，最近查了许多材料4 v 4发现有一个有点意思的解说，放出来咱们能够感受一下：

JavaScript解说z @ 0器在履行脚本时，是按^ & p y T J o Z块来履行的，也便是说浏览器在解析HTML文档流时，假如遇到一个script标签，javascript解说器会等待这个代码块都加载完了，才进行预编译，然后才履行。所以，当K Z u * s 3 ! g ,开端履行这个代码块的代码时，这个代码段现已被解析完了。这时再从DOM中删去也就V * –不影响代码的履行了。

3. Proxy/Reflect

Proxy/Reflect尽管是es6的api，出现也现已有几年了，可是在项目中用的仍是比! H c 4较少，假如是做底层架构方面的作业，仍是建议咱们多去运用，究竟vue/reactp ) 8 G C ^这种结构源码把这些api玩的如火纯青，仍是很有必要掌握一下的。

其实咱们认真看mdn的介绍或许阮d o f一峰教师的文章，仍是很好了解这些api的用法的，接下来咱们具体介绍一下这两个api以及运用场景.

3.1 Proxy

Proxy 能够了解成，在方针方针之前架% # k 起n ^ X 6 S .一层“阻拦”，外界对该方针的拜访，都必须先经过这层阻拦，C { – L } i p因而供给了一种机制，能够对外界的拜访进行& f _ | 0过滤和改写。Proxy在许多场景中都会和RefJ x | /lect一同运用.
用法也很简单,咱们看看Proxy的根本用法:

const obC ^ :j = {
name: '徐小夕',
ag* k E w 3 v o de: '12 ? a - q 9 L0'
}
const proxy = new Proxy(obj, {
get(target, propKey, receiver) {
console.log('get:' + propKey)
rel x S L ~ Y Iturn Reflect.get(target, propKe$ % ? U W v / ( Gy, receivef } Z Zr)
},
set(target, propKey, value, receiverW _ p E h t) {
console.log('sm P  t M + aet:' + propKey)
return Rp v T 0 G , A de 6 # 8 Z %flect.set(target, propKey, value, receiver)
}
})
console.log(proxy.name) // get:name 徐小夕
proxy.work = 'fro4 H S _ nntend' /8 8 U ^ f/ set:work frontend

以上代码阻拦了obj方针,并重新定义了读写(get/set)办法,这样咱们就能够在拜访方针时进行额定的操作了.

Proxy还有apply(阻拦 Proxy 实例作为函数调用的操作} w { C)和constx j V 1 Aruct(阻拦 Proxy 实例作为结构函数调用的操作)等特点能够运用,咱们能够在方针操作的不同阶段进行阻拦r 6 g,这儿我就i C ^ !不一相同举例了.接下来看看P s = , 1 / ; 5 uroxy的实践运用场景.

  • 完成数组读取负数的索引

咱们一般操作数组大多数都是正向操作的,不能经过指定负数来逆向查找数组,如# d N N C下图:

几个非常有意思的javascript知识点总结

咱们不能经过arr[-1]来拿到数组的尾部元素(字符串同理),这个时分咱们就能够用Proxy来完成这一功用,这是咱们的结构有点像环状:

几个非常有意思的javascript知识点总结

这I Z X b X种完成的优点是假如咱们想拜访数组的最终一个元素时,咱们不? H K 8需求先拿到长~ $ h [ O Y度,再经过索引拜R u H K x访了:

// 原始写法
arr[arr.length -1]
// 经过proxy改造后写法
arr[-1]

完成代码如下:

function createArray(...elements) {
let handle: a } + or = {
get(target, prd u dopKey, recei7 _ C ^ver) {
let index = Number(pL 4 K n s - } AropKey);
if (index < 0) {
propKey = String(target.length + index);
}y | [
return Reflect.get(target, propKey,s [ _ ^ Q M w receiver);
}
};
let target = [];
target.push(...elements);
return new ProG Z K p x 8 9xy(target, handler);
}

咱们能够发现以上代码运用proxy来署理数组的读取操作,在内部封装了支撑负值查找的) n I U 6 w v M功用,当然咱v k }们也能够不用proxy来完成同样的功用,这儿完成参阅阮一峰教师的完成.

  • 运c m X 4 b U用proxy完成更高雅的校验器

一般咱们在做表单校验的时分会写一些if else或许switch判别来完成对不同特点值的校验,同样咱们也能够用proxy来高雅的完成它,代码5 4 / w如下:

const formData = {
name: 'xu% 1 sxi',
age: 120,
label: [A S  Z X v K'react', 'vue', 'nodP x N 1 { m # Ve', 'javascript']
}
// 校验器
consa ( $ }t validators = {
name(v) {
// 查验name是否为字符串并且长d L b r Z i U A 2度是否大于3
return typeof v === 'string' && v.j q } e * ! ~ } ]length > 3
},
age(v) {
// 查验age是否为数值
return typeof v === 9 } ,'number'
},
label(* & Sv) {
// 查验label是否为数组并且长度是否大于0
return Array.isArT C Z s 5 xray(v) && v.length > 0
}
}
// 署理校^ D * J @ 1 Q验方针
function proxyValidator(target, validator) {
return new P2 o y e lroxy! G u(target, {
set| O K # P(target, propKey, value, receiver) {
if(target.hasOwnProperty(propKD . g o ! Q 8 M ey)E c U y f S : J) {
let valid A 0 H Q = validator[propKey]
if(!!valid(value)) {
return Reflect.set(F N 5 [ p Utarget, propKey, value, receiver)
}else {
// 一些其他过错事U g I D o W务...
throw Error(`值验证过错${propKey}:${value}`)
}
}
}
})g d J N b H = n
}

有了以上完成形式,咱们就能够完成对表单中某个值进行设置时进行校验了,用法如下:

let formObj = proxyVal` Q 6 7 l t s d Eidator(formData, validators)
formObj.name = 333;   // Uncaught E ! K f &rror: 值_ g e  e ? ; V验证过错name:N + y s x h t A hf
formObj.age = 'ddd'   // Uncaught Error: 值验证过错age:f

以上代码中0 d ? + J [ f s S当设置了不合法的值时,操控台将会剖出过错,假如在实践事务中,H R ] _ : 3 v咱们能够给用户做出恰当的提示% – ; L | t.

  • 完成请求阻拦和过错上报
  • 完成数据过滤

以上几点笔者在之前的文章中X T e也写过,所以这儿不在具体介绍了.咱们也能够依据实践状况自己完成更加灵活的阻拦操作.当然Proxy供给的API远远不止这几个,咱们能够在MDN或许其他渠道了解更多3 W V d高档用& S S K l法.

3.2 Reflect

Reflect方针与Proxy方针相# – –同，也是 ES6 为了操作方针而供给的新 API,更多的运用场景是合作proxy8 1 l H z一同运用,在上文中现已用到了.能够将Object方针的一些显着属于言语内部的办法放到Reflect方针上,并修正某些Object办法的回来成果. Reflect方针的办法与Proxy方针的办法一一对应，只要是Proxy方针的办法，就能在Reflect方针上找到对应的办法。

4. 自定义工作

CustomEvent API是个十分有意思的api, 并且十分有用, 更重要的是学起来十分简单R b # = 4 f,并且被大部分现代浏览器5 Y l ] _ h B支撑.咱们能够让任意dom元素监听和触发自定义工作,只需求如下操作:

// 添加一个恰当的工作监听器
dom1.addEventListener& E e O .(T ) m"boom", function(e) { something(e.detail.num) })
// 创立并分发工作
var event = new CustomEvent("boom", {"detail":{"num":10}})
dom1.dispatchEvent(eventI . Y X ] j ) W j

咱们来看看CustomEvent的参数介绍:

  • type 工作的类型名称,如上面M a A ; D | 9 | Q代码中的’boom’
  • CustomEventInit 供给了工作的装备信息,具体有以下几个特点

    • bub 5 Q n O 7 tbles 一个布尔值,表明该工作是否会冒泡
    • cancelable 一个布尔值,表明该工作是否能够被撤销
    • detail 当工作初始化时传递的数据

咱们能够经过dispatchEvent来触发自定义工作.其实他的用途有许多,比方创立调查者形式, 完成数据双向绑u / T h d定, 亦或许在游戏开发中完成打怪掉血,比T $ E D f S g L .方下面的比方:

几个非常有意思的javascript知识点总结

笔者上面画了一个打boss4 6 6 U h N #的草图, 现在的场景是两个玩家一同打boss, 咱们能够在玩家发起进犯的时分触发dispatch= { c { b b掉血的自定义工作, boss监听到工作4 F e U 8 b : B H后将血量自动E | R 9扣除, 至于不同角色的损伤值,咱们能够存放在detail中,然后经过战略形式去分发损伤V C n % X Q A.笔者曾今在学校开发的H5游戏时就许多R ~ C h采用相似的形式,仍是十分有意思的.

5. fileReader

File API使v 8 !得咱们在b T P 1 5 T t – J浏览器端能够拜访文件的数据,比方预览文件,获取文件4 C / p信息(比方文件名,文件内容,文S , A & 1 H 1件巨细等), 并且能够在前端完成文件下载(能够借助canvas和 window.URL.revokeObject/ P . ( F pURL的一些才能).当然咱们还能够完成拖拽上传文件这样高用户体会的操作r | ! + ..接下来咱们来看看几个实践比方.

  • 显现缩略图
function previewFiles(g P I t ; ]files, previewBox) {
for (var i = 0; i < files.length;% K 3 r i++) {
var file~  n d # + 6 O = files[i3 i & X Q S];
var imageType = /^image//;
if (!imageType.test(file.type)) {
continue;
}
var ik ? x p : } 3 x vmg = doc* i 2 M } _ument.createElement("i- H 1 E U % u e umg");
previewBox.app$ R 6 b 2 q hendChild(img); // 假设n 3 D C D"preT w z V Y R l Oview"便是用来显现内容的div
var readerJ % I { * = new FileReader();
reader.onload = (function(imgEl) {
return fun: ! c y B * % :ction(e) { imgEl.src = e.target.result; };
})(img);
reader.readAsDataURL(file);
}
}

以上代码能够在reviewBox容器中显现已上传好的图片,当然咱们还能够根据此来扩展,运用canvas将图片画到canvas上,然后进行图片紧缩,最终再把紧缩后的图片上传到服务器.这中方法其完成在许多工具型网站都在用,比方在线图片处理网站,供给的批量紧缩图片,批处理水印等功用,套路都差不多,感兴趣的: Z @ n q ^朋友能够尝试研讨一下.

  • 封装文件上传组件 } [ $ x G F

这块笔者之前也写过具体的文章,这儿就不一一举例了, 文章地址:

  • 3分钟教你用原生js完成具有进展监听的文件上传预览组件
  • 记一次老项目中的跨页面通信问题和前端完成文件下载功用

6. Fuq P } Z V = H v Cllscreen

全屏API首要是让网页能在电脑屏幕中全屏显现,它答应咱们打开或许退出全屏形式,以便咱们依据需求进行对应的操作,比方_ 4 v咱们常用的网页图形编辑器或许富文本编辑器, 为了让用户专心于内容规划,L U 8 L { B & 咱们往往供给切换全屏的功用供用8 0 X 6 a : J户运用.由于全屏API比较简单,这儿咱) A H . 3们直接上代码:

// 敞开全屏
docum| ? y C ent.documen9 r ^ F z T 5 j qtElement.requestFullscr& { c b W c 0een();
// 退出全屏
document.exitFullscreen();

以上代码的document.doc* | ZumentElementc ` 3 5 R G也能够换成任何P . { L S一个你想让其全屏的元素.默许状况下咱们还能够经过document.fullscreenElement来判别当前页面是否处于全屏状况,来完成屏幕切换的作用.假如是reac$ q E m x G v Et开发者,咱们也能够将其封装成一个自定义hool E 7 : Hks来完成与事务相E * L w Q k } O F关的全屏切换功用.

7! D T # ; G h r. URL

URL API是URL标准的组成部分，URL标准定义了构成有用一致资源定位符的内容以及拜访和操作URL的A1 7 `PI。

咱们运用URL组件能够做许多有意思的工作.比方咱们有个需求需求提取url的参数传给后台,传统的做法是自己写一个办法来解析url字符串,手动回来一个qV | { k ~uery方针.可是运用URL方针,咱们能够很便利的拿到url参数,如下:

let addr = new URL(Z ] b Ywindow.location.href)
let host = addr.host  // 获取主机地址
let path = addr.8 N y pathname  /p l Z W/ 获取路径名
let user = add1 $ ^r.searchParams.( L ^  D I 7 1get("user")  // 获取参数为user对应的值

以上代码可知,咱们假如将url转化为URL方针,那么咱们就能够很便利的经过searchParams供给的api来拿到url参数而无需自己再写一个办法了.

另一方面,假如网站安全性比较高,咱们还能够对参数进行d e ^自然数排序然后再加密上传给后端.具体代码如下:

function sortMD5WithParameters() {
let url = new URL(document.locatij 9 3 l | mon.h, q K U d | G aref);
url.searchParams.sort();
let keys = url.searchParams.keys();
let params = {}
for (lety x n n 3 key of kE + f peys) {
let val = url.searc. 0 A g )hParams.get(key);
para/ s J n {ms[key] = val
};
// ...md5加密
return MD5(params)
}

8. Geolocation

地理方位 API 经过 navigator.geolocation 供给, 这个浏览器API也比较有用, 咱们在网站中能够用此方法确认用L o $户的方位信息,然后让网站有不同的展现,增P x 3 w强用户体会.

举几个有意思A U 4 R的比方能够让咱们感受一下:

  • 依据不同地区,网站展现不^ z同的主题:

    几个非常有意思的javascript知识点总结
  • 依据用户所在地区,展现不同引荐内容 这一点* v 2 U 5 T电商网站或许内容网站用的比较多, 比方用户在新疆,则给他引荐瓜果m g k ^ V A F + v类广告, 在北京,则给他引荐旅游景点类广告等,尽管实践运用中往往会更复杂,Q | n O – X可是也0 e $ F f M是一种思路.

其T 2 6 p实运用远远不止如此,程序员能够发挥想象来完成更有意思的工作,让自己的网站更智能.接下来笔者就根据promise写一段获取用户方位的代码:

function getUserLocation() {
return new Promise((resolve, reject) => {
if (!navigator.geolocation) {
reject()
} else {
navigator.geo| i c blocation.getCurrentPositZ h * D 5 = 5 1 Iion(S X K ~ N L l 9success,G / p w r n error);
}
function success(position) {
const latitude  = position.coords.latitude;
const long5 h L Q , V litude = position.coords.longitude;
rV B +  Z Kesolve({l% V g W 1 e # b matitude, longitude})
}
function error() {
reject()
}
})
}

运用方法和成果如下图l B 6所示:

几个非常有意思的javascript知识点总结

咱们根据获取到的经纬度调用第三方a7 u t n 7 +pi(比方百度,高德)就能够获取用户e T o ^ Y所在为精确方位信息了.

9. Notifications

Notifications APIf ^ [ [ 答应网页或运用程序在体系级别发送在页面外部显现的告诉;这样即便运用程序空闲或在后台，Web运用程序也会向用户发送信息。

咱们举个实践的比方,比方咱们网站内容有更新,告诉用户,作用如下:

几个非常有意思的javascript知识点总结

相关代码如下:v U [ I

Notification.requestPermission( function(status) {
console.log(status); // 仅当值为 "granted" 时显现告诉
var n = new Notifica( n : 6  /tion("趣谈前端", {body: "从零建立一个CMS全栈项目"}); // 显现告诉
});

当然浏览器的Notification还给咱们供给了4个工作触发api便利咱们做更全面的操控:

  • show 当告诉被显现给用户: 6 x 8 S时触发
  • click 当用户点击告诉时触发
  • close 当告诉被关闭时触发
  • error 当告诉发作过错的( K ) D s [ c D M时分触发

有了这样的工作监听,咱们就能够操控当用户点击告诉时, 跳转到对应的页面或许履行相关的事务逻辑.如下V z j I D I F 0代码所示:

Notification.reH j u r $ 4 e Y &questPermission( function(status) {
console.log M ` X G(status); // 仅当值为 "granted" 时显现告诉
var n = newP 2 { 9 M 5 F Z Notification("趣谈前端", {body: "从零建立一个CMJ , ;S全栈项目"}); // 显现告诉
n.onshow = function () {
// 消息显现时履行的逻辑
console.log(d v P e K'show')
}
n.click = function () {
// 消息被点击时履行的逻辑
history.push('/detail/1232432')
}
n.close = function () {
// 消息关闭时履行的逻辑
console.log('close')
}
});

当然咱们在运用前需求获取权限,方法也很简单,咱们能够在mdn上学习了解.

10. Batt/ { k g e. b Dry Status

Battery Status A} P & 8PI供给了有关体系充电级别的信息并供给了经过电p ] p & ~ * U池等级或许充电状况的改动提示5 s k R .用户的工作。 这个能够在设备电量低~ 3 V的时分调整运用的资源运用状况，或许| I g s q n在电池用尽前保存运用中的修正以防数据丢失。

之前的版本中BatN L E S – p S *tery Status API供给了几个工作监听函数来监听电量的改动以及监听设备是否充S D 3 I e D !电,可是笔者看文档时这些api都现已废弃,如下:

  • chargingchange 监听设别是否充电
  • levelchange 监听电量充电等级
  • chargingtimeM : b z U ? r t /change 充电时间改动
  • dischargingtimechange 放电时间改动

尽管以上几= % 7个看似有用的api现已被弃用,可是笔者亲测谷歌仍~ X d v是能够正常运用的,可是为了让自己代码更可靠,咱们能够用其他方法代替,比方用定时器定时] , l 8 – a z P去检测电量状S 0 j Y L v x !况,进而对用户做出不同的提示.

接下来咱们看看根本的用法:

navigator.getBattery().thv M C : X  6 1en(function(battery) {
console.log("是否在充电? " + () u 6 m f 7 8 z zbattery.charging ?1 @ U b Z U m "是" : "否"));
console.log($ % l V F A y"电量等级: " + battery.level * 100 + "%");
console.log("充电时间: " + battery.chargingTime + " s"- $ K 6);
cW 3 j g 1 konsole.log("放电时间: " + battery.d5 H + X 8 . e 3ischargingTO . % Lime + "s");
});

咱们能够a g B s 3经过getBattery拿到设备电池信息,这个api十分有用,比方咱们能够在用户电量缺乏时禁用网站动画或许停用一些耗时使命k / B,亦或许是对用户做恰h & 当的提示,改动网站颜色等,对于webapp中播放视频或许直播时,咱们也能I F g h 6 b K够用css画一个电量条,当电量告急时提示用户.作为一个优异的网站体会师,这一块仍是不容忽视的.

参阅文献

  • ECMAScript 6 入门 – 阮一峰
  • MDN web English docs

最终

假] @ X @ O D如想学习更多H5游戏, webpack，node，F r 8 T 7gulp，css3，jaC Y Nvascript，nodeJS，canvb ~ i n W vas数据可视化等前端知识和实战，欢迎在公号《趣谈前端》加入咱们的技能P y 1 w J群一同学习评论，一起探究前端的鸿沟。

几个非常有意思的javascript知识点总结

更E m 4 _多引荐

  • 前端进阶之从零到一完成单向 & 双向链表
  • 微前端架构初探以及我的前端技能盘点
  • 浏览器缓存库规划总结（localStorage/inW ) Z CdexedDB）
  • 运用nodeJs开发自己的图床运用
  • 根据nodeJS从0到1完成一个CMS全栈( r ) r P L C w项目（上）
  • 根据nodeJS从0到1完* F o成一个CMS全栈项目（中）（含源码）
  • CMS全栈项目之Vue和React篇（下）（含源码）
  • 5分钟教你用nodeJS手写一个mock数据服务器
  • 从零到一教你根据vue开发一个组件库
  • 从0到1教你建立前3 v ^ B k E 6 0端团队的组L + Z G x b件体系（高档进阶d J ! 5必备）
  • 10分钟教你手写8个常用的自定义hooks
  • 《完全掌握redux》之开发一个使命办理平台（上）
  • 15分钟带你了解前端工程师必知的javascript规划形式(附具体思维导图和源码4 0 e ) ] +)
  • 一张图教你快速玩转vue-cli3
  • 《前端实战总结》之运用postMessage完成可插拔的跨域谈天机器人