10 WebAPI, которые открыли мне новый мир

внешний интерфейс JavaScript
10 WebAPI, которые открыли мне новый мир

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

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

Оригинальная ссылка:blog.bit SRC.IO/10-полезно-я…

Возможно, вы уже знаете и используете более популярныеWeb APIs(Web Worker,Fetchд.), но есть и менее популярныеAPI, которым лично я люблю пользоваться и рекомендую попробовать и вам.

Все описано в этой статьеWeb APIПримеры доступны наздесьоказаться:

1. Web Audio API

Web Audio API MDN

Web Audio APIпозволить вамWebРаботайте с аудиопотоком. Его можно использовать для добавления эффектов и фильтров к источникам звука в Интернете.

Источники звука могут поступать из<audio>, исходный файл видео/аудио или сетевой аудиопоток.

Давайте рассмотрим простой пример:

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - Audio </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div>
                    <audio controls src="./lovely.mp4" id="audio"></audio>
                </div>
                <div>
                    <button onclick="audioFromAudioFile.init()">Init</button>
                    <button onclick="audioFromAudioFile.play()">Play</button>
                    <button onclick="audioFromAudioFile.pause()">Pause</button>
                    <button onclick="audioFromAudioFile.stop()">Stop</button>
                </div>
                <div>
                    <span>Vol: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="3"
                            step="0.01" value="1" /></span>
                    <span>Pan: <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1"
                            max="1" step="0.01" value="0" /></span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const l = console.log
    let audioFromAudioFile = (function () {
        var audioContext
        var volNode
        var pannerNode
        var mediaSource

        function init() {
            l("Init")
            try {
                
                audioContext = new AudioContext()
                mediaSource = audioContext.createMediaElementSource(audio)
                volNode = audioContext.createGain()
                volNode.gain.value = 1
                pannerNode = new StereoPannerNode(audioContext, { pan: 0 })

                mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
                console.log(volNode)
            }
            catch (e) {
                error.innerHTML = "The Web Audio API is not supported in this device."
                error.classList.remove("close")
            }
        }
        function play() {
            audio.play()
        }

        function pause() {
            audio.pause()
        }

        function stop() {
            audio.stop()
        }

        function changeVolume() {
            volNode.gain.value = document.getElementById('vol').value
        }

        function changePan() {
            pannerNode.gain.value = tdocument.getElementById('panner').value
        }

        return {
            init,
            play,
            pause,
            stop,
            changePan,
            changeVolume
        }
    })()
</script>

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

Этот пример преобразует звук из<audio>элемент, переданныйAudioContext. Звуковые эффекты (такие как панорамирование) добавляются к источнику звука до того, как они будут добавлены к аудиовыходу (динамикам).

нажмитеInitкнопка позвонитinitфункция. Это создастAudioContextэкземпляр и установите его вaudioContext. Затем он создает медиа-источникcreateMediaElementSource(audio), передавая элемент audio в качестве источника звука.

createGainСоздать узел томаvolNode. Здесь мы регулируем громкость звука. Далее используйтеStereoPannerNodeУстановите эффект панорамирования. Наконец, подключите узел к источнику мультимедиа.

У нас есть ползунок для громкости и панорамирования, перетаскивание которого повлияет на громкость и панорамирование звука.

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

try it

2. Fullscreen API

Fullscreen API MDN

Fullscreen APIпозвольте намWeb appВключить полноэкранный режим в . Он позволяет выбирать элементы для просмотра в полноэкранном режиме. существуетAndroidтелефон, он удалит окно браузера иAndroidВерхняя строка состояния (где отображается состояние сети, состояние батареи и т. д.).

метод:

  • requestFullscreenОтображает выбранный элемент в полноэкранном режиме в системе, закрывая другие приложения, а также элементы браузера и системного пользовательского интерфейса.

  • exitFullscreenВыйдите из полноэкранного режима в обычный режим.

