Разброс концептуальных заметок

События

Прослушиватель событий — это функция обратного вызова, которая будет выполняться браузером при возникновении указанного события. Существуют три фазы распространения событий, которые происходят последовательно: захват («вниз» DOM до события currentTarget), цель (событие currentTarget) и всплытие («вверх» DOM от события currentTarget). Следует отметить, что захват и всплытие происходят всегда, даже при использовании stopPropagation() или установке для необязательного аргумента useCapture значения true.

event.stopPropagation()
stopPropagation, кажется, перестает захватывать и всплывать после срабатывания события currentTarget, но это не так. Вместо этого он предотвращает запуск события на оставшихся этапах захвата и всплытия.

event.preventDefault()
preventDefault() запрещает браузеру выполнять поведение по умолчанию для вызывающего события. Нажатие на ссылку, пожалуй, самый простой пример. Обычно браузер автоматически делает запрос GET к URL-адресу и загружает эту страницу, если запрос был успешным. preventDefault() заблокирует или предотвратит такое поведение. Следует отметить, что браузеры пытаются вести себя по умолчанию после захвата и всплытия. По этой причине выполнение браузера по умолчанию будет заблокировано вызовом preventDefault() в любом месте распространения.

document.querySelector('.outer').addEventListener('click', true)
Необязательный аргумент useCapture по умолчанию имеет значение false. Если установлено значение true, событие будет срабатывать во время фазы захвата, а не во время фазы всплытия.

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

document.addEventListener('click', event => {
  let tag = event.target.tagName;
  if (tag === 'LI') {
    event.target.textContent = 'new content';
  } else if (tag === 'OL') {
    let newLi = document.createElement('li');
    newLi.innerHTML = '<span>new content</span>';
    event.target.appendChild(newLi);
  }
});

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

jQuery (если мы хотим его использовать) упрощает делегирование событий с помощью следующего шаблона синтаксиса. Он использует только один обработчик событий вместо того, чтобы гипотетически создавать по одному для каждого якоря:

$("ul").on("click", "a", event => {
  event.preventDefault();
  $(e.target).closest("li").remove();
});

XHR

XHR (XMLHttpRequest) — это API, предоставляемый браузерами, который выполняет асинхронные запросы. Это означает, что синхронный код нашего приложения не будет заблокирован тем, что может быть длинным запросом: вместо этого синхронный код продолжается, пока API делает запрос.

Критически важно, что XHR полагаются на обработчики событий load, loadstart, loadend, error, abort и timeout, чтобы информировать нас о жизненном цикле запроса. Следует отметить, что событие load срабатывает, когда ответ успешен в техническом смысле (полный ответ любого типа), а не в случае успеха для целей приложения. Хотя это и не обязательно, мы должны иметь привычку присоединять обработчики событий load и error, чтобы обрабатывать более широкий диапазон ответов. Также полезно знать, что событие loadend все еще будет срабатывать после срабатывания load, error или abort.

Если мы хотим, чтобы ответ был сериализован в формате JSON, мы должны установить для свойства responseType нашего объекта XHR значение ‘json’ перед отправкой запроса. Это несколько проще, чем использовать JSON.parse() после запуска события загрузки. В результате свойство response предоставит нам либо данные в формате JSON, либо null, если что-то пошло не так.

В нашем объекте XHR есть дополнительные свойства, которые можно использовать для доступа к данным ответа: responseText (тело), ​​status (код состояния) и statusText (текст состояния). Мы можем вызвать метод getResponseHeader() для доступа к определенному заголовку ответа, например “Content-Type”, или использовать метод getAllResponseHeaders() для получения строки всех заголовков ответа.

Отправка JSON в запросе XHR
Чтобы отправить JSON с XHR, мы используем метод setRequestHeader(), чтобы установить заголовок ‘Content-Type’ в JSON (это требуется для многих API): request.setRequestHeader(‘Content-Type’, ‘application/json; charset=utf-8’);. Мы также должны сериализовать данные, которые мы отправляем в нашем запросе POST: данные должны быть объектом, который мы передаем в качестве аргумента JSON.stringify(). Fetch API новее и имеет более плавный синтаксис.

