Конструктор для слайдера
1. Что такое конструктор? 🤔
Конструктор – это основной способ создания множества однотипных объектов в JavaScript,
обеспечивающий стандартизацию и возможность использования принципов ООП.
2. Способы создания объектов 📦
Литерал объекта 📝
const obj = {
name: "John",
age: 30,
}
Конструктор с оператором new🔧
function User(name, age) {
this.name = name
this.age = age
}
const user1 = new User("John", 30)
const user2 = new User("Anna", 25)
3. Принципы ООП 🧩
Инкапсуляция🔒
Это механизм, который позволяет объединять данные и методы, а также скрывать детали реализации.
var slider1 = sliderFactory.createNewSlider()
var slider2 = sliderFactory.createNewSlider()
slider1.start("itk-slider1")
slider2.start("itk-slider2")
💡
Пользователь вызывает slider.start(), не зная о внутренней реализации
Наследование 🧬
Это механизм, который позволяет одному классу (потомку) наследовать свойства и методы другого класса
(родителя). Это способствует повторному использованию кода и созданию иерархии классов.
Полиморфизм 🎭
Это возможность объектов разных классов использовать один и тот же интерфейс (методы с одинаковым
названием), но при этом реализовывать их по-разному.
4. Создание конструктора в JavaScript ⚙️
<div class="itk-slider" id="itk-slider1">
<button class="show-prev-btn">PREV</button>
<img class="slide-img" src="" />
<button class="show-next-btn">NEXT</button>
</div>
I
<div class="itk-slider" id="itk-slider2">
<button class="show-prev-btn">PREV</button>
<img class="slide-img" src="" />
<button class="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>
function Slider() {
this.imageUrls = []
this.currentImageIndex = 0
this.showPrevBtn = null
this.showNextBtn = null
this.slideImage = null
this.start = function (elId) {
var that = this
var elSelector = "#" + elId
var el = document.querySelector(elSelector)
this.showPrevBtn = el.querySelector(".show-prev-btn")
this.showNextBtn = el.querySelector(".show-next-btn")
this.slideImage = el.querySelector(".slide-img")
// subscribe to events
this.showPrevBtn.addEventListener("click", function (e) {
that.onShowPrevBtnClick(e)
})
this.showNextBtn.addEventListener("click", function (e) {
that.onShowNextBtnClick()
})
// create images array
this.imageUrls.push("https://www.cstatic-images.com/car-pictures/main/USC50ALC051A021001.png")
this.imageUrls.push(
"https://img.autobytel.com/2017/chevrolet/corvette/2-800-oemexteriorfronti300-80986.png",
)
this.imageUrls.push("http://s3.caradvice.com.au/wp-content/uploads/2015/05/JAGUAR_F-TYPE.jpg")
this.imageUrls.push(
"http://moneyinc.com/wp-content/uploads/2016/08/2017-Lamborghini-Aventador-750x500.png",
)
this.slideImage.src = this.imageUrls[this.currentImageIndex]
this.showPrevBtn.disabled = true
}
this.onShowPrevBtnClick = function (e) {
this.currentImageIndex--
this.slideImage.src = this.imageUrls[this.currentImageIndex]
this.showNextBtn.disabled = false
//disable prev button if need
if (this.currentImageIndex === 0) {
this.showPrevBtn.disabled = true
}
}
this.onShowNextBtnClick = function (e) {
this.currentImageIndex++
this.slideImage.src = this.imageUrls[this.currentImageIndex]
this.showPrevBtn.disabled = false
//disable next button if need
if (this.currentImageIndex === this.imageUrls.length - 1) {
this.showNextBtn.disabled = true
}
}
}
var slider1 = new Slider()
var slider2 = new Slider()
slider1.start("itk-slider1")
slider2.start("itk-slider2")
