如何將此腳本重構爲ES6？

Question

所以我開始學習ES6和模塊化的JS（使用Webpack），現在我想重構這個舊的腳本以返回頂部箭頭，並將其轉換爲帶有構造函數和全部的ES6樣式腳本。這是我現在得到的，但不知道如何寫ScrollTop類內的條件語句..任何想法？

我想以某種方式編寫和訪問條件邏輯，但不知道如何在類中實現$（window）.scroll等。我需要一個新的功能來照顧這個..？我希望它的工作原理相同，但要更乾淨地寫下來。

舊腳本：

$(window).scroll(function() { 
    if ($(this).scrollTop() >= 200) {   
     $('#return-to-top').fadeIn(200); 
    } else { 
     $('#return-to-top').fadeOut(200); 
    } 
}); 

$('#return-to-top').click(function() {  
    $('body,html').animate({ 
     scrollTop : 0      
    }, 300); 
}); 

<a href="#" id="return-to-top"><i class="fa fa-chevron-up"></i></a> 

新的腳本：

import $ from 'jquery'; 

class ScrollTop { 
    constructor() { 
     this.scrollUp = $("#return-to-top"); 
     this.topDistance = $("#return-to-top").offset().top; 
     this.events(); 
    } 

    events() { 
     this.scrollUp.click(this.returnToTop.bind(this)); 
    } 

    returnToTop() { 
     $('body,html').animate({ 
      topDistance: 0     
     }, 3000); 
    } 
} 

export default ScrollTop; 

Answer 1

我覺得你所要求的可以在許多方面做什麼，並有可能是不正確的解決。但這裏是一個辦法

import $ from 'jquery'; 

class ScrollTop { 

    // Accepting a jQuery selector string to make it generic 
    constructor(returnToTopSelector) { 
     this._scrollUp = $(returnToTopSelector); 
     if (this._scrollUp.length) { 
      this._topDistance = this._scrollUp.offset().top; 
     } 
    } 

    setupEvents() { 
     if (this._scrollUp.length) { 
      this._scrollUp.click(this._returnToTop.bind(this)); 
      this._fadeArrow(); 
     } 
    } 

    _returnToTop() { 
     $('body,html').animate({ 
      topDistance: 0     
     }, 3000); 
    } 

    _fadeArrow() { 
     const self = this; 
     $(window).scroll(function() { 
      if ($(this).scrollTop() >= 200) { 
       self._scrollUp.fadeIn(200); 
      } else { 
       self._scrollUp.fadeOut(200); 
      } 
     }); 
    } 
} 

export default ScrollTop; 

而且我會用這種方式，任何需要的地方

import ScrollTop from 'ScrollTop' 

let scrollTop = new ScrollTop("#return-to-top"); 
scrollTop.setupEvents(); 

注意，使用下劃線前綴爲_returnToTop和_fadeArrow，這是爲了表明這些是私人方法。當然，這只是句法糖。見this更多的私人屬性/方法在ES6

Answer 2

其實，沒有必要確定你應該想想什麼是面向對象的programming.The以下方式class.Maybe似乎是不夠的

import $ from 'jquery'; 
{ 
    let timer; 
    $(window).scroll(function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      if ($(this).scrollTop() >= 200) { 
       $('#return-to-top').fadeIn(200); 
      } else { 
       $('#return-to-top').fadeOut(200); 
      } 
     }, 30) 

    }); 

    $('#return-to-top').click(function() { 
     $('body,html').animate({ 
      scrollTop : 0 
     }, 300); 
    }); 
} 


<a href="#" id="return-to-top"><i class="fa fa-chevron-up"></i></a>