jQuery

jQuery — это библиотека, которая предоставляет удобные методы и простой синтаксис для работы с DOM. Например, методы jQuery обычно возвращают объект jQuery, что позволяет нам связывать вызовы методов. По сути, jQuery — это функция, которая обертывает DOM и возвращает объект jQuery, который мы используем в качестве интерфейса. jQuery был гораздо более ценным, когда API-интерфейсы браузеров были более разнообразными, потому что он предоставлял стандартный интерфейс для работы разработчиков. Сегодня мы должны спросить себя, стоит ли использовать jQuery для данного проекта.

Асинхронный Javascript

JavaScript имеет один стек вызовов. Это означает, что если весь наш код является синхронным, а одна операция занимает много времени (например, загрузка данных), весь следующий код должен ждать разрешения этой операции. Это ограничение можно обойти, используя асинхронные функции, предоставляемые веб-API, например Fetch или XHR, для отправки функций обратного вызова в API. Асинхронное действие происходит параллельно с синхронным кодом. После этого функция обратного вызова помещается в очередь обратного вызова. Самый старый обратный вызов в очереди будет помещен в стек вызовов для выполнения только тогда, когда стек вызовов пуст: цикл событий автоматически управляет этим процессом для нас.

Разнообразный

  • Что такое REST?
    REST (передача репрезентативного состояния) — это набор соглашений для разработки API. Он признает отсутствие состояния HTTP и рассматривает пользователей и веб-страницы как ресурсы. С этой точки зрения RESTful мы рассматриваем действия с точки зрения того, на какой ресурс воздействуют и как, сопоставленные с операцией CRUD.
  • Что такое промисы?
    Промисы — это относительно новый API для выполнения асинхронных запросов. Они обеспечивают более гладкий синтаксис по сравнению с XHR и не имеют проблемы с вложенностью «ад обратных вызовов».
  • Как работает setTimeout()?
    Функция setTimeout() является асинхронной и предоставляется хост-средами, такими как современный браузер. Первый аргумент функции — это функция обратного вызова, которая будет вызываться после задержки, указанной вторым аргументом. Поскольку это происходит асинхронно, даже задержка в 0 миллисекунд приводит к тому, что обратный вызов помещается в очередь обратных вызовов, где цикл событий определяет, когда стек вызовов пуст, и перемещает этот обратный вызов в стек для выполнения.
  • Что такое CORS?
    Запросы между источниками возникают, когда веб-страница запрашивает ресурс из другого источника (URL-адрес с другой схемой, портом или хостом). Важно знать, что XHR не может сделать кросс-оригинальный запрос из-за рисков безопасности (политика одного и того же происхождения браузера не позволит этого, проверяя обязательный заголовок запроса Origin). Решением является совместное использование ресурсов между источниками, при котором приложение устанавливает заголовок Access-Control-Allow-Origin в своем ответе. Установка заголовка в ‘*’ делает ресурс доступным для любого запроса или может указать запрашивающий источник.
  • Что такое API?
    Интерфейс прикладного программирования облегчает обмен ресурсами между различными системами или приложениями. Характер запроса/ответа веб-API дает нам парадигму поставщиков данных и потребителей данных: у поставщиков есть API, который может использоваться потребителями для доступа к ресурсам поставщика. . Вот как современные веб-приложения могут иметь сложные функции без самостоятельного создания всей функциональности. Вместо этого они могут получить доступ к ресурсам провайдера через API и внедрить его в свое приложение.
  • Что такое DOM?
    Объектная модель документа представляет собой иерархию узлов и API для документов HTML или XML. Самый высокий уровень в DOM — это узел document, внутри которого вложены все остальные узлы. HTML нашего приложения используется браузером в качестве шаблона для создания модели DOM, которая затем используется для отображения веб-страницы.
  • Выделение текста
    При использовании textContent мы должны помнить, что он будет включать любые пустые узлы и, как результат, может создать строку с неожиданными пробелами. При установке textContent мы должны помнить, что он заменит все дочерних узлов элемента новым значением textContent: лучше обернуть весь текст внутри элемента для точного доступа и манипуляций.