Давайте посмотрим на простой пример, где мы можем смотреть видео в полноэкранном режиме:

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - Fullscreen </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div> This API makes fullscreen-mode of our webpage possible. It lets you select the Element you want to
                    view in fullscreen-mode, then it shuts off the browsers window features like URL bar, the window
                    pane, and presents the Element to take the entire width and height of the system. In Android phones,
                    it will remove the browsers window and the Android UI where the network status, battery status are
                    displayed, and display the Element in full width of the Android system. </div>
                <div class="video-stage">
                    <video id="video" src="./lovely.mp4"></video>
                    <button onclick="toggle()">Toogle Fullscreen</button>
                </div>
                <div> This API makes fullscreen-mode of our webpage possible. It lets you select the Element you want to
                    view in fullscreen-mode, then it shuts off the browsers window features like URL bar, the window
                    pane, and presents the Element to take the entire width and height of the system. In Android phones,
                    it will remove the browsers window and the Android UI where the network status, battery status are
                    displayed, and display the Element in full width of the Android system. </div>
            </div>
        </div>
    </div>
</body>
<script>
    const l = console.log

    function toggle() {
        const videoStageEl = document.querySelector(".video-stage")
        console.log(videoStageEl.requestFullscreen)
        if (videoStageEl.requestFullscreen) {
            if (!document.fullscreenElement) {
                videoStageEl.requestFullscreen()
            }
            else {
                document.exitFullscreen()
            }
        } else {
            error.innerHTML = "Fullscreen API not supported in this device."
            error.classList.remove("close")
        }
    }
</script>

videoэлемент вdiv＃video-stageэлемент с кнопкойToggle Fullscreen.

когда мы нажимаемToggle Fullscreenкнопка, мы хотим сделать элементdiv#video-stageстановится полноэкранным.

посмотриtoggleЭта функция:

function toggle() {
    const videoStageEl = document.querySelector(".video-stage")
    if(!document.fullscreenElement)
        videoStageEl.requestFullscreen()
    else
        document.exitFullscreen()
}

Получатьdiv#video-stageэлемент и сохранить его экземпляр вvideoStageElначальство.

мы использовалиdocument.fullsreenElementСвойство может знать, находится ли элемент в полноэкранном режиме, если нет, вы можете вызватьvideoStageElВверхrequestFullscreen()способ сделатьdiv#video-stageЗахватите весь вид устройства.

Если нажать в полноэкранном режимеToggle Fullscreenкнопка, буду звонитьdocument.exitFullcreen(), возвращаясь к обычному виду.

try it

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

3. Web Speech API

Web Speech API MDN

Web Speech APIДавайте добавим возможности синтеза речи и распознавания речи в веб-приложение.

использовать этоAPI, мы сможем отдавать голосовые команды веб-приложению, как вAndroidчерез егоGoogle SpeechНравитсяWindowsиспользуется вCortanaТакой же.

Давайте рассмотрим простой пример. мы увидим, как использоватьWeb Speech APIРеализует преобразование текста в речь и речи в текст.

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div id="error" class="close"></div>
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - Text to Speech </div>
            <div class="web-api-card-body">
                <div>
                    <input placeholder="Enter text here" type="text" id="textToSpeech" />
                </div>
                <div>
                    <button onclick="speak()">Tap to Speak</button>
                </div>
            </div>
        </div>
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - Speech to Text </div>
            <div class="web-api-card-body">
                <div>
                    <textarea placeholder="Text will appear here when you start speeaking."
                        id="speechToText"></textarea>
                </div>
                <div>
                    <button onclick="tapToSpeak()">Tap and Speak into Mic</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>

    try {
        var speech = new SpeechSynthesisUtterance()
        var recognition = new SpeechRecognition()
    } catch (e) {
        error.innerHTML = "Web Speech API not supported in this device."
        error.classList.remove("close")
    }

    function speak() {
        speech.text = textToSpeech.value
        speech.volume = 1
        speech.rate = 1
        speech.pitch = 1
        alert(window.speechSynthesis)
        window.speechSynthesis.speak(speech)
    }

    function tapToSpeak() {
        recognition.onstart = function () { }

        recognition.onresult = function (event) {
            const curr = event.resultIndex
            const transcript = event.results[curr][0].transcript
            speechToText.value = transcript
        }

        recognition.onerror = function (ev) {
            console.error(ev)
        }

        recognition.start()
    }

</script>

первое демоDemo - Text to SpeechДемонстрирует возможность получать вводимый текст через простое поле ввода и выводить голос после нажатия кнопки.

