веб-API, о котором вы (вероятно) не знаете

Введение

Наша работа неотделима от работы в Интернете. С развитием HTML5 увеличивается и веб-интерфейс, который поставляется вместе с браузером. В этой статье в основном выбрано несколько интересных и полезных веб-сайтов для представления, а также представлено их использование, полезность и поддержка браузерами.demo(Это действительно просто, стиль равен no~) Вот эти API:

• page lifecycle
• onlineState
• Используйте deviceOrientation, чтобы сделать куб, который вращается вместе с телефоном.
• battery status
• custom event
• Используйте execCommand для завершения простого форматированного текста

жизненный цикл страницы

представлять

Мы можем использовать document.visibitilityState, чтобы отслеживать видимость веб-страницы и не удаляется ли она, но это происходит и на мобильных телефонах, и на компьютерах.Например, страница давно не открывалась.В это время вы можете посмотрите его на вкладке браузера. Вы можете видеть содержимое, но вам нужно загрузить его, когда вы нажимаете на него. добавлен хром68freezeа такжеresumeСобытия, идеально описывающие различные этапы жизни веб-страницы от загрузки до выгрузки, включая остановку браузером фоновых процессов и высвобождение ресурсов. Различные события запускаются от одного этапа жизненного цикла к другому, такие как onfocus, onblur, onvisibilitychange, onfreeze и т. д. С помощью этих событий мы можем реагировать на изменение состояния веб-страницы. Конкретные учебные пособия рекомендуется посмотреть всем.Учебник Руан Ифэн Великий Бог.

Применение

window.addEventListener('blur',() => {})
window.addEventListener('visibilitychange',() => {
    // 通过这个方法来获取当前标签页在浏览器中的激活状态。
    switch(document.visibilityState){
        case'prerender': // 网页预渲染 但内容不可见
        case'hidden':    // 内容不可见 处于后台状态，最小化，或者锁屏状态
        case'visible':   // 内容可见
        case'unloaded':  // 文档被卸载
    }
});

полезность

Вы можете посмотреть это демо

Таким образом, целью этого API является реагирование на статус нашей веб-страницы. Например, наша страница воспроизводит видео или игру на веб-странице. Вы можете использовать этот API, чтобы реагировать соответствующим образом, приостанавливать видео и приостанавливать игра и т.д.

поддержка браузера

page visibilituState

состояние онлайн

Этот API очень прост, он предназначен для получения текущего состояния сети, и есть соответствующие события для реагирования на изменения состояния сети.

Применение

window.addEventListener('online',onlineHandler)
window.addEventListener('offline',offlineHandler)

полезность

Например, наш веб-сайт является видео-сайтом, когда сеть прерывается, мы можем реагировать через этот API и давать пользователям соответствующие подсказки и так далее.

поддержка браузера

Вибрация

Заставьте телефон вибрировать~~~ Ну, это так просто.

Применение

// 可以传入一个大于0的数字，表示让手机震动相应的时间长度，单位为ms
navigator.vibrate(100)
// 也可以传入一个包含数字的数组，比如下面这样就是代表震动300ms，暂停200ms，震动100ms，暂停400ms，震动100ms
navigator.vibrate([300,200,100,400,100])
// 也可以传入0或者一个全是0的数组，表示暂停震动
navigator.vibrate(0)

полезность

Он используется, чтобы дать пользователю подсказку, например, о сбое проверки данных.Конечно, вибрация - это нечто большее. Давайте расширим ее сами~~~

поддержка браузера

ориентация устройства (гироскоп)

Привязав событие для получения физической ориентации устройства, вы можете получить три значения:

• альфа: угол поворота устройства по оси Z

• бета: Угол поворота устройства по оси X

• гамма: угол поворота устройства по оси Y

Применение

window.addEventListener('deviceorientation',e => {
    console.log('Gamma:',e.gamma);
    console.log('Beta:',e.beta);
    console.log('Alpha:',e.Alpha);
})

полезность

Естественно, сценариев использования веб-VR относительно много. Это небольшая демонстрация, которую я написал

поддержка браузера

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('当前浏览器不支持~~~')
}

полезность

Он используется, чтобы тепло напомнить пользователю о текущем уровне заряда батареи~~~

поддержка браузера

Этот браузер имеет очень низкую поддержку. . . .

execCommand выполнить команду

При переключении HTML-документа в режим разработки он отображаетсяexeccommandметод, а затем мы можем использовать этот метод для выполнения некоторых команд, таких как копирование, вырезание, изменение выделенного текста полужирным шрифтом, курсивом, цветом фона, цветом, отступом, вставкой изображений и так далее.

Применение

Использование также очень просто. Вот несколько кратких представлений. Для подробного ознакомления вы можете перейти кMDNПроверьте это. Этот API принимает три параметра, первый — это команда, которую нужно выполнить, второй параметр mdn говорит, что логическое значение используется для указания, следует ли отображать пользовательский интерфейс, но я не проверял никакой разницы, третий параметр — использовать соответствующие параметры для передать команде.

// 一般不会直接去操作我们本身的HTML文档，可以去插入一个iframe然后通过contentDocument来获取、操作iframe中的HTML文档。
let iframe = document.createElement('ifram');
let doc = iframe.contentDocument;
// 首先要将HTML文档切换成设计模式
doc.designMode = 'on';

// 然后就可以使用execCommand 这个命令了；
// 执行复制命令，复制选中区域
doc.execCommand('copy')
// 剪切选中区域
doc.execCommand('cut')
// 全选
doc.execCommand('selectAll')
// 将选中文字变成粗体，同时接下来输入的文字也会成为粗体，
doc.execCommand('bold')
// 将选中文字变成斜体，同时接下来输入的文字也会成为斜体，
doc.execCommand('italic')
// 设置背景颜色，，比如设置背景色为红色，就传入 'red'即可
doc.execCommand('backColor',true,'red')

полезность

Я использовал эти команды, чтобы просто написать демонстрацию форматированного текста, вы можете посмотретьDemo, эффект следующий:

поддержка браузера

Пользовательское событие

Всем известно, как связаны различные события, но иногда этих событий недостаточно, такие проблемы могут решить пользовательские события.

Применение

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.

поддержка браузера

наконец

Позвольте мне сначала представить их. Веб-API становится все больше и больше. Конечно, каждый не может запомнить их все. Эта статья является лишь кратким введением. Есть много интересных и важных API, таких как:web components,service worker,genric sensorИ так далее, но над этим работает много людей, а документация относительно велика. Я считаю, что после прочтения этого вы, по крайней мере, знаете общее использование этих API.Если вам интересно понять использование, вы можете прочитать то, что я написал.demo, вы также можете заглянуть в документацию MDN, чтобы копнуть глубже.

Ссылаться на

• Документация MDN
• Блог Руан Ифэн
• веб-API-вы-не-знаете-видео-разговор
• www.zhangyunling.com/725.html
• Исходный код Omi WeElement