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';
{
    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>

Answer 2

我觉得您要求的内容可以通过多种方式完成，并且可能没有正确的解决方案。但这是一种方式

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使用下划线前缀，这应该表明这些是私有方法。当然，这只是语法糖。有关ES6中私有属性/方法的更多信息，请参阅this

如何将此脚本重构为ES6？

2 个答案: