Действительно ли эти веб-API действительно полезны? Не спрашивайте, просто спросите 🈶

В этой статье перечислены некоторые из менее распространенныхWeb API, контента больше, поэтому контента про совместимость в этой статье не будет, можете проверить сами. Следующие кейсы можно максимально сопоставить с анимацией, чтобы не было скучно, но если содержание неправильное, пожалуйста, сбрызните или поправьте👌

список методов

1. querySelector(запрос элемента вниз, вернуть один)
2. querySelectorAll(запрос на элемент вниз, возвращает несколько)
3. closest(элементный запрос)
4. dataset(Получить элемент с помощью "data-" для коллекции атрибутов)
5. URLSearchParams(параметр запроса)
6. hidden(скрытый элемент)
7. contenteditable(делает элемент редактируемым)
8. spellCheck(проверьте пиньинь)
9. classList(контроллер имени класса)
10. getBoundingClientRect(детали структуры пространства элементов)
11. contains(судя о том, включен ли указанный элемент)
12. online state(статус сети)
13. battery state(заряд батареи)
14. vibration(устройство вибрирует)
15. page visibility(видимость страницы)
16. deviceOrientation(гироскоп)
17. toDataUrl(Поворот содержимого холстаbase64)
18. customEvent(настраиваемое событие)
19. notification(уведомление на рабочем столе)
20. fullScreen(полноэкранный)
21. orientation(ориентация экрана)

Разбить один за другим

1. querySelector

Все9102лет, до сих пор используюgetElementById😭

Получить соответствующий элемент в указанном элементеcssЭлементы селекторов:

// 作用在document
document.querySelector("#nav"); // 获取文档中id="nav"的元素
document.querySelector(".nav"); // 获取文档中class="nav"的元素
document.querySelector("#nav li:first-child"); // 获取文档中id="nav"下面的第一个li元素

// 也可以作用在其他元素
let nav = dodocument.querySelector("#nav");
nav.querySelector("li"); // 如果有多个li的话，返回第一个li

Примечание: В любом случае возвращается только один элемент, если элементов несколько, возвращается только первый ✅

2. querySelectorAll

Получить соответствующий элемент в указанном элементеcssВсе элементы селектора:

let list = document.querySelectorAll("li");  // NodeList(2) [li, li] 这里假设返回2个

Примечание. Возвращаемое значение представляет собой массив, подобный массиву, который можно использовать сforEach(некоторые браузеры нельзя использовать, рекомендуется переключить), но нельзя использоватьfilter,mapПодождите, нужно конвертировать:

Array.from(list).map();

3. closest

иquerySelectorВместо этого элемент можно запрашивать вверх, то есть можно запрашивать родительский элемент:

document.querySelector("li").closest("#nav");

4. dataset

Как и в родном апплете WeChat, вы можете получать теги с помощью ""data-" коллекция свойств с префиксом:

<p data-name="蜘蛛侠" data-age="16"></p>

document.querySelector("p").dataset; // {name: "蜘蛛侠", age: "16"}

Примечание. Хотя вы можете использоватьgetAttributeМетод получает любое значение атрибута, но природа другая. Это проблема спецификации разработки. Все пользовательские атрибуты должны быть добавлены.data-Приставка О ✅

5. URLSearchParams

Предположим, что параметр URL-адреса браузера — «?name=Spiderman&age=16».

new URLSearchParams(location.search).get("name"); // 蜘蛛侠

6. hidden

ЭтоhtmlАтрибут, указывающий, является ли элемент скрытым, следует производительностьcssизdisplay: noneПоследовательный:

<div hidden>我被隐藏了</div>

document.querySelector("div").hidden = true / false;

7. contenteditable

Вы можете сделать элемент редактируемым пользователем:

<p contenteditable>我是P元素，但是我也可以被编辑</p>

Эффект следующий:

Если за этим свойством следуетstyleВстречи с лейблами приводят к очень замечательной истории:Contenteditable и user-modify по-прежнему могут воспроизводиться так 🌚

8. spellcheck

такжеhtmlАтрибут, указывающий, проверяется ли входное содержимое на английское правописание:

<!-- 默认就是true，可省略 -->
<textarea spellcheck="true"></textarea>

Эффект следующий:

Настройка не проверяет:

<textarea spellcheck="false"></textarea>

Эффект следующий:

9. classList

Это объект, который инкапсулирует ряд методов для управления именами классов элементов:

<p class="title"></p>

let elem = document.querySelector("p");

// 增加类名
elem.classList.add("title-new"); // "title title-new"

