描述/Jquery绑定事件的最佳实践

Coffeescript / Jquery binding events best practice

本文关键字：最佳 事件 Jquery 绑定 描述      更新时间：2023-09-26

我是coffescript的新手，但我感兴趣的是将事件从jquery绑定到coffescript类实例的最佳方式是什么？我正在努力防止我的类中有太多嵌套回调：

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种方法都有效。。。有更好的方法/建议吗？

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

$('#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是一个绑定函数，它会迫使他们跳到代码中定义要检查的部分。

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

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

绑定方法的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可以区分两者。

相关文章：