1.page lifecycle
chrome68添加了 freeze和 resume事件，来完善的描述一个网页从加载到卸载，包括浏览器停止后台进程，释放资源各种生命阶段。
从一个生命周期阶段到另外一个生命周期阶段会触发不同的事件，比如onfocus，onblur，onvisibilitychange，
onfreeze等等，通过这些事件我们可以响应网页状态的转换。
window.addEventListener('blur',() => {})
window.addEventListener('visibilitychange',() => {
// 通过这个方法来获取当前标签页在浏览器中的激活状态。
switch(document.visibilityState){
case'prerender': // 网页预渲染 但内容不可见
case'hidden': // 内容不可见 处于后台状态，最小化，或者锁屏状态
case'visible': // 内容可见
case'unloaded': // 文档被卸载
}
});
所以说，这个API的用处就是用来响应我们网页的状态，比如说我们的页面是在播放视频或者是一个网页的游戏，
你可以通过这个API来去做出对应的响应，暂停视频，游戏暂停等等。
2.online state（网络状态）
这个API就很简单了，就是获取当前的网络状态，同时也有对应的事件去响应网络状态的变化。
window.addEventListener('online',onlineHandler)
window.addEventListener('offline',offlineHandler)
用处
比如说我们的网站是视频网站，正在播放的时候，网络中断了，我们可以通过这个API去响应，给用户相应的提示等等。
3.Vibration（震动）
让手机震动~~~ 嗯，就这么简单。
// 可以传入一个大于0的数字，表示让手机震动相应的时间长度，单位为ms
navigator.vibrate(100)
// 也可以传入一个包含数字的数组，比如下面这样就是代表震动300ms，暂停200ms，震动100ms，暂停400ms，震动100ms
navigator.vibrate([300,200,100,400,100])
// 也可以传入0或者一个全是0的数组，表示暂停震动
navigator.vibrate(0)
用来给用户一个提示，比如说数据校验失败，
4.device orientation（陀螺仪）
通过绑定事件来获取设备的物理朝向，可以获取到三个数值，分别是：
alpha：设备沿着Z轴的旋转角度
beta：设备沿着X轴的旋转角度
gamma：设备沿着Y轴的旋转角度
window.addEventListener('deviceorientation',e => {
console.log('Gamma:',e.gamma);
console.log('Beta:',e.beta);
console.log('Alpha:',e.Alpha);
})
5.battery status 这个API就使用来获取当前的电池状态
// 首先去判断当前浏览器是否支持此API
if ('getBattery' in navigator) {
// 通过这个方法来获取battery对象
navigator.getBattery().then(battery => {
// battery 对象包括中含有四个属性
// charging 是否在充电
// level 剩余电量
// chargingTime 充满电所需事件
// dischargingTime 当前电量可使用时间
const { charging, level, chargingTime, dischargingTime } = battery;
// 同时可以给当前battery对象添加事件 对应的分别时充电状态变化 和 电量变化
battery.onchargingchange = ev => {
const { currentTarget } = ev;
const { charging } = currentTarget;
};
battery.onlevelchange = ev => {
const { currentTarget } = ev;
const { level } = ev;
}
})
} else {
alert('当前浏览器不支持~~~')
}
用来温馨的提示用户当前电量~~~
6.execCommand 执行命令
当将HTML文档切换成设计模式时，就会暴露出 execcommand 方法，然后我们可以通过使用这个方法来执行一些命令，
比如复制，剪切，修改选中文字粗体、斜体、背景色、颜色，缩进，插入图片等等等等。
let dom = document.querySelector('#app');
// 绑定事件， 传递过来的值可以通过ev.detail 来获取
dom.addEventListener('log-in',(ev) => {
const { detail } = ev;
console.log(detail); // hello
})
// 派发事件，需要传入两个参数，一个是事件类型，另外一个是一个对象，detail就是传递过去的值
dom.dispatchEvent(new CustomEvent('log-in',{
detail:'hello'
}))
绑定自定义事件，最近很火的框架Omi，其中的自定义事件就是基于customEvent实现的。
https://juejin.im/post/5c1606d9f265da613d7bf7a4 |
|
收藏
淘帖
踩
