Как передать объект в качестве аргумента и сослаться на него внутри конструктора

Question

Я создал класс для своего настраиваемого слайдера, и в настоящее время я просто передаю конструктору один аргумент, который является элементом слайдера. На данный момент все работает нормально, мне удалось запустить 2 экземпляра слайдера без каких-либо проблем.

Чего я хотел бы достичь, так это иметь возможность передать второй аргумент конструктору, который будет объектом, содержащим такие настраиваемые свойства для добавления к слайдеру, то есть скорость перехода, продолжительность перехода и другие вещи i принять решение.

Пример объекта для передачи

animation {
 transition-duration: 1s,
 transition-property: transform
}

let mySlider1 = new Slider('.slider--1', {
  animation {
   transition-duration: 1s,
   transition-property: transform
}
});

Я просто не слишком уверен, как go ссылаться на это в моем конструкторе. Это просто индивидуальный проект для меня, изучающего объектно-ориентированное программирование.

Это мой текущий конструктор

class Slider {
    constructor(slider, myNewCustomObject) {
        this.slider = document.querySelector(slider);
        this.slide = this.slider.querySelectorAll('.slider--slide');
        this.prevSlide = this.slider.querySelector('.slider--btn--prev');
        this.nextSlide = this.slider.querySelector('.slider--btn--next');
        this.isAnimating = false;
        this.currentSlide = 0;
        this.prevSlide.addEventListener('click', () => {
            this.slidePrev();
        });
        this.nextSlide.addEventListener('click', () => {
            this.slideNext();
        });
    }
    resetSlides() {
        this.slide.forEach(venue => {
            venue.style.zIndex = '';
            this.slide[this.currentSlide].style.zIndex = '1';
        });
        this.slide[this.currentSlide].classList.remove('active');
        this.slide[this.currentSlide].classList.remove('slideLeft');
        this.slide[this.currentSlide].classList.remove('slideRight');
    }
    slidePrev() {
        if (this.isAnimating) {
            return;
        } else {
            this.resetSlides();
            if (this.currentSlide === 0) {
                this.currentSlide = this.slide.length - 1;
            } else {
                this.currentSlide--;
            }
            this.slide[this.currentSlide].classList.add('active');
            this.slide[this.currentSlide].classList.add('slideLeft');

            setTimeout(function () {
                this.isAnimating = false;
            }, 1100);
        }
    }
    slideNext() {
        if (this.isAnimating) {
            return;
        } else {
            this.resetSlides();
            if (this.currentSlide === this.slide.length - 1) {
                this.currentSlide = 0;
            } else {
                this.currentSlide++;
            }
            this.slide[this.currentSlide].classList.add('active');
            this.slide[this.currentSlide].classList.add('slideRight');

            setTimeout(function () {
                this.isAnimating = false;
            }, 1100);
        }
    }
}

let mySlider1 = new Slider('.slider--1');
let mySlider2 = new Slider('.slider--2');

<div class="slider slider--1">
        <div class="slider--slide venue__img--1 active slideRight">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading mb--xsm">Woodhall Manor</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--slide venue__img--2">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading">Parklands Lodge</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--slide venue__img--3">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading">Northbrook Hall</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--slide venue__img--4">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading">Goodward House</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--slide venue__img--5">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading">Buxted Park</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--btn slider--btn--prev"><svg class="fas fa-caret-left"></svg></div>
        <div class="slider--btn slider--btn--next"><svg class="fas fa-caret-right"></svg></div>
      </div>

 <div class="slider slider--2">
            <div class="slider--slide venue__img--1 active slideRight">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading mb--xsm">Woodhall Manor</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--slide venue__img--2">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading">Parklands Lodge</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--slide venue__img--3">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading">Northbrook Hall</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--slide venue__img--4">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading">Goodward House</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--slide venue__img--5">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading">Buxted Park</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--btn slider--btn--prev"><svg class="fas fa-caret-left"></svg></div>
            <div class="slider--btn slider--btn--next"><svg class="fas fa-caret-right"></svg></div>
          </div>

Answer 1

Создайте новое свойство так же, как вы сделали с this.slider.

class Slider {
    constructor(slider, myNewCustomObject) {
      this.slider = document.querySelector(slider);
      ...
      this.myNewCustomObject = myNewCustomObject;
    }
    ...
}

Убедитесь, что ваш объект имеет правильный синтаксис. Не используйте дефисы в качестве ключей свойств, если у вас нет выбора.

Теперь передайте свой объект в качестве второго параметра конструктора.

const slider = new Slider('.slider', {
  animation: {
    transitionDuration: '1s',
    transitionProperty: 'transform'
  }
});

И получите к ним доступ с помощью следующих ключей свойств вне вашего экземпляра или с помощью this внутри вашего экземпляра.

slider.myNewCustomObject.animation.transitionDuration;
slider.myNewCustomObject.animation.transitionProperty;

Answer 2

Чтобы получить доступ к свойствам другого объекта, вы просто делаете это обычно, используя Object.property или Object['property'].

Это то, что вы ищете, я считаю:

constructor(slider, myNewCustomObject) {
   // Initialisation code

  this.speed = myNewCustomObject.transitionSpeed

  //This is also fine
  this.speed = myNewCustomObject['transitionSpeed']

}