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

Question

我刚接触coffeescript，但我很感兴趣如何将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()

所有三种方法都有效...是否有更好的方式/建议来完成这个任务？

- Ladislav Zigo

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是一个绑定函数，这会迫使他们跳转到代码的定义部分进行检查。

- arghbleargh

---

有趣的是，onId3Click: => 最终会应用 __bind(this.onId3Click, this)，其中 __bind 大致相当于 $.proxy。 - hpaulj

Answer 2

CoffeeScript为了解决这个问题，引入了一个专门的语法：胖箭头=>。使用它即可：

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

- user229044

---

他已经了解了操作符，他正在寻求最佳实践。 - Bergi

我告诉他：语言的作者们经过努力在语言层面解决了这个问题。当然，你应该使用胖箭头。 - user229044

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 和 underscore 的速度较慢，原生的 bind 在某些浏览器上很快，在 V8 上很慢，而 lodash 可以区分这两者。

- hpaulj