// 删除类名
elem.classList.remove("title"); // "title-new"

// 切换类名（有则删、无则增，常用于一些切换操作，如显示/隐藏）
elem.classList.toggle("title"); // "title-new title"

// 替换类名
elem.classList.replace("title", "title-old"); // "title-new title-old"

// 是否包含指定类名
elem.classList.contains("title"); // false

10. getBoundingClientRect

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

elem.getBoundingClientRect();

// 返回
{
  x: 604.875,
  y: 1312,
  width: 701.625,
  height: 31,
  top: 1312,
  right: 1306.5,
  bottom: 1343,
  left: 604.875
}

11. contains

Вы можете определить, содержит ли указанный элемент указанный дочерний элемент:

<div>
  <p></p>
</div>

document.querySelector("div").contains(document.querySelector("p")); // true

12. online state

Следите за текущими изменениями состояния сети, а затем выполните соответствующий метод:

window.addEventListener("online", xxx);

window.addEventListener("offline", () => {
  alert("你断网啦！");
});

Эффект на стороне ПК выглядит следующим образом:

Мобильный эффект заключается в следующем:

Сценарий использования: Подскажите пользователю, что сеть отключена, а всплывающее окно напугает пользователя ✅

13. battery state

Получить состояние батареи устройства:

navigator.getBattery().then(battery => console.log(battery));

// 返回
{
  charging, // 是否在充电
  chargingTime, // 充满电所需时间
  dischargingTime, // 当前电量可使用时间
  level, 剩余电量

  onchargingchange, // 监听充电状态变化
  onchargingtimechange, // 监听充满电所需时间变化
  ondischargingtimechange, // 监听当前电量可使用时间变化
  onlevelchange // 监听电量变化
}

Сценарий использования: сообщение пользователю о том, что аккумулятор полностью заряжен, или для того, чтобы пользователь чувствовал себя в безопасности, уровень заряда аккумулятора ниже99%Когда придет время, всплывающее окно подскажет «пора заряжать» ✅

14. vibration

Хи-хи, заставь устройство вибрировать:

// 震动一次
navigator.vibrate(100);

// 连续震动，震动200ms、暂停100ms、震动300ms
navigator.vibrate([200, 100, 300]);

Эффект такой: извините, телефон приходится держать собственной рукой, чтобы его почувствовать;

Сценарии использования: обеспечение сенсорной обратной связи посредством вибрации, например непрерывной, когда к экрану не прикасались слишком долго.震动Напомнить пользователям ✅

15. page visibility

Как следует из названия, этоAPIиспользуется для отслеживания изменений видимости страницы, вPC端Переключение панели вкладок, минимизация сработает, в移动端При переходе программы в фоновый режим она сработает Проще говоря страница исчезнет🤦‍♂️

document.addEventListener("visibilitychange", () => {
  console.log(`页面可见性：${document.visibilityState}`);
});

Эффект на стороне ПК выглядит следующим образом:

Мобильный эффект заключается в следующем:

Сценарий использования: Когда программа переходит в фоновый режим, если в данный момент воспроизводится видео или выполняется какая-то анимация, вы можете сначала поставить ее на паузу ✅

16. deviceOrientation

Гироскоп, который является ориентацией устройства, также известного как гравитационное зондирование,APIсуществуетIOSРешение сбоя на устройстве — изменить соглашение о доменном имени наhttps;

Слева направо идутalpha,beta,gamma;

window.addEventListener("deviceorientation", event => {
  let {
    alpha,
    beta,
    gamma
  } = event;

  console.log(`alpha：${alpha}`);
  console.log(`beta：${beta}`);
  console.log(`gamma：${gamma}`);
});

Действие мобильного терминала заключается в следующем (мобильный телефон в это время постоянно вращается):

Сценарий использования: Некоторые элементы на странице должны двигаться в соответствии с движением мобильного телефона для достижения эффекта параллакса, например, когда Король Славы входит в игровой интерфейс, фоновое изображение мобильного телефона будет двигаться вместе с Это.

17. toDataURL

этоcanvasизAPI, роль состоит в том, чтобы преобразовать содержимое холста вbase64адрес изображения;

let canvas = document.querySelector("canvas");
let context = canvas.getContext("2d");

// 画东西
...

let url = canvas.toDataURL("image/png"); // 将画布内容转换成base64地址

использоватьa标签При загрузке изображения ссылка на изображение является междоменной (изображение является моим аватаром Nuggets), и загрузка не может быть выполнена, но выполняется предварительный просмотр изображения:

<img src="xxx">