посмотриspeakфункция:

function speak() {
    speech.text = textToSpeech.value
    speech.volume = 1
    speech.rate = 1
    speech.pitch = 1
    window.speechSynthesis.speak(speech)
}

он создает экземплярSpeechSynthesisUtterance()Объект, который преобразует текст, который мы вводим в поле ввода, в речь. Затем вызовите голосовой объектSpeechSynthesisизspeakфункция воспроизведения текста в поле ввода на наших динамиках.

второе демоDemo - Speech to TextДемонстрация распознавания речи. Мы нажимаем наTap and Speak into Micкнопку, говорите в микрофон, и слова, которые мы произносим, ​​переводятся в текст.

Tap and Speak into MicВызывается после нажатия кнопкиtapToSpeakфункция:

function tapToSpeak() {
    recognition.onstart = function () { }

    recognition.onresult = function (event) {
        const curr = event.resultIndex
        const transcript = event.results[curr][0].transcript
        speechToText.value = transcript
    }

    recognition.onerror = function (ev) {
        console.error(ev)
    }

    recognition.start()
}

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

Видно, что вonresultВ обратном вызове мы извлекаем текст и устанавливаем его в текстовую область. Поэтому, когда мы говорим в микрофон, они выводятся в текстовую область.

try it

Переводчик: моя когтеточка и компьютерChrome(V83) не может поддерживать этоAPI.

4. Bluetooth API

Bluetooth API MDN

Экспериментальная технология

Bluetooth APIПозволяет нам получить доступ к устройству Bluetooth с низким энергопотреблением на нашем телефоне и использовать его для обмена данными с веб-страницы на другом устройстве.

Представьте, что вы можете создать приложение веб-чата, которое может отправлять и получать сообщения с других телефонов через Bluetooth.

БазаAPIдаnavigator.bluetooth.requestDevice. Его вызов приведет к тому, что браузер предложит пользователю выбрать устройство, что позволит ему выбрать устройство или отменить запрос.

navigator.bluetooth.requestDeviceТребуется объект. Этот объект определяет фильтр, используемый для возврата устройств Bluetooth, соответствующих фильтру.

Давайте посмотрим на простую демонстрацию. Эта демонстрация будет использоватьnavigator.bluetooth.requestDeviceAPIПолучите базовую информацию об устройстве с устройства BLE.

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - Bluetooth </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div>
                    <div>Device Name: <span id="dname"></span></div>
                    <div>Device ID: <span id="did"></span></div>
                    <div>Device Connected: <span id="dconnected"></span></div>
                </div>
                <div>
                    <button onclick="bluetoothAction()">Get BLE Device</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function bluetoothAction() {
        if (navigator.bluetooth) {
            navigator.bluetooth.requestDevice({
                acceptAllDevices: true
            }).then(device => {
                dname.innerHTML = device.name
                did.innerHTML = device.id
                dconnected.innerHTML = device.connected
            }).catch(err => {
                error.innerHTML = "Oh my!! Something went wrong."
                error.classList.remove("close")
            })
        } else {
            error.innerHTML = "Bluetooth is not supported."
            error.classList.remove("close")
        }
    }
</script>

Отобразится информация об устройстве. Нажмите кнопкуGet BLE Deviceтогда позвониbluetoothActionфункция.

function bluetoothAction() {
    if (navigator.bluetooth) {
        navigator.bluetooth.requestDevice({
            acceptAllDevices: true
        }).then(device => {
            dname.innerHTML = device.name
            did.innerHTML = device.id
            dconnected.innerHTML = device.connected
        }).catch(err => {
            
            error.innerHTML = "Oh my!! Something went wrong."
            error.classList.remove("close")
        })
    } else {
        error.innerHTML = "Bluetooth is not supported."
        error.classList.remove("close")
    }
}

ДолженbluetoothActionвызов функцииnavigator.bluetooth.requestDeviceAPI, параметры установлены наacceptAllDevices: true, что заставит его сканировать и составить список всех ближайших устройств с поддержкой Bluetooth. он возвращаетPromise.

try it

Примечание переводчика: на компьютереChromeПроверено в браузере, поддерживает API.

5. Channel Messaging API

Channel Messaging API MDN

