Question

我是JS / JQuery / HTML的新手，我正在寻找避免使用这么多内联/匿名函数的方法。

这是我工作的例子：

initialize: function () {
    $('section.content').each(this.initWaypoints);
}

initWaypoints: function (index, item) {

    $(item).waypoint(function (direction) {
        $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'down');

    },{offset: '50%',vertical: true})

    $(item).waypoint(function (direction) {
        $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'up');

    },{offset: '-50%', vertical: true});

}

我更喜欢的是这样的事情：

initialize: function () {
    $('section.content').each(this.initWaypoints);
},

initWaypoints: function (index, item) {
    $(item).waypoint(this.down, {offset: '50%', vertical: true});              
    $(item).waypoint(this.up, {offset: '-50%', vertical: true});
},

down: function (direction) {
    $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'down');
},

up: function (direction) {
    $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'up');
}

我的问题是我的上下方法不知道$（item）是什么，因为它们与第一个示例的范围不同。我还没有找到如何将项目传递给他们。

感谢您的帮助。

Answer 1

可能有几种方法可以做你想做的事。一种是为函数提供额外的item参数，并在将函数传递给waypoint时绑定参数：

initWaypoints: function (index, item) {
    $(item).waypoint(this.down.bind(this, $(item)), {offset: '50%', vertical: true});              
    $(item).waypoint(this.up.bind(this, $(item)), {offset: '-50%', vertical: true});
},

down: function (item, direction) {
    $('.navButton.' + item.data('label')).toggleClass('active', direction === 'down');
},

up: function (item, direction) {
    $('.navButton.' + item.data('label')).toggleClass('active', direction === 'up');
}

Answer 2

使用闭包。

试试这个：

initialize: function () {
    $('section.content').each(this.initWaypoints);
},

initWaypoints: function (index, item) {
    $(item).waypoint(this.down(item), {offset: '50%', vertical: true});              
    $(item).waypoint(this.up(item), {offset: '-50%', vertical: true});
},

down: function (item) {
    return function(direction) {
      $('.navButton.' + $(item).data('label')).toggleClass('active', direction === 'down');
  }
},

up: function (item) {
   return function(direction) {
      $('.navButton.' + item.data('label')).toggleClass('active', direction === 'up');
   }
}

Answer 3

如果你不关心构建复杂的对象模型，只想把一些jQuery放在一起，那么你可以简单地使用this：

down: function (direction) {
    $('.navButton.' + $(this).data('label')).toggleClass('active', direction === 'down');
},

up: function (direction) {
    $('.navButton.' + $(this).data('label')).toggleClass('active', direction === 'up');
}

如何避免匿名/内联函数

3 个答案: