主干.js事件处理程序命名的最佳做法

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

就像click活动的 myElement.onclick = function() { /* ... */ }一样。

因此，对于myEvent，我正在使用一个名为 onMyEvent 的处理程序。

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

但实际上，这个问题对于每个开发人员团队和团队/公司内部的代码样式约定来说更具体。

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

因此，如果你在一个团队中工作，只要坚持团队的代码编写约定，如果你独自处理现有代码，尽量保持其代码风格（确保这种风格是否明显丑陋）。

更新：理解。

活动是什么？大致而言，它是在程序外部或内部启动的操作，换句话说，系统中发生了一些事情，例如某些状态更改（键盘，鼠标，I/O设备等的状态）无关紧要（用户单击鼠标或某些程序向系统发送鼠标单击信号）。

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

假设我们的处理程序名为 onClicked 。由于处理程序的名字用过去时态说，我们可以得到一个合理的问题："点击时，它发生在多久以前？它被点击了多少次？嗯，也许现在处理这个动作（或动作？".所以这个名字告诉我们，过去某个时候发生了一些事情。

相反，当我们的处理程序被命名为 onClick 很明显 click事件刚刚触发并触发了一次，我们立即收到了有关它的通知。我们将处理点击事件 - 告诉我们鼠标状态现在已更改的信息（不是鼠标单击，而是单击事件）。

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

onStateChanged因为每当某种状态发生变化时，此函数都会触发。

我在谷歌上搜索了几个名字，并记下了返回的结果数量。您可以获得事件处理程序最常见表单的相对流行程度的一些指示：

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

我的赌注是stateChanged到期的：

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

恕我直言

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

Object1:event
Object2:event

至于哪个事件名称，我认为归结为个人喜好和一致性。

我认为应该根据动作发生的实际时刻有所作为。对我来说，onStateChange 意味着它目前正在发生变化，我可以在更改之前收到有关技术上的通知。OnStateChanged 表示操作已经发生，我会收到通知。

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

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