Channel Messaging APIПозволяет запускать два разных сценария в разных контекстах браузера одного и того же документа (например, дваiframeили тело документа иiframe, или обаworker) для прямой связи с использованием одного порта на каждом конце (port) по двусторонним каналам (channel) для передачи сообщений друг другу. .

Сначала создайтеMessageChannelПример:

new MessageChannel()

Это вернетMessagePortОбъект (канал связи).

Затем вы можете пройтиMessagePort.port1илиMessageChannel.port2Установите порт.

создавать экземплярMessageChannelКонтекст будет использоватьMessagePort.port1, другой контекст будет использоватьMessagePort.port2. Затем вы можете использоватьpostMessage APIСообщение доставлено.

Каждый контекст браузера используетMessage.onmessageпрослушивать сообщения и использовать событияdataсвойство для получения содержимого сообщения.

Давайте посмотрим на простой пример, где мы можем использоватьMessageChannelв документации иiframeОтправить текст между.

Примечание переводчика: в этой демонстрации есть ошибка в коде в исходном тексте.Переводчик изменил код, и тест может работать нормально.

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - MessageChannel </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div id="displayMsg">
                </div>
                <div>
                    <input id="input" type="text" placeholder="Send message to iframe" />
                </div>
                <div>
                    <button onclick="sendMsg()">Send Msg</button>
                </div>
                <div>
                    <iframe id="iframe" src="./iframe.content.html"></iframe>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    try {
        var channel = new MessageChannel()
        var port1 = channel.port1
    } catch (e) {
        error.innerHTML = "MessageChannel API not supported in this device."
        error.classList.remove("close")
    }

    iframe.addEventListener("load", onLoad)

    function onLoad() {
        port1.onmessage = onMessage
        iframe.contentWindow.postMessage("load", '*', [channel.port2])
    }

    function onMessage(e) {
        const newHTML = "<div>" + e.data + "</div>"
        displayMsg.innerHTML = displayMsg.innerHTML + newHTML
    }

    function sendMsg() {
        port1.postMessage(input.value)
    }

</script>

Уведомлениеiframeтег, мы загрузилиiframe.content.htmlдокумент. Кнопки и текст — это то, что мы печатаем и отправляемiframeКуда отправлять сообщения.

const channel = new MessageChannel()
const port1 = channel.port1
iframe.addEventListener("load", onLoad)
function onLoad() {
    port1.onmessage = onMessage
    iframe.contentWindow.postMessage("load", '*', [channel.port2])
}

function onMessage(e) {
    const newHTML = "<div>" + e.data + "</div>"
    displayMsg.innerHTML = displayMsg.innerHTML + newHTML
}

function sendMsg() {
    port1.postMessage(input.value)
}

мы инициализировалиMessageChannelиport1. мы кiframeДобавленloadмонитор. Мы здесьport1зарегистрированonmessageслушай, а потом используйpostMessageAPIотправить сообщениеiframe. Видетьport2отправляется вiframe.

Давайте взглянемiframeизiframe.content.html:

<body>
    <div class="web-api-cnt">

        <div class="web-api-card">
            <div class="web-api-card-head">
                Running inside an <i>iframe</i>
            </div>
            <div class="web-api-card-body">
                <div id="iframeDisplayMsg">
                </div>
                <div>
                    <input placeholder="Type message.." id="iframeInput" />
                </div>

                <div>
                    <button onclick="sendMsgiframe()">Send Msg from <i>iframe</i></button>
                </div>

            </div>
        </div>

    </div>
</body>

<script>
    var port2
    window.addEventListener("message", function(e) {
        port2 = e.ports[0]
        port2.onmessage = onMessage
    })

    function onMessage(e) {
        const newHTML = "<div>"+e.data+"</div>"
        iframeDisplayMsg.innerHTML = iframeDisplayMsg.innerHTML + newHTML
    }

    function sendMsgiframe(){
        port2.postMessage(iframeInput.value)
    }
</script>

Здесь мы регистрируем обработчик события сообщения. мы извлекаемport2и установить на негоonmessageФункция обработчика событий. Теперь мы можем начать сiframeПолучает сообщение и отправляет его в родительский документ.

try it

Примечание переводчика: эта попытка не работает, вы можете скопировать приведенный выше код и попробовать его локально.

