jquery - 使用 jQuery 和 Babel 进行 OOP

Question

我正在尝试遵循 OOP 原则来编写一些 jQuery 代码。该代码部分有效。 addCss() 方法可以正常工作，而 moveRight() 则不能。

HTML

<div class="_slider">
      <a href="#" class="_slider_next">&#10095;</a>
      <a href="#" class="_slider_prev">&#10094;</a>
      <ul>
          <li>SLIDE 1</li>
          <li>SLIDE 2</li>
          <li>SLIDE 3</li>
          <li>SLIDE 4</li>
      </ul>  
    </div>

JS

import $ from 'jquery';

class Carousel {    
    constructor() {
        this.slider = $("._slider");
        this.sliderUl = $("._slider ul");
        this.next = $("_slider_next");
        this.sliderLastCh = $("._slider ul li:last-child");
        this.sliderFirstCh = $("._slider ul li:first-child");
        this.slideCount = $("._slider ul li").length;
        this.slideWidth = $("._slider ul li").width();
        this.slideHeight = $("._slider ul li").height();
        this.sliderUlWidth = this.slideCount * this.slideWidth;
        this.events();
    }

events() {
    $(document).ready(this.addCss.bind(this));

    this.next.click(this.moveRight.bind(this));

    $(document).ready(
        setInterval(function () {
            this.moveRight;
        }, 3000)
    );
}

addCss() {        
    this.slider.css({ width: this.slideWidth, height: this.slideHeight });     
    this.sliderUl.css({ width: this.sliderUlWidth, marginLeft: - this.slideWidth });     
    this.sliderLastCh.prependTo(this.sliderUl);
}

moveRight() {
    this.sliderUl.animate({
        left: - this.slideWidth
    }, 200, function () {
        this.sliderFirstCh.appendTo(this.sliderUl);
        this.sliderUl.css('left', '');
    });
  };

}

export default Carousel;

幻灯片应该在点击时自动更改。

Answer 1

这里有几个问题。但最普遍的问题与 this 的范围有关。在函数体本身中，没问题。但是，在 setInterval() 和animate() 回调的范围是 window，而不是当前的 Class。因此，您需要将 this 的范围缓存在所需级别的变量中，然后在这些回调中使用它。在下面的示例中，我使用了 _this。

另外，两个 document.ready 处理程序可以组合，您需要将第二个 document.ready 中的逻辑包装在匿名函数中，并且需要将 () 放在 this 后面.moveRight 以便实际调用该函数。

话虽如此，试试这个:

class Carousel {
  constructor() {
    this.slider = $("._slider");
    this.sliderUl = $("._slider ul");
    this.next = $("._slider_next");
    this.sliderLastCh = $("._slider ul li:last");
    this.sliderFirstCh = $("._slider ul li:first");
    this.slideCount = $("._slider ul li").length;
    this.slideWidth = $("._slider ul li").width();
    this.slideHeight = $("._slider ul li").height();
    this.sliderUlWidth = this.slideCount * this.slideWidth;
    this.events();
  }

  events() {
    var classScope = this;    
    this.next.click(this.moveRight.bind(this));

    $(document).ready(function() {
      classScope.addCss();
      
      setInterval(function() {
        classScope.moveRight();
      }, 3000)
    });
  }

  addCss() {
    this.slider.css({
      width: this.slideWidth,
      height: this.slideHeight
    });
    
    this.sliderUl.css({
      width: this.sliderUlWidth,
      marginLeft: -this.slideWidth
    });
    
    this.sliderLastCh.prependTo(this.sliderUl);
  }

  moveRight() {    
    var classScope = this;    
    
    this.sliderUl.animate({
      left: -this.slideWidth
    }, 200, function() {
      console.log('slide moved right...');
      classScope.sliderFirstCh.appendTo(classScope.sliderUl);
      classScope.sliderUl.css('left', '');
    });
  };
}

var c = new Carousel();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="_slider">
  <a href="#" class="_slider_next">&#10095;</a>
  <a href="#" class="_slider_prev">&#10094;</a>
  <ul>
    <li>SLIDE 1</li>
    <li>SLIDE 2</li>
    <li>SLIDE 3</li>
    <li>SLIDE 4</li>
  </ul>
</div>