javascript - 如何将对象作为参数传递并在构造函数中引用它

Question

我为我的自定义 slider 创建了一个类，目前我只是将一个参数传递给构造函数，即 slider 元素。目前一切都很好，我已经设法让 2 个 slider 实例运行而没有任何问题。

我想要实现的是能够将第二个参数传递给构造函数，该参数将是一个对象，其中包含要添加到 slider 幻灯片的自定义属性，即转换速度、转换持续时间以及我决定的任何其他内容。

要传递的示例对象

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

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

我只是不太确定如何在我的构造函数中引用它。这只是我自己学习面向对象编程的一个自定义项目。

这是我当前的构造函数

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'
  }
});

并使用实异常(exception)部的以下属性键或 this 访问它们在您的实例内部。

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