6. Vibration API

Vibration API MDN

Большинство современных мобильных устройств включают аппаратное обеспечение вибрации, которое позволяет программному коду обеспечивать физическую обратную связь с пользователем, встряхивая устройство.Vibration APIзаWebПриложение предоставляет возможность доступа к этому оборудованию (при его наличии), а если устройство не поддерживает эту функцию, то ничего не делает.

navigator.vibrate(pattern)контроль вибрации,patternпредставляет собой одно число или массив чисел, описывающих режим вибрации.

navigator.vibrate(200);
navigator.vibrate([200]);

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

navigator.vibrate（[200，300，400]）

Это заставит устройство вибрировать в течение 200 мс, сделать паузу на 300 мс, вибрировать на 400 мс, а затем остановиться.

можно сделать, передав 0,[],[0,0,0](массив всех нулей), чтобы остановить вибрацию.

Давайте посмотрим на простую демонстрацию:

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">

        <div class="web-api-card">
            <div class="web-api-card-head">
                Demo - Vibration
            </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div>
                    <input id="vibTime" type="number" placeholder="Vibration time" />
                </div>

                <div>
                    <button onclick="vibrate()">Vibrate</button>
                </div>

            </div>
        </div>

    </div>
</body>

<script>
    if(navigator.vibrate) {
        function vibrate() {
            const time = vibTime.value
            if(time != "")
                navigator.vibrate(time)
        }
    } else {
        error.innerHTML = "Vibrate API not supported in this device."
        error.classList.remove("close")        
    }
</script>

У нас есть ввод и кнопка. Введите продолжительность вибрации в поле ввода и нажмите кнопку. Устройство будет вибрировать в течение введенного времени.

try it

Примечание переводчика: отлично протестировано на телефонах Android.

7. Broadcast Channel API

Broadcast Channel API MDN

Broadcast Channel APIПозволяет обмениваться сообщениями или данными из разных контекстов просмотра под одним и тем же источником. Контекст просмотра может быть окном,iframeЖдать.

BroadcastChannelКлассы используются для создания или присоединения к каналам.

const politicsChannel = new BroadcastChannel("politics")

politicsбудет названием канала. любой проходpoliticsинициализироватьBroadcastChannelКонтекст конструктора присоединится к каналу, он будет получать любые сообщения, отправленные по этому каналу, и может отправлять сообщения на этот канал.

Если это первое использованиеBroadcastChannelконструктор,politicsсоздаст канал.

Чтобы опубликовать на канал, используйтеBroadcastChannel.postMessageAPI

Чтобы подписаться на канал (прослушать сообщения), используйте кнопкуBroadcastChannel.onmessageсобытие.

Чтобы продемонстрировать использование радиоканалов, я создал простое приложение для чата:

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - BroadcastChannel </div>
            <div class="web-api-card-body">
                <div class="page-info">Open this page in another <i>tab</i>, <i>window</i> or <i>iframe</i> to chat with
                    them.</div>
                <div id="error" class="close"></div>
                <div id="displayMsg" style="font-size:19px;text-align:left;">
                </div>
                <div class="chatArea">
                    <input id="input" type="text" placeholder="Type your message" />
                    <button onclick="sendMsg()">Send Msg to Channel</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const l = console.log;
    try {
        var politicsChannel = new BroadcastChannel("politics")
        politicsChannel.onmessage = onMessage
        var userId = Date.now()
    } catch (e) {
        error.innerHTML = "BroadcastChannel API not supported in this device."
        error.classList.remove("close")
    }

    input.addEventListener("keydown", (e) => {
        if (e.keyCode === 13 && e.target.value.trim().length > 0) {
            sendMsg()
        }
    })

    function onMessage(e) {
        const { msg, id } = e.data
        const newHTML = "<div class='chat-msg'><span><i>" + id + "</i>: " + msg + "</span></div>"
        displayMsg.innerHTML = displayMsg.innerHTML + newHTML
        displayMsg.scrollTop = displayMsg.scrollHeight
    }

    function sendMsg() {
        politicsChannel.postMessage({ msg: input.value, id: userId })

        const newHTML = "<div class='chat-msg'><span><i>Me</i>: " + input.value + "</span></div>"
        displayMsg.innerHTML = displayMsg.innerHTML + newHTML

        input.value = ""

        displayMsg.scrollTop = displayMsg.scrollHeight
    }  
