一、规范命名的重要性
易懂、通用、规范、标准、专业性、是经验积累的体现
1.1、常见命名方法
序号 | 命名方法 | 解释 |
1 | 全小写 | |
2 | 全大写 | |
3 | 驼峰:小驼峰命名法 | |
4 | 驼峰:大驼峰命名法 | |
5 | 烤串命名法 / 脊柱命名法 | |
6 | 下划线分隔法 |
二、项目名
采用小写字母和中划线(-)连接的方式命名,如my-project
序号 | 规则 | 举例 |
1 | 采用小写字母和中划线(-)连接的方式命名 | my-project |
三、目录 / 文件夹
重要:目录架构既要符合前端行业通用规则,又要满足项目的业务架构。层次分明,分工明确,从目录架构反过来能理解整个项目的业务架构。
3.1、整体原则
序号 | 原则 | 解释 |
1 | 简洁明了 | 命名应简洁明了,能够清晰地表达文件夹/目录的用途或内容。 |
2 | 一致性 | 在整个项目中保持命名规则的一致性,以便其他开发者能够快速理解和使用。 |
3 | 小写字母 | 为了避免大小写敏感问题,建议使用小写字母进行命名。 |
4 | 使用连字符 | 如果文件名包含多个单词,建议使用连字符(-)或下划线(_)进行分隔,但通常连字符在前端项目中更为常见。 |
3.2、具体规则
序号 | 规则 | 举例 |
1 | 采用小驼峰(camelCase)命名法 即第一个单词首字母小写,后续单词首字母大写。 如有复数结构时(此文件夹包含多个子文件夹或文件),可以采用复数命名法,如components、assets | camelCase |
2 | 也可以考虑使用小写字母和中划线(-)连接的方式,但这种方式在前端项目中较少见,更多用于文件名或类、ID的命名 | my-task |
3.3、通用命名
序号 | 名称 | 解释 |
1 | src | 包含源代码的文件夹 |
2 | components | 包含Vue组件的文件夹(复数命名) |
3 | assets | 包含静态资源的文件夹(复数命名) |
4 | utils | 包含工具函数的文件夹(复数命名) |
5 | views | 包含路由页面的文件夹(复数命名) |
3.4、注意事项
序号 | 事项 | 解释 |
1 | 避免使用保留字 | 避免使用操作系统或编程语言中的保留字作为文件夹/目录名,以免引起冲突或误解。 |
2 | 避免使用空格和特殊字符 | 空格和特殊字符可能会在某些环境下导致问题,因此建议使用下划线(_)或中划线(-)作为单词之间的分隔符。 |
3 | 考虑国际化 | 如果项目需要支持多种语言,命名时应考虑国际化因素,避免使用具有特定文化含义的词汇。 |
3.5、gitee / github 实例
序号 | 来源 / 项目 | 截图 | 目录分析 |
1 | gitee / vue | 1、小写命名 2、中划线 / '-' 命名 vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. | |
2 | gitee / RuoYi | 1、小写命名 2、中划线 / '-' 命名 RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本 | |
3 | gitee / element | 1、小写命名 3、底划线 / '_' 命名 https://gitee.com/ElemeFE/element/tree/dev |
四、文件名
4.1、整体规则
同 3.1 整体原则
4.2、具体命名规则
序号 | 规则 | 详细 |
1 | 组件文件名 | 1、对于Vue、React等框架的组件文件,通常使用小驼峰(camelCase)命名法,但文件名本身(不包括扩展名)往往使用小写字母和连字符(-)连接的方式,以匹配HTML中的class命名习惯。例如,MyComponent.vue在HTML中可能作为<my-component>使用,因此文件名可以命名为my-component.vue。 2、另一个常见的做法是,即使内部组件类名使用小驼峰,文件名也保持小写字母和连字符的形式,如UserProfile.vue的文件名可以命名为user-profile.vue。 |
2 | 样式文件名 | 样式文件(如CSS、SCSS、LESS等)通常使用小写字母和连字符(-)连接的方式命名,以匹配CSS类名的命名习惯。例如,styles.css、main-layout.scss。 |
3 | 脚本文件名 | JavaScript、TypeScript等脚本文件可以使用小写字母和连字符(-)或点(.)连接的方式命名,但点通常用于表示文件类型或模块结构(如utils.js、app.module.ts)。然而,在前端项目中,更常见的做法是使用小驼峰命名法(不包括扩展名),如main.js、app.ts,或者简单的文件名加上扩展名,如index.js。 |
4 | 图片和媒体文件名 | 1、图片和媒体文件(如PNG、JPG、GIF、SVG等)通常使用小写字母、数字和连字符(-)命名,以描述文件的内容或用途。例如,logo.png、background-image.jpg。 2、对于需要描述多个属性的图片,可以使用连字符分隔属性,如user-profile-avatar.png。 |
5 | 测试文件名 | 测试文件(如单元测试、集成测试等)通常使用与被测试文件相同的命名规则,但会在文件名后添加.test、.spec或.spec.js等后缀以标识其为测试文件。例如,user-profile.spec.js |
4.3、注意事项
序号 | 事项 | 详细 |
1 | 避免使用保留字 | 避免使用操作系统或编程语言中的保留字作为文件名,以免引起冲突或误解 |
2 | 避免使用空格 | 空格可能会导致在某些环境下出现问题,因此建议使用连字符(-)或下划线(_)作为单词之间的分隔符 |
3 | 考虑文件类型 | 文件名应包含文件类型扩展名,以便快速识别文件的类型和内容 |
4.4、实例
序号 | 来源 / 项目 | 截图 | 目录分析 |
1 | gitee / vue | 1、小写 2、烤串 vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - Gitee.com | |
2 | gitee / RuoYi | 1、小写 2、驼峰 3、底划线 RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本 - Gitee.com | |
3 | gitee / element | 1、小写 2、烤串 element: Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 - Gitee.com |
五、CSS 样式
class / id
驼峰、烤串命名、蛇形命名
CSS 命名规范,将省下你大把调试时间 - 知乎
常用CSS的命名规范:_Aiden_xiaoGuo的博客-CSDN博客_css命名规范
六、事件
6.1、handle + 行为描述
考证element-ui
6.2、动词+内容
js事件名称集_aら 淼的博客-CSDN博客_事件名称
https://wenku.baidu.com/view/8fcc71a96b0203d8ce2f0066f5335a8102d2661d.html
更多内容待补充
七、变量
js命名规范 - 腾讯云开发者社区-腾讯云
https://www.csdn.net/tags/MtjaQg1sMDgwMjMtYmxvZwO0O0OO0O0O.html
JavaScript:变量命名的规范_Argonaut_的博客-CSDN博客_js变量命名规范
js变量命名规范 - 百度文库
八、方法
如 vue method 的方法
JavaScript命名规范_菜鸟_小卡酷谋的博客-CSDN博客_js命名规范
九、url 及 参数
1、URL越短越好
2、避免太多参数
3、目录层级较少
4、具有描述性
5、包含关键词
6、字母全部小写
7、使用连词符
网站URL规范化设计的8个命名规则_目录_文件_字母
URL规范有哪些-SEO-PHP中文网
URL命名规范_风的着点的博客-CSDN博客_url命名规范
url 命名规范_whatday的博客-CSDN博客_url命名规范
URL命名规则 - 百度文库
十、注释
前端:HTML、CSS、JavaScript 代码注释 / 注释与代码规范_html注释-CSDN博客
十一、git 提交
vue3-ts:Commitlint / 规范化Git提交消息格式_commitlint 规范-CSDN博客
十二、欢迎交流指正
遵循命名规则,可以创建一个结构清晰、易于维护的前端项目
十三、参考链接
规范:接口返回的字段命名规范考证_php接口返回驼峰还是下划线-CSDN博客
规范:前端代码开发规范_前端开发规范-CSDN博客
前端代码规范-命名规范-阿里云开发者社区
前端代码命名规范_Tl丶落樱无痕的博客-CSDN博客_前端代码命名规范
Aotu.io - 前端代码规范
概述 | Aotu.io - 前端代码规范
微社区技术规范站
TGideas文档库
GitHub - ecomfe/spec: This repository contains the specifications.
GitHub - standard/standard: 🌟 JavaScript Style Guide, with linter & automatic code fixer
ES6 入门教程
ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档
代码规范 - Apache ECharts