<button>
  <a href="xxx" download="avatar">下载图片</a>
</button>

Эффект следующий:

Это можно решить, инкапсулировав следующий код ✅

const downloadImage = (url, name) => {
  // 实例化画布
  let canvas = document.createElement("canvas");
  let context = canvas.getContext("2d");

  // 实例化一个图片对象
  let image = new Image();
  image.crossOrigin = "Anonymous";
  image.src = url;

  // 当图片加载完毕
  image.onload = () => {
    // 将图片画在画布上
    canvas.height = image.height;
    canvas.width = image.width;
    context.drawImage(image, 0, 0);

    // 将画布的内容转换成base64地址
    let dataURL = canvas.toDataURL("image/png");

    // 创建a标签模拟点击进行下载
    let a = document.createElement("a");
    a.hidden = true;
    a.href = dataURL;
    a.download = name;

    document.body.appendChild(a);
    a.click();
  }
}

Эффект следующий:

или изменить текущийDOMПреобразуйте его в изображение для скачивания, которое часто используется для создания постеров:html2canvas

18. customEvent

настраиваемые события, такие какvueвнутриonиemitТакой же;

Прослушивание пользовательских событий:

window.addEventListener("follow", event => {
  console.log(event.detail); // 输出 {name: "前端宇宙情报局"}
});

Отправка пользовательских событий:

window.dispatchEvent(new CustomEvent("follow", {
  detail: {
    name: "前端宇宙情报局"
  }
}));

19. notification

Уведомления на рабочем столе на стороне ПК, такие как WeChat на веб-странице, при получении сообщения в правом нижнем углу появится уведомление (хотя вы сворачиваете браузер), потому что это уведомление не зависит от браузера и является родным контроль системы;

const notice = new Notification("前端宇宙情报局", {
  body: "这20个不常用的Web API真的有用吗?，别问，问就是有用🈶",
  icon: "我的掘金头像",
  data: {
    url: "https://www.baidu.com"
  }
});

// 点击回调
notice.onclick = () => {
  window.open(notice.data.url); // 当用户点击通知时，在浏览器打开百度网站
}

Эффект следующий:

Примечание: Если вы хотите успешно активировать уведомление, вы должны сначала авторизовать пользователя ✅

Notification.requestPermission(prem => {
  prem == "granted" // 同意
  prem == "denied" // 拒绝
})

Итак, сделайте запрос пользователю перед вызовом:

let permission = Notification.permission;

if (permission == "granted") {
  // 已同意，开始发送通知
  ...
} else if (permission == "denied") {
  // 不同意，发不了咯
} else {
  // 其他状态，可以重新发送授权提示
  Notification.requestPermission();
}

20. fullScreen

Это полноэкранный режим? Я просто использовал его для предыдущего проекта, его можно использовать не только вdocumentElementтакже может воздействовать на указанный элемент;

/**
 * @method launchFullScreen 开启全屏
 * @param {Object} elem = document.documentElement 作用的元素
 */
const launchFullScreen = (elem = document.documentElement) => {
  if(elem.requestFullScreen) {
    elem.requestFullScreen();
  } else if(elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if(elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  }
}

работа надdocumentElementНа нем нечего вводить, он эквивалентенF11Включить полноэкранный режим:

Итак, какое влияние это окажет на указанный элемент?

Так же, как и рендеры, полный экран будет открыт напрямую, и будут отображаться только указанные элементы, а ширина и высота элементов заполняют весь экран ✅

При закрытии полного экрана следует отметить, что единое использованиеdocumentОбъект:

/**
 * @method exitFullScreen 关闭全屏
 */
const exitFullScreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

Сценарий использования: вам нужно позволить пользователю сосредоточиться на чем-то, например, на полном экране области редактирования кода✅

21. orientation

Он может отслеживать изменение направления вращения мобильного телефона пользователя;

 window.addEventListener("orientationchange", () => {
  document.body.innerHTML += `<p>屏幕旋转后的角度值：${window.orientation}</p>`;
}, false);

Эффект следующий:

также можно использоватьcssМедиа-запросы для:

/* 竖屏时样式 */
@media all and (orientation: portrait) {
  body::after {
    content: "竖屏"
  }
}

/* 横屏时样式 */
@media all and (orientation: landscape) {
  body::after {
    content: "横屏"
  }
}

Сценарий использования: страница требует, чтобы пользователь включил горизонтальный экран, чтобы получить лучший опыт, например, страница активности в Glory of Kings😂

Наконец

Если вы считаете, что эта статья хороша, пожалуйста, не забудьте нажать赞и关注О~😊