</script>

инициализированpoliticsChannel, И вpoliticsChannelустановитьonmessageПрослушиватель событий, чтобы он мог получать и отображать сообщения.

При нажатии на кнопку будет вызыватьсяsendMsgфункция. это проходитBroadcastChannel#postMessageAPIотправить сообщениеpoliticsChannel. Инициализировать тот же скриптtabСтраница,iframeилиworkerбудет получать сообщения, отправленные отсюда, поэтому страница может получать сообщения из других контекстов.

Try it

8. Payment Request API

Payment Request API MDN

Payment Request APIПредоставляет возможность выбора способа оплаты товаров и услуг.

ДолженAPIПредоставляет согласованный способ предоставления сведений о платеже различным продавцам, не требуя от пользователя повторного ввода данных.

Он предоставляет продавцам такую ​​информацию, как платежный адрес, адрес доставки, данные карты и многое другое.

Уведомление:этоAPIПлатежные реквизиты пользователя предоставляются, но новых способов оплаты не будет.

Давайте посмотрим демонстрацию, как использовать запрос платежаAPIДемо для приема оплаты кредитной картой:

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - Credit Card Payment </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div>
                    <button onclick="buy()">Buy</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const networks = ["visa", "amex"]
    const types = ["debit", "credit"]

    const supportedInstruments = [
        {
            supportedMethods: "basic-card",
            data: {
                supportedNetworks: networks,
                supportedTypes: types
            }
        }
    ]

    const details = {
        total: {
            label: "Total",
            amount: {
                currency: "USD",
                value: "100"
            }
        },
        displayItems: [
            {
                label: "Item 1",
                amount: {
                    currency: "USD",
                    value: "50"
                }
            },
            {
                label: "Item 2",
                amount: {
                    currency: "USD",
                    value: "50"
                }
            },
        ]
    }

    try {
        var paymentRequest = new PaymentRequest(supportedInstruments, details)
    } catch (e) {
        error.innerHTML = "PaymentRequest API not supported in this device."
        error.classList.remove("close")
    }

    function buy() {
        paymentRequest.show().then(response => {
            console.log(response)
        })
    }
</script>

networks,typesиsupportedTypesОба описывают способы оплаты.detailsПеречисляет наши покупки и общие расходы.

ПостроитьPaymentRequestпример,paymentRequest.show()Платежный интерфейс отобразится в браузере. И вPromiseДанные пользователя обрабатываются при успешном обратном вызове.

они используютPayment APIМного конфигураций для совершения платежей, по крайней мере на примерах выше, мы виделиPayment Request APIкак пользоваться и работать.

try it

Примечание переводчика: я проверял, но не прошел весь процесс, в конце концов, я решил не платить~

9. Resize Observer API

Resize Observer API MDN

Resize Observer APIПредоставляет способ уведомить наблюдателя любым способом об изменении размера элемента, регистрирующего наблюдателя.

ResizeObserverКласс предоставляет наблюдателя, который будетresizeпозвонил на мероприятие.

const resizeObserver = new ResizeObserver(entries => {
    for(const entry of entries) {
        if(entry.contentBoxSize)
            consoleo.log("element re-sized")
    }
})
resizeObserver.observe(document.querySelector("div"))

всякий раз, когда корректируетсяdivразмер, будет печатать на консоли"element re-sized".

Давайте посмотрим, как использоватьResize Observer APIПример:

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">

        <div class="web-api-card">
            <div class="web-api-card-head">
                Demo - ResizeObserver
            </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div id="stat"></div>

                <div id="resizeBoxCnt">
                    <div id="resizeBox"></div>
                </div>

                <div>
                    <span>Resize Width:<input onchange="resizeWidth(this.value)" type="range" min="0" max="100" value="0" /></span>
                </div>

                <div>
                    <span>Resize Height:<input onchange="resizeHeight(this.value)" type="range" min="0" max="100" value="0" /></span>
                </div>

            </div>
        </div>

    </div>
</body>

