Question

我正尝试创建一个滚动构造函数，所以我不想只为每个页面区域创建X个每个滚动区域的函数，而只想创建一个带有属性的“ var”（如果属性是正确使用的术语，请更正我）。

目前，这是我要做的。我知道我需要对构造函数中的jQuery函数进行某些操作，但不确定如何设置其格式。

function Scroll(button, scrollTop) {
    this.button = button;
    this.scrollTop = scrollTop;

    $(this.button).click(function () {
        $('html').animate({
            scrollTop: $(this.scrollTop).offset().top
        }, 'slow');
    });

}

var top = new Scroll('#top', '.top-page');
var bottom = new Scroll('#bottom', '.bottom-page');
console.log(top);
Scroll(top);

Answer 1

您得到了有效的答案，这才是真正重要的。但是，如果您仍然对构造函数范式感兴趣，这是使用class语法的一种方法

class Scroll {
  constructor(button, scrollTop) {
    this.button = button;
    this.scrollTop = scrollTop;
  }

  static scroll(scroll) {
    $(scroll.button).click(function () {
      $('html').animate({scrollTop: $(scroll.scrollTop).offset().top}, 'slow');
    })
  }
}

const top = new Scroll('#top', '.top-page');
const bottom = new Scroll('#about', '.about-page');
Scroll.scroll(top);
Scroll.scroll(bottom);

我认为这没有比您做的更好的了，只是认为我会回答原始问题。话虽这么说，由于您只是要遍历并附加一堆侦听器，因此可以将所有button-scrollTop对放置在数组中，然后循环遍历这些对。

const scrollArr = [['#top', '.top-page'],['#about', '.about-page']];
for (let a of scrollArr) {
  $(a[0]).click(function() {
    $('html').animate({scrollTop: $(a[1]).offset().top}, 'slow');
  })
}

然后，new关键字中没有其他行。

Answer 2

根据Keith的建议，删除了此内容。解决的新代码看起来像这样

function Scroll(button, scrollTop) {
    // this.button = button;
    // this.scrollTop = scrollTop;

    $(button).click(function () {
        $('html').animate({
            scrollTop: $(scrollTop).offset().top
        }, 'slow');
    });
}

var top = new Scroll('#top', '.top-page');
var bottom = new Scroll('#about', '.about-page');

如何创建构造函数？

2 个答案: