Создание кнопки «Нравится» с помощью ванильного JavaScript… оптимистично!

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

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

Итак, давайте приступим к нашей базовой настройке. В вашем HTML вам понадобится диапазон, тег p или div, в котором будет храниться, сколько лайков у чего-то есть. Если он не существует в вашем HTML до того, как вы выполняете выборку, вы, вероятно, захотите добавить его, когда добавите свой элемент в DOM после загрузки. Например, если вы показываете изображение из API, у которого есть «url», «name» и «like_count», прикрепленные к каждому объекту в вашем JSON, вы захотите сделать что-то вроде этого с вашим fetch:

fetch (imageURL)
  .then (res => res.json())
  .then (showImg)
const showImg = (jsonImg) => {
  const imageCard = document.querySelector("#image_card")
  imageCard.dataset.id = jsonImg.id
  imageCard.innerHTML = `
    <img src="${jsonImg.url}" id="image" data-id="${jsonImg.id}"/>
    <h4 id="name">${jsonImg.name}</h4>
    <span>Likes:
      <span id="likes">${jsonImg.like_count}</span>
    </span>
    <button id="like_button">Like</button>
  `
}

В приведенном выше javascript мы выполняем загрузку в наш API и в данном случае захватываем изображения или изображения. «ImageURL» - это переменная, которая содержит фактическую ссылку на API. После получения информации из нашего Fetch мы отправляем ему функцию showImg. Эта функция берет DIV из нашего HTML с идентификатором «image_card» и сохраняет его в переменной imageCard. Получив доступ к этому div, мы можем создать весь наш HTML-код, который будет отображать нашу информацию из нашего API (который в настоящее время называется jsonImg).

Обратите внимание, что у нас есть диапазон, который мы создаем, который содержит текст «Нравится:» и указывает на like_count для этого конкретного изображения. jsonImg.like_count в настоящее время представляет собой строку с числом. Мы еще вернемся к тому, почему важно знать, что это строка, а не целое число. Для справки: вот что у вас есть в HTML-коде, к которому мы прикрепляем приведенный выше код:

<div id="image_card" class="card">
<!-- Your new div with the JSON info goes here -->
</div>

Отлично, у нас есть Javascript, и наша страница показывает изображение и рядом с ним количество лайков, равное 0, при условии, что это количество лайков, которое наш json-объект привязал к этому изображению. Наша работа - обновлять DOM лайками при нажатии кнопки лайков. Итак, нам понадобится прослушиватель событий на нашей недавно созданной кнопке Like. Нам нужно создать этот прослушиватель событий одновременно с созданием кнопки, чтобы мы могли получить к ней доступ. Если мы попытаемся сделать прослушиватель событий вне области действия нашей функции showImg, он попытается прикрепить и прослушиватель событий к чему-то до того, как это что-то существует, и выдаст нам неопределенную ошибку, когда мы попытаемся получить к нему доступ. Мы собираемся добавить слушателя событий в нижнюю часть нашей функции showImg. Это могло выглядеть примерно так:

const showImg = (jsonImg) => {
  const imageCard = document.querySelector("#image_card")
  imageCard.dataset.id = jsonImg.id
  imageCard.innerHTML = `
    <img src="${jsonImg.url}" id="image" data-id="${jsonImg.id}"/>
    <h4 id="name">${jsonImg.name}</h4>
    <span>Likes:
      <span id="likes">${jsonImg.like_count}</span>
    </span>
    <button id="like_button">Like</button>
  ` 
  const button = document.querySelector("#like_button")
  button.addEventListener("click", likeButton)
}

Сначала мы берем нашу недавно созданную кнопку с идентификатором «like_button», который мы дали ей выше. А затем мы добавляем к нему наш слушатель событий. Я передаю событие, которое в данном случае является «щелчком» и функцией с именем «likeButton». Вы уже развлекаетесь?

Давайте теперь посмотрим на нашу функцию likeButton:

const likeButton = (event) => {
  id = parseInt(event.target.parentElement.dataset.id)
  let likes = document.querySelector("#likes")
  num = parseInt(likes.innerText)
  num += 1
  likes.innerText = num
  fetch (likeURL, {
    method: "POST",
    headers: {
      "Accept": 'application/json',
      "Content-Type": 'application/json'
    },
    body: JSON.stringify ({
      image_id: id
    })
  })
}

Давайте разберемся, что происходит в приведенном выше коде. У нас есть функция likeButton, которая принимает событие, которое мы передаем ей от нашего вышеупомянутого прослушивателя событий. Если вы добавите отладчик после первой строки, вы можете войти в консоль и узнать, какое событие передается. Сначала мы сохраним идентификатор набора данных в переменной id. Нам нужен доступ к идентификатору изображения, чтобы мы могли создать новый подобный экземпляр. Этот новый «лайк» будет удерживать идентификатор нового лайка, а также идентификатор изображения.

Хорошо, теперь давайте поговорим об обновлении DOM количеством лайков. Прежде чем мы даже добавим выборку, мы должны иметь возможность обновить DOM с помощью приведенного выше кода. Так что, если вы занимаетесь кодированием, закомментируйте выборку в приведенном выше коде и просто запустите верхнюю половину. Это называется оптимистическим обновлением модели DOM. Мы изменяем счетчик лайков до того, как фактические лайки будут созданы в базе данных.

Сначала мы берем диапазон, в котором хранится количество лайков у этого изображения, и сохраняем его в переменной «нравится». Помните, что это число на самом деле является строкой в ​​нашем коде, поэтому нам нужно преобразовать его в целое число, прежде чем мы сможем с ним работать. Итак, мы анализируем строку и сохраняем ее в новую переменную num. Мы хотим добавлять подобное каждый раз, когда эта кнопка нажимается, поэтому мы собираемся num + = 1. Вы также можете записать это как num ++. То же самое. Затем мы возьмем наше новое число и добавим его в innerText нашего диапазона, который содержит количество подобных.

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

Вот тут и пригодится наша выборка. Мы собираемся создать новый, подобный этому, прикрепленный к нашему изображению, передав image_id при его создании. Также обратите внимание, что, поскольку мы оптимистично рендерим, нам фактически не нужны какие-либо из наших операторов «.then» после нашей выборки, так как нам не нужно ничего делать после выборки. Обновление произошло до загрузки! СУМАСШЕДШИЙ!

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

Это только один способ создать кнопку «Нравится». Javascript - это дикий запад, поэтому есть много других способов сделать это. Вы можете отрендерить изменение пессимистично и сделать это после того, как создадите новый лайк. Большинство ваших решений будет основано на ваших собственных результатах. Так что это просто рекомендация для базовой кнопки Like, но ни в коем случае не так, как она должна работать каждый раз !! Удачи вам на кнопках лайков !!! Ты получил это!