<script>
    try {
        var resizeObserver = new ResizeObserver(entries => {
            for(const entry of entries) {
                    stat.innerHTML = "Box re-sized. Height:" + entry.target.style.height + " - Width:" + entry.target.style.width
            }
        })
        resizeObserver.observe(resizeBox)
    } catch(e) {
        error.innerHTML = "ResizeObserver API not supported in this device."
        error.classList.remove("close")        
    }

    function resizeWidth(e) {
        resizeBox.style.width = `${e}px`
    }

    function resizeHeight(e) {
        resizeBox.style.height = `${e}px`
    }
</script>

У нас есть ползунки диапазона здесь. Если мы их сдвинем, они изменятсяidv#resizeBoxширина и высота. мы вdiv#resizeBoxзарегистрирован наResizeObserverНаблюдатель, указывающий, что в сообщении указано, что размер окна был изменен, и текущие значения его высоты и ширины.

Попробуйте сдвинуть ползунок диапазона, и вы увидитеdiv#resizeBoxИзменения ширины и высоты, кроме того, мы также увидимdiv＃statинформация отображается в поле.

try it

10. Pointer Lock API

Pointer Lock API MDN

Pointer Lock APIПолезно для приложений, которые требуют много действий мыши для управления движением, поворотом объектов и изменением элементов. Особенно важно для высоконаглядных приложений, таких как те, которые используют перспективу от первого лица, а также 3D-представления и моделирование.

метод:

  • requestPointerLock: этот метод удалит мышь из браузера и отправит события состояния мыши. Это будет продолжаться до вызоваdocument.exitPointerLockдо того как.
  • document.exitPointerLock:этоAPIСнимите блокировку указателя мыши и восстановите курсор мыши.

Давайте посмотрим на пример:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            background-color: green;
            width: 100%;
            height: 400px;
            position: relative;
        }

        #ball {
            border-radius: 50%;
            background-color: red;
            width: 50px;
            height: 50px;
            position: absolute;
        }
    </style>
</head>

<body>
    <header>
        <h2>Web APIs<h2>
    </header>
    <div class="web-api-cnt">
        <div class="web-api-card">
            <div class="web-api-card-head"> Demo - PointerLock </div>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div id="box">
                    <div id="ball"></div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const l = console.log
    box.addEventListener("click", () => {
        if (box.requestPointerLock)
            box.requestPointerLock()
        else {
            error.innerHTML = "PointerLock API not supported in this device."
            error.classList.remove("close")
        }
    })

    document.addEventListener("pointerlockchange", (e) => {
        document.addEventListener("mousemove", (e) => {
            const { movementX, movementY } = e
            ball.style.top = movementX + "px"
            ball.style.left = movementY + "px"
        })
    })
</script>

</html>

существуетdiv#boxу нас естьdiv#boxиdiv#ball.

мы вdiv#boxустановитьclickсобытие, которое вызывается при нажатииrequestPointerLock(), что приведет к исчезновению курсора.

PointerLockсуществует одинpointerlockchangeпрослушиватель событий. Это событие запускается при изменении состояния блокировки указателя. В обратном вызове мы добавляем это кmousemoveсобытие. Его обратный вызов запускается, когда мышь перемещается по текущей вкладке браузера. В этом обратном вызове мы используем его для получения текущей позиции X и Y мыши. Используя эту информацию, мы можем установитьdiv#ballизtopиleftstyle, поэтому при движении мыши мы видим танцующий мячdiv#ball, поэтому изменитеtopиleftзначение, положение шарика не меняется).

Два новых параметра для событий мыши -movementXиmovementYОбеспечивает изменения положения мыши. Когда блокировка указателя активирована, нормальныйMouseEventАтрибутыclientX, clientY, screenX, иscreenY, остается, как если бы мышь не двигалась.

try it

Примечание переводчика: в этой демонстрации есть проблема, поэтому вы не можете ее попробовать. Вы можете скопировать приведенный выше код и попробовать локально.

Суммировать

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

Что ж, если вы видите это, значит, это настоящая любовь. не могли бы вы дать это мнеGithubДобавьте звезду.

Если есть какие-либо неуместные переводы, пожалуйста, потерпите меня, и добро пожаловать, чтобы исправить их в области комментариев ~

Категории