Превращаем слайдер в объект

Автор конспекта: Stanislav

👉

Объекты — основа программирования. Их применяют постоянно, а объектно-ориентированное программирование (ООП) строится именно на них. Объекты объединяют данные (состояние) и функции (методы), упрощая решение повседневных задач.

👉

ООП позволяет моделировать реальный мир: например, создать объекты "Пациент", "Клиника", "Ресепшен", "Талончик", у каждого из которых есть свои свойства (данные) и методы (действия)

1. Создаем новый файл slider.js

При переработке кода слайдера, все глобальные переменные (например, currentImageIndex, showPrevButton) становятся свойствами объекта слайдера, а функции (например, onShowPrevButtonClick) — его методами

slider.js

var slider1 = {
  imagesUrls: [],
  currentImageIndex: 0,
  showPrevBtn: document.getElementById("show-prev-btn"),
  showNextBtn: document.getElementById("show-next-btn"),
  slideImage: document.getElementById("slide-img"),
 
  onShowPrevBtnClick: function (e) {
    this.currentImageIndex--
    this.slideImage.src = this.imagesUrls[this.currentImageIndex]
    this.showNextBtn.disabled = false
 
    //disable prev button if need
    if (this.currentImageIndex === 0) {
      this.showPrevBtn.disabled = true
    }
  },
 
  onShowNextBtnClick: function (e) {
    this.currentImageIndex--
    this.slideImage.src = this.imagesUrls[this.currentImageIndex]
    this.showPrevBtn.disabled = false
 
    //disable prev button if need
    if (this.currentImageIndex === this.imagesUrls.length - 1) {
      this.showNextBtn.disabled = true
    }
  },
}

👉

Внутри методов объекта для доступа к его собственным свойствам и другим методам используется ключевое слово this

⚙️

Для настройки и запуска слайдера создается специальный метод инициализации, например, start или init

slider.js

var slider1 = {
  imagesUrls: [],
  currentImageIndex: 0,
  showPrevBtn: document.getElementById("show-prev-btn"),
  showNextBtn: document.getElementById("show-next-btn"),
  slideImage: document.getElementById("slide-img"),
 
  start: function () {
    //subscribe to event
    this.showPrevBtn.addEventListener("click", this.onShowPrevBtnClick)
    this.showNextBtn.addEventListener("click", this.onShowNextBtnClick)
 
    this.imagesUrls.push("https://www.cstatic-images.com/car-pictures/main/USC50ALC051A021001.png")
    this.imagesUrls.push(
      "https://article.images.consumerreports.org/image/upload/w_652,f_auto,q_auto,ar_16:9,c_lfill/v1731947043/prod/content/dam/CRO-Images-2024/Cars/CR-Cars-InlineHero-10-Most-Satisfying-Cars-and-SUVs-1124",
    )
    this.imagesUrls.push(
      "https://hips.hearstapps.com/hmg-prod/images/pop-index-2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.881xw:0.881xh;0.0358xw,0.116xh&resize=1200:*",
    )
    this.imagesUrls.push(
      "https://images.hgmsites.net/lrg/2021-chevrolet-corvette-2-door-stingray-convertible-w-3lt-angular-front-exterior-view_100835748_l.jpg",
    )
 
    this.slideImage.src = this.imagesUrls[this.currentImageIndex]
    this.showPrevBtn.disabled = true
  },
 
  onShowPrevBtnClick: function (e) {
    this.currentImageIndex--
    this.slideImage.src = this.imagesUrls[this.currentImageIndex]
    this.showNextBtn.disabled = false
 
    //disable prev button if need
    if (this.currentImageIndex === 0) {
      this.showPrevBtn.disabled = true
    }
  },
  onShowNextBtnClick: function (e) {
    this.currentImageIndex--
    this.slideImage.src = this.imagesUrls[this.currentImageIndex]
    this.showPrevBtn.disabled = false
 
    //disable next button if need
    if (this.currentImageIndex === this.imagesUrls.length - 1) {
      this.showNextBtn.disabled = true
    }
  },
}

2. Подключаем slider.js

index.html

<div class="itk-slider">
  <button id="show-prev-btn">PREV</button>
  <img class="slide.img" src="" id="slide-img" />
  <button id="show-next-btn">NEXT</button>
</div>
 
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/index.js"></script>
<script src="js/slider.js"></script>

❗

После подключения slider.js в index.html и очистки index.js ничего не работает, потому что объект необходимо инициализировать.

index.js

slider1.start()

👉

Важно соблюдать порядок подключения скриптов на странице: файл, который определяет объект (например, slider.js), должен быть загружен до файла, который этот объект использует (например, index.js), иначе возникнет ошибка undefined

index.html

<div class="itk-slider">
  <button id="show-prev-btn">PREV</button>
  <img class="slide.img" src="" id="slide-img" />
  <button id="show-next-btn">NEXT</button>
</div>
 
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/slider.js"></script>
<script src="js/index.js"></script>

❗

При обработке клика по кнопке this неожиданно ссылается на саму кнопку, а не на объект слайдера. Эта проблема с контекстом вызова будет разобрана в следующем видео