Backbone.js 事件处理程序命名的最佳实践答案

【问题标题】：Backbone.js best practice for event handlers namingBackbone.js 事件处理程序命名的最佳实践
【发布时间】：2012-08-12 23:31:45
【问题描述】：

假设我在视图中有一个函数，当某种状态发生变化时触发。给它起什么名字最好？为什么？

状态变化
状态已改变
onStateChange
onStateChanged

【问题讨论】：

有什么特别的东西可以阻止这个问题被命名为“JavaScript 事件处理程序命名的最佳实践”吗？

标签： javascript events backbone.js naming-conventions

【解决方案1】：

我个人更喜欢使用 onEventName 名称来保持 DOM 事件处理程序的本地命名约定。

为click 事件点赞myElement.onclick = function() { /* ... */ }。

所以对于 myEvent，我正在使用名为 onMyEvent 的处理程序。

如果我有事件 stateChange，那么我将使用 onStateChange 处理程序。

但实际上，这个问题对每个开发团队和团队/公司内部的代码风格约定更为具体。

所以这类问题的主要目标是保持所有部分的代码风格相同，以确保可读性。

因此，如果您在一个团队中工作，只需遵守团队的代码编写约定，如果您是单独编写现有代码，请尝试保持其代码风格（确定这种风格是否不明显）。

更新：了解。

事件是什么？大致是在程序外部或内部发起的动作，换句话说，系统中发生了一些事情，例如某些状态变化（键盘、鼠标、I/O 设备等的状态）并不重要（用户单击鼠标或某些程序向系统发送鼠标单击信号）。

假设浏览器窗口已订阅以获取有关某些事件的通知，并且操作系统会尽快将它们发送给它，我们会假设在发生某些事情的同时。因此，如果用户在浏览器窗口处于活动状态并且文档具有焦点时单击鼠标，则浏览器会告诉文档以触发 click 事件。这里我们的onclick 处理程序开始其调用。换句话说，系统告诉我们现在发生了某些状态的变化。我们正在处理这个change，而不是处理一个告诉我们状态已经改变的事实。

假设我们的处理程序命名为onClicked。 由于处理程序的名称是过去时，我们可以得到一个合理的问题：“当点击时，它发生在多长时间前？它发生了多少次被点击了？嗯，也许处理这个动作（或动作？）为时已晚......“。所以这个名字告诉我们在过去的某个时候发生了一些事情。

相比之下，当我们的处理程序命名为onClick 时，显然click 事件只是触发并触发了一次，我们立即收到了通知。我们将处理 点击事件 - 告诉我们鼠标状态现在改变的信息（不是鼠标点击，但点击事件）。

所以过去时的名称更适合我们需要检查某些状态是否已更改的情况。例如。如果变量存储了state = 1，我们可以调用函数isStateChanged();，它将state变量中的值与当前时刻的真实值进行比较。在这里，过去时是命名的好选择。

【讨论】：

【解决方案2】：

onStateChanged 因为只要某种状态发生变化，这个函数就会触发。

【讨论】：

这个答案非常有偏见和基于意见。这很好，如果您要征求意见。但是，我认为 OP 想要了解惯例或最佳实践，而不是意见。我推荐@eugene-naydenov 的答案stackoverflow.com/a/11990334/545296

【解决方案3】：

我在 Google 上搜索了几个名字，并记下了返回的结果数量。您可以了解一些最常见的事件处理程序形式的相对流行度：

stateChanged 168k
stateChange 81k [1] 
handleStateChange 61k
onStateChange 59k 
onStateChanged 12k 
beforeStateChange 2k

[1] 结果显示 stateChange 主要用作事件的名称，而不是处理程序。

使用不同的事件类型会更强烈地推荐 onStateChange 表单：

change [2]
onChange 2000k
onChanged 85k
handleChange 36k
beforeChange 27k
afterChange 22k

click [2]
onClick 48000k
onClicked 58k
handleClick 50k
beforeClick 8k [3]

onDrag 100k
handleDrag 36k
beforeDrag 32k
afterDrag 4k
onDragged 5k

[2] 与编程无关的结果太多。

[3] 显然，某些 Microsoft API 可以预测用户何时点击。

【讨论】：

关于潜台词 [3]，并不是预期点击，而是将事件传递给可能附加的任何处理程序，并让开发人员有机会修改以某种方式的事件数据（可能会阻止事件继续或修改默认行为）。很多框架都做同样的事情。
这里可不是开玩笑的地方。显然有人会从表面上看它。我留下评论是为了确保阅读您答案的任何人都不会因为您的陈述而感到困惑。
函数名称应该恕我直言总是以动词开头，因为它们旨在“做”一些事情。所以handleStateChange 肯定是我的最爱。
搜索结果是否被 JavaScript 过滤？因为不同的语言可以有不同的命名约定。

【解决方案4】：

我的赌注是stateChanged到期：

stateChange 看起来像一个订单，看起来它接收到一个带有 新状态 的参数。
onStateChange 和 onStateChanged 是更多用于存储处理程序的键，而不是处理程序本身的名称。

恕我直言

【讨论】：

这也是我一直在使用的方法。 something.onStateChange = function stateChanged() { /* handle change in state */ }; 表示“开-”。在将回调参数传递给.live( 或.click( 时，我通常更喜欢.click(function handleClick(){ /* do stuff */}。

【解决方案5】：

我通常选择 2 因素事件名称。随着应用程序规模的扩大，您可能拥有多个状态更改的对象，或者可能有一个控制器可以为多个对象广播更改事件，因此希望能够在代码和头脑中区分它们：

Object1:event
Object2:event

至于哪个赛事名称，我觉得还是看个人喜好和一致性。

【讨论】：

【解决方案6】：

我认为应该根据行动发生的实际时刻做出改变。对我来说 onStateChange 意味着它当前正在改变，我可以在改变之前从技术上得到通知。 OnStateChanged 表示该操作已经发生，并在结束时通知我。

因此，在 onStateChange 和 onStateChanged 之间存在重要的意图差异。第一个说“为这种变化做好准备”，而第二个说“它已经发生了”。

编辑：我被这个意图冲昏了头脑，并没有意识到命名本身。为什么是 on 前缀？这是为处理程序保留的。处理程序将执行与该事件相关的事情。所以我会选择 stateChange 和 stateChanged。

【讨论】：