常见的前端命名规范

  1. 变量命名

    • 使用小驼峰式命名(lowerCamelCase):变量名首字母小写,之后每个单词首字母大写。例如:myVariablestudentName
    • 常量应当使用全大写,并用下划线分隔(UPPER_CASE_WITH_UNDERSCORES)。例如:MAX_USERS_COUNT
  2. 函数命名

    • 采用小驼峰式命名,表示动作或功能。例如:handleClickcalculateTotalPrice
  3. 类命名

    • 使用大驼峰式命名(PascalCase),即每个单词首字母都大写。例如:UserManagerProductCategory.
  4. CSS类名与ID选择器

    • 类名推荐使用短横线连接法(kebab-case 或称为 “slug” case),例如:.my-class-name
    • ID选择器虽然不常用,但也建议遵循类似规则,如:#my-id
  5. React组件命名

    • 组件名称通常也遵循大驼峰式命名,因为它们代表的是自定义元素。例如:MyComponentAppHeader
  6. 事件命名

    • 自定义事件名推荐使用小驼峰式命名,但根据实际需要可能包含特定前缀来区分是用户行为还是系统内部事件,例如:onButtonClick
  7. 布尔值变量

    • 可以通过is、has、should等前缀来表明变量为布尔类型且表达一种状态,例如:isVisibleisEnabled
  8. 枚举值

    • 枚举类型的常量可以使用全大写并用下划线分隔,或者也可以用单个大写的名词表示,例如:COLOR_REDStatusActive
  9. 文件和目录

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值