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

问题描述 投票：0回答：6

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

  • 状态改变
  • 状态改变
  • onStateChange
  • 状态更改
javascript events backbone.js naming-conventions
6个回答
17
投票

我个人更喜欢使用 

onEventName
名称，以保持 DOM 事件处理程序的本机命名约定。

喜欢 

 myElement.onclick = function() { /* ... */ }
click
活动。

因此，对于 

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

如果我有事件 

stateChange
，那么我将使用 
onStateChange
 处理程序。

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

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

因此，如果您在团队中工作，只需遵守团队的代码编写约定，如果您单独处理现有代码，请尽量保持其代码风格（确保该风格不是明显难看）。

更新：理解。

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

假设浏览器窗口订阅了有关某些事件的通知，并且操作系统尽快将它们发送给它，我们将假设在发生某些事件的同时。因此，如果用户在浏览器窗口处于活动状态并且文档具有焦点时单击鼠标，浏览器会告诉文档触发 

click
事件。这里我们的 
onclick
处理程序开始调用。换句话说，系统告诉我们现在发生了“某种状态的变化”。我们正在处理这个更改，而不是处理告诉我们状态已更改的事实。

假设我们的处理程序名为

onClicked。

 由于处理程序的名称以过去时态表示，我们可以得到一个合理的问题：“单击时，发生了多久？单击了多少次？嗯，也许是根本来不及处理这个动作（或多个动作？）......”。所以这个名字告诉我们过去某个时候发生过一些事情。

相比之下，当我们的处理程序被命名为

onClick

 时，很明显
click 事件刚刚触发并触发一次，我们立即收到通知。我们将
处理
单击事件 - 该信息告诉我们鼠标的状态现在发生了变化（不是鼠标clicked，而是click事件）。 所以过去时的名称更适合我们需要检查某些状态是否已更改的情况。例如。如果变量存储 state = 1

，我们可以调用函数 

isStateChanged();
，它将比较 
state
变量中的值与当前时刻的实际值。在这里，过去时态是命名的一个不错的选择。 



    

    
    
    

    

        

            

                

                    
7
投票

                    
                

            

        

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

    


我用谷歌搜索了一些名字并记下返回的结果数量。您可以了解事件处理程序最常见表单的相对受欢迎程度：

    

    
    
    

    

        

            

                

                    
7
投票

                    
                

            

        

        
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

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



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




我的赌注是

    

    
    
    

    

        

            

                

                    
3
投票

                    
                

            

        

        
，到期时间：



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

    

    恕我直言
    • 
    




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

    

    
    
    

    

        

            

                

                    
1
投票

                    
                

            

        

        
Object1:event
Object2:event




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




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

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

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



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

    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.