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

Question

假设我有一个在视图中触发的函数，当某种状态改变时会触发。

• stateChange：状态改变
• stateChanged：状态已改变
• onStateChange：当状态改变时
• onStateChanged：当状态已改变时

建议选用 "onStateChanged"，因为它更加明确地表示该函数是在状态已改变后被调用，而不是在状态改变时。

- Nick Dima

---

有什么特别的原因阻止这个问题被命名为“JavaScript事件处理程序命名的最佳实践”吗？ - conny

Answer 1

我个人更喜欢使用 onEventName 的命名方式，保留DOM事件处理程序的本地命名约定。

例如，对于click事件，我会使用myElement.onclick = function() { /* ... */ }。

对于myEvent，我会使用名为onMyEvent的处理程序。

如果有stateChange事件，则我会使用onStateChange处理程序。

但是，这个问题实际上更具体地涉及到开发团队和公司内的代码风格规范。

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

因此，如果您正在团队中工作，请坚持团队的代码编写约定；如果您独自处理现有代码，请尽量保持其代码风格（当然，如果该风格不明显丑陋）。

更新：理解。

什么是事件？ 粗略地说，它是一个在程序内外启动的动作，换句话说，系统中发生了某些事情，例如，某些状态改变（键盘、鼠标、I/O设备的状态等），不管是用户点击了鼠标还是某个程序向系统发送了鼠标点击信号。

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

让我们假设我们的处理程序名称为onClicked。由于处理程序的名称在过去式中，因此我们可以得出一个合理的问题：“点击了多久? 它被点击了多少次？嗯，也许现在处理该操作（或操作）太晚了……”。所以这个名字告诉我们在过去的某个时间发生了什么。

相反，当我们的处理程序名称为onClick时，显而易见的是click事件刚刚发生了一次，我们立即收到了通知。我们将要处理点击事件，这个信息告诉我们鼠标状态已经立即改变(不是鼠标点击，而是单击事件)。

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

- Eugene Naydenov

Answer 2

onStateChanged 是一个函数，在某种状态发生改变时会触发。

该函数的详细解释请参考相关文档。

- Santiago Elvira Ramirez

---

这个答案非常偏见和基于个人意见。如果你是在寻求意见，那么这没问题。然而，我认为OP更想知道约定或最佳实践，而不是意见。我推荐看看@eugene-naydenov的回答https://dev59.com/Emct5IYBdhLWcg3wkuTE#11990334 - therealklanni

Answer 3

我谷歌了几个名称并注意到返回结果的数量。您可以得到一些有关最常见事件处理程序形式相对流行程度的指示：

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 可以预测用户何时单击。

- SharkAlley

---

关于子文本[3]，并不是预期的点击事件，而是将事件传递给任何可能附加的处理程序，并为开发人员提供修改事件数据的机会（例如阻止事件继续或修改默认行为）。许多框架都采用相同的方法。 - therealklanni

这里不是开玩笑的地方。肯定会有人认真对待你的话。我留下了评论，以确保任何阅读你答案的人不会因为你的陈述而感到困惑。 - therealklanni

在我看来，函数名应该始终以动词开头，因为它们的设计目的是“执行”操作。因此，handleStateChange 绝对是我最喜欢的。 - Chris Kobrzak

搜索结果是否由JavaScript过滤？因为不同的语言可能有不同的命名约定。 - Michael Freidgeim

Answer 4

我认为 stateChanged 是由以下原因引起的:

• stateChange 看起来像是一个命令，并且似乎接收一个带有 新状态 的参数。
• onStateChange 和 onStateChanged 更多地是用于存储处理程序而不是处理程序本身的名称。

我个人的看法

- fguillen

---

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

Answer 5

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

Object1:event
Object2:event

至于事件名称，我认为这取决于个人偏好和一致性。

- jForrest

Answer 6

我认为应该根据实际发生的时刻来区分。对于我来说，onStateChange意味着它正在发生变化，从技术上讲，在变化之前我可以被通知到。

而onStateChanged则意味着动作已经发生了，我在最后被通知到。

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

编辑：我被意图带走了，没有意识到命名本身。为什么要加上on前缀？这是保留给处理程序的。处理程序将执行与该事件相关的操作。所以我会选择stateChange和stateChanged。

- mosu