在项目开发中，合理的命名规范对于提高代码可读性、可维护性和团队协作效率非常重要。以下是常见的命名规则和一些常用的命名建议，适用于不同场景，如变量、函数、类、文件、组件等。
一、命名规范的基本原则
- 清晰表达意图：命名应能清晰表达变量、函数、类或文件的用途和功能，避免模糊不清。
- 简洁且一致：命名要简短但具备足够的表达能力。不同模块之间的命名规则应保持一致。
- 使用英文：项目中建议使用英文命名，除非是特定的业务需求或目标用户需要使用其他语言。
- 避免使用缩写：尽量避免过度缩写，除非缩写已广为人知，且不会影响理解。
二、常用命名规范
1. 变量命名
-
使用小驼峰命名法（camelCase）：变量和函数名通常使用小驼峰命名法，首字母小写，后续单词的首字母大写。
- 示例：
userName、itemList、isActive
- 示例：
-
布尔类型变量：通常使用
is、has、can等前缀来表示布尔值。- 示例：
isVisible、hasPermission、canEdit
- 示例：
-
常量命名：使用全大写字母和下划线分隔。
- 示例：
MAX_LENGTH、API_URL
- 示例：
-
数组和集合命名：通常以复数形式命名。
- 示例：
userList、items、productIds
- 示例：
2. 函数命名
-
使用动词或动词短语：函数名应清楚表达它的行为或动作。
- 示例：
getUserData()、calculateTotal()、fetchData()
- 示例：
-
事件处理函数：通常以
on开头，表示该函数处理某个事件。- 示例：
onClick()、onSubmit()、onResize()
- 示例：
-
避免过长的函数名：保持函数名简洁，但确保表达清晰。可以使用简短的动词和名词组合。
- 示例：
getUser()、setValue()、updateItem()
- 示例：
3. 类命名
-
使用大驼峰命名法（PascalCase）：类名通常使用大驼峰命名法，即每个单词的首字母大写。
- 示例：
UserManager、ItemList、OrderController
- 示例：
-
表示具体功能的类名：类名应尽量描述它的职责和功能。
- 示例：
UserService、DatabaseHelper、AuthenticationManager
- 示例：
-
接口命名：接口名常以
I开头或以able、ableTo等结尾（根据团队规范）。- 示例：
IUser、IDatabase、Readable
- 示例：
4. 文件命名
-
模块化文件命名：文件命名应清晰表达文件的功能或模块名。通常使用小写字母和连字符（kebab-case）分隔单词。
- 示例：
user-service.js、app-config.js、login-form.js
- 示例：
-
组件文件命名：对于前端项目中的组件，常用大驼峰命名法（PascalCase）。
- 示例：
UserProfile.js、LoginForm.jsx、NavBar.vue
- 示例：
-
样式文件命名：样式文件通常与相应的组件文件一起命名。
- 示例：
user-profile.css、login-form.scss
- 示例：
-
测试文件命名：测试文件通常与源文件命名一致，添加
.test后缀，或者在文件名后加上.spec。- 示例：
user-service.test.js、login-form.spec.js
- 示例：
5. 目录命名
-
功能性目录命名：目录名通常与功能相关，使用小写字母，单词之间用连字符（kebab-case）分隔。
- 示例：
src/components、src/services、src/utils
- 示例：
-
页面目录命名：页面目录通常根据页面名称命名，并与功能区分开。
- 示例：
src/pages/login、src/pages/dashboard
- 示例：
-
公共资源目录：静态资源、图片、字体等公共文件应存放在
assets或public目录下。- 示例：
src/assets/images、src/assets/fonts
- 示例：
6. API 和网络请求命名
-
API 路径命名：API 路径应该简洁且描述清楚资源。
- 示例：
/users、/products/:id、/orders
- 示例：
-
函数命名：与 API 请求相关的函数命名通常使用
fetch或get、post等动词开头，清楚表达请求意图。- 示例：
fetchUserData()、getProductList()、createOrder()
- 示例：
7. 数据库命名
-
表名：表名通常使用复数形式，描述表的内容。
- 示例：
users、orders、products
- 示例：
-
字段命名：字段名应该清楚地描述字段的意义，通常使用小写字母和下划线分隔单词（snake_case）。
- 示例：
first_name、created_at、total_price
- 示例：
-
索引命名：索引通常使用表名和字段名结合，并以
idx_开头。- 示例：
idx_users_email、idx_orders_user_id
- 示例：
三、常见命名实例
-
用户模块：
userService.js：处理用户相关的服务（如登录、注册、用户信息等）。userProfile.js：显示用户资料的组件。userData.js：获取用户数据的 API 请求文件。
-
产品模块：
productList.js：显示所有产品的列表组件。productDetail.js：显示单个产品详情的组件。productService.js：处理与产品相关的 API 请求。
-
工具函数：
dateUtils.js：处理日期格式化、转换等功能的工具文件。validationUtils.js：处理输入验证等功能的工具文件。
-
常量和配置：
constants.js：存储常量值，如状态码、消息等。config.js：存储项目的全局配置，如 API 地址等。
以下是我常用的命名：
常用命名
父级：XX + parent
子集：XX + children,XX + child
登录：login,login_area,login_part
遮罩层：cover,over,mask
弹窗：功能 + alert
编辑：edit
新增：add ,append + 继续
批量上下架：batch
删除：delete + alert
头像：avatar,head_img
退出：exit,break,break_login,quit
修改信息：edit_info
面包屑：crumb/bread,+_content,_view,_tab
全屏：full_screen,scale_screen
锁屏：lock,locking
解锁：unlock
通知：notice + alert
刷新：refresh
树形菜单：tree_menu,tree_items,tree_box,menu
输入框：功能(+inp)
搜索：search,search_area,(query,query_area,find)
重置：reset,reset_btn
序号：record
名称：功能+name trade_name,class_name
图片：img,image
价格：price,money
导航栏：nav,top_nav,head_nav,bottom_nav,footer_nav,main_nav
轮播图：banner,banner_view,banner_content
分页：page,page_content,paging_part
底部页码：bottom_page,footer_page,page,pages,pageNum,totalPage
上/下一页：lastPage,nextPage
总计：total,total_num,total_price,all
警告弹出窗：warn,dangerous
确定：sure,define,confirm,ensure
取消：cancel
地址：address
电话：phone,tel
账号：account
密码：password
名称：name,title
隐藏：hide,conceal,hidden
时间：time,create_time,start_time,end_time
开始：begin,start
结束：end,finish
个人信息：userInfo,userAccount
图片路径：img_url,img
操作：operate
函数：
列表接口函数:getData
渲染：render
跳转：target,jump +XX
出现：appear,show
消失：hide,hidden
图片上传：upload
点击上下架：point
编辑：edit
新增：add
确定：sure,verify
继续添加:addContinue
删除：cut,del
搜索：XX + search
详情：XX + details
运动：rotates,sport,run
轮播图渲染：bannerRender
全选：selectAll
登陆超时：loginOut
提示信息：show,alert+(success/error/info)
字符串： str,XX + Str
变量：
存储id： XX+id
数据：XX + data,globalData,filterData
状态：state,status
四、总结
合理的命名规范有助于提升代码的可读性和可维护性。常见的命名规则包括：
- 变量：小驼峰命名法，布尔变量使用
is、has等前缀。 - 函数：使用动词或动词短语，事件处理函数以
on开头。 - 类：大驼峰命名法（PascalCase）。
- 文件和目录：使用清晰、简洁且具有描述性的命名，前端文件使用小写和连字符（kebab-case）。
- API：简洁且符合 RESTful 风格。
遵循一致的命名规范将有助于项目的长期维护，并为团队协作提供良好的基础。
扫一扫
6886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
