Question

我是coffescript的新手，但是我感兴趣的是将jquery中的事件绑定到coffeescript类实例的最佳方法是什么？我试图防止在我的班级中有太多的嵌套回调：

class Page
  id2clicks : 0
  id3clicks : 0
  id4clicks : 0

  onLoad: ->

    $('#id2').on 'click', @ , @onId2Click

    $('#id3').on 'click', $.proxy(@onId3Click,@)

    $('#id4').on 'click' , () =>
      @id4clicks++
      alert @id4clicks

  onId2Click: (e) ->
    e.data.id2clicks++
    alert e.data.id2clicks

  onId3Click: ->
    @id3clicks++
    alert @id3clicks

p = new Page()
p.onLoad()

所有3种方法都有效......有没有更好的方法/建议来做到这一点？

Answer 1

就个人而言，我更喜欢这种方式，因为它是最短的并且在线显示处理程序（注意我也省略了括号）：

$('#id4').on 'click' , =>
  @id4clicks++
  alert @id4clicks

这对短期处理程序非常有用。但是，偶尔你有一个你想要拆分并在其他地方重用的功能，在这种情况下我喜欢使用像

这样的东西

$('#id2').on 'click', $.proxy(@onId2Click, @)

甚至

$('#id2').on 'click', (e) =>
  @onId2Click e

另一种方法是写

onId3Click: =>
  @id3clicks++
  alert @id3clicks

并使用

$('#id3').on 'click', @onId3Click

但我个人不鼓励这样做，因为大多数人都不希望@onId3Click成为绑定函数，它会强制它们跳转到定义要检查的代码部分。

Answer 2

CoffeeScript专门为此问题引入了一整段语法：胖箭头=>。使用它：

$('#id4').click (event) =>
  @id4clicks++
  alert @id4clicks

Answer 3

对绑定方法的jsperf.com测试有23个（并且正在计数）修订

http://jsperf.com/bind-vs-jquery-proxy/23

进行此绑定的其他方式包括：

$('#id3').on 'click', @onId3Click.bind(@)  # native bind

$('#id3').on 'click', _.bind(@onId3Click, @) # underscore, lodash

一般来说，$.proxy和下划线速度较慢，原生绑定在某些浏览器上速度较快，在V8上速度较慢，而lodash可以区分两者。

Coffeescript / Jquery绑定事件的最佳实践

3 个答案: