Как понять выполнения скрипта?

Question

[alexfrolov_xcx]

всем привет! что здесь происходит? пишу скрипт по примеру из книги, но не совсем понимаю суть происходящего: в функции setDetailsFromThumb я исполняю 2 функции которые в качестве параметров передаются функции setDetails... далее идёт оброботчик событий в котором задаётся параметр thumb и потом передаётся в setDetailsFromThumb; скрипт рабочий но непонятно что происходит...

'use strict';

const DETAIL_IMAGE_SELECTOR = '[data-image-role=\"target\"]';
const DETAIL_TITLE_SELECTOR = '[data-image-role=\"title\"]';
const THUMBNAIL_LINK_SELECTOR = '[data-image-role=\"trigger\"]';



function setDetails(imageUrl, titleText) {
let detailImage = document.querySelector(DETAIL_IMAGE_SELECTOR);
 detailImage.setAttribute('src', imageUrl);


 let detailTitle = document.querySelector(DETAIL_TITLE_SELECTOR);
 detailTitle.textContent = titleText;
}


function imageFromThumb(thumbnail) {
    return thumbnail.getAttribute('data-image-url');

}

function titleFromThumb(thumbnail) {
    return thumbnail.getAttribute('data-image-title');
   }

   function setDetailsFromThumb(thumbnail) {
    setDetails(imageFromThumb(thumbnail), titleFromThumb(thumbnail));
   }



   function addThumbClickHandler(thumb) {
    thumb.addEventListener('click', function (event) {
    event.preventDefault();
    setDetailsFromThumb(thumb);
    });
   }

   function getThumbnailsArray() {
    let thumbnails = document.querySelectorAll(THUMBNAIL_LINK_SELECTOR);
    let thumbnailArray = [].slice.call(thumbnails);
    return thumbnailArray;
   }


   function initializeEvents() {
    let thumbnails = getThumbnailsArray();
    thumbnails.forEach(addThumbClickHandler);
   }
   initializeEvents();

Answer 1

[Андрей]

Сначала в переменные засовываются селекторы.

В setDetails по селектору DETAIL_IMAGE_SELECTOR находятся элементы (вероятно, изображения), и им устанавливается параметр src. По селектору DETAIL_TITLE_SELECTOR устанавливается текст внутри элементов.

В imageFromThumb параметром должен передаваться dom-элемент, и она возвращает значение атрибута data-image-url.

titleFromThumb аналогично второй, только атрибут data-image-title.

setDetailsFromThumb получает через параметр dom-элемент, через вторую и третью функции получает значения атрибутов и заполняет нужные значения элементы через первую функцию.

addThumbClickHandler навешививает на dom-элемент событие клика, по которому выполняет четвёртую функцию передавая в неё dom-элемент на который навешана пятая функция.

getThumbnailsArray получает список всех элементов по селектору THUMBNAIL_LINK_SELECTOR затем, преобразовывает этот список в массив и возвращает его.

initializeEvents получает список объектов через getThumbnailsArray и для каждого элемента вызывает addThumbClickHandler.

А если кратко - это выглядит как галерея картинок, когда есть маленькие превью, или текстовый список, при нажатии на каждый элемент из которого в целевом объекте отображается нужное изображение с заголовком.