Question

我对JavaScript中的方法/函数的命名约定有疑问。我已经看到大多数事件名称以“on”开头的地方，例如“onClick”。如果onClick调用一个函数，那么该函数名称是否应该以“on”开头？

例如：

<Button onClick={() => onClose()}>CANCEL</Button>

onClose(){
do something...
}

或者是否拥有：

<Button onClick={() => close()}>CANCEL</Button>

    close(){
    do something...
    }

Answer 1

我已经看到大多数事件名称以“on”开头，例如“onClick”。

他们没有。

用于绑定事件处理程序的非常老派的HTML属性从
与JS的老派事件绑定在属性名称on上使用window.onload = function () ...
React使用on绑定JSX中的事件处理程序

Modern JS使用addEventListener只接受事件名称作为参数（addEventListener("load", function () ...）。

如果onClick调用一个函数，那么该函数名是否应该以“on”开头？

没有要求这样做。

我没有看到任何编码约定。

Answer 2

方法/函数名称应告诉任何读取代码的人，该方法/函数的作用。

Answer 3

on[name]命名对话用于表明如果您为该属性分配了一个函数，则将为事件[name]调用此函数。

但是为该事件调用的函数不会有on前缀。您通常通过它所执行的操作来命名该函数。因此，如果该函数关闭某些内容，则在调用该函数时将其称为close，例如对话框已关闭，您可以将其命名为onClose

Answer 4

在命名约定时，必须注意不要在函数中隐藏其他函数。此外，最近我遇到了全局范围内名为close的回调问题，由于其他浏览器原生函数在范围内存在而无法调用。因此，我通常会远离关闭，打开等名称，而是使用更多描述性名称作为closePopUp等。

Answer 5

您正在讨论的onXyz约定与通过HTML事件属性（如示例中）或通过JavaScript中的DOM对象属性（即window.onload = ...）设置事件的旧范式有关。）。 这两种技术都存在严重缺陷，并且都不应继续使用（使用 .addEventListener() ）。**实际上，事件名称本身实际上从未以{{ 1}}。例如，on事件称为click，而非click，onclick表示on出现时您想要执行的操作。但是，这两种过时技术对于事件注册而言是独一无二的，而不是一般的功能/方法，因此click范例不是您应该担心的事情。

函数和方法有命名约定：

他们应该有类似动词的名字来表明他们表演了行为/任务（而数据属性应该具有类似名词的名称）表明他们存储的信息。
如果要将函数作为函数或函数的方法调用一个对象，它应该写在＆＃34;驼峰的情况下＆＃34; （第一个字在哪里是小写的，但任何/所有附加单词都以大写字母开头信（即on）。
如果该函数用作构造函数（要调用）使用doSomethingCool运算符来创建对象的新实例）应写在＆＃34; pascal case＆＃34; （每个单词以a开头大写字母）。此约定警告其他开发人员他们应该使用new运算符调用该函数。

Javascripts

5 个答案: