常见的前端命名规范

1. 变量命名：

   • 使用小驼峰式命名（lowerCamelCase）：变量名首字母小写，之后每个单词首字母大写。例如：myVariable、studentName。
   • 常量应当使用全大写，并用下划线分隔（UPPER_CASE_WITH_UNDERSCORES）。例如：MAX_USERS_COUNT。

2. 函数命名：

   • 采用小驼峰式命名，表示动作或功能。例如：handleClick、calculateTotalPrice。

3. 类命名：

   • 使用大驼峰式命名（PascalCase），即每个单词首字母都大写。例如：UserManager、ProductCategory.

4. CSS类名与ID选择器：

   • 类名推荐使用短横线连接法（kebab-case 或称为 “slug” case），例如：.my-class-name。
   • ID选择器虽然不常用，但也建议遵循类似规则，如：#my-id。

5. React组件命名：

   • 组件名称通常也遵循大驼峰式命名，因为它们代表的是自定义元素。例如：MyComponent、AppHeader。

6. 事件命名：

   • 自定义事件名推荐使用小驼峰式命名，但根据实际需要可能包含特定前缀来区分是用户行为还是系统内部事件，例如：onButtonClick。

7. 布尔值变量：

   • 可以通过is、has、should等前缀来表明变量为布尔类型且表达一种状态，例如：isVisible、isEnabled。

8. 枚举值：

   • 枚举类型的常量可以使用全大写并用下划线分隔，或者也可以用单个大写的名词表示，例如：COLOR_RED、StatusActive。

9. 文件和目录：

   • 图片：用下划线分割，头部表示图片大类，如 icon_home.png。
   • 文件名与模块：名采用小写字母，多个单词间用 - 或 _ 连接，如 user-profile.js 或 user_profile.js。
   • 目录结构：遵循模块化原则，如 src/components/Header/index.js。