常见命名规范及注释规则 -- 前端篇

1、背景

目前在项目文件、样式、变量、函数等等命名没有专门特定的规范，对项目整洁性、可维护性造成一定的影响；对于多人开发多人迭代项目、命名的统一性可方便人员相互快速了解开发逻辑及业务内容。为提高团队协作效率和前端后期优化维护,下面列出前端命名的规则。

2、文件命名规范

（1）组件文件夹名称：字母小写，横杠连接 => header-navigation、foot-navigation
（2）组件页面名称：字母小写，横杠连接 => header-list.vue、table-detail.vue
（3）页面文件夹名称：字母小写，横杠连接 => purchase-order、delivery-notice
（4）页面名称：字母小写，横杠连接 => order-list.vue、order-detail.vue

3、css 命名规范

（1）字母小写，横杆连接 ；单词数量保持在1-4个区间，且保证语义化。
（2）推荐格式 ： 文件名称 - 页面位置/范围 - 名称/功能
示例 ：order - wrap 、order - header - title、order - middle - line 、order - footer - submit
4.js 命名规范
（1）变量常量命名 ： 小驼峰 ；单词数量在1-3个区间，且保证语义化
let orderParams = {} 、let orderNumber = 100 、 const orderPage = []
（2）函数命名 ：小驼峰 ; 单词数量在1-3个区间，且保证语义化
submitOrder(){}、deleteOrder(){} 、confirmOrder(){}
其中形参实参也要保持小驼峰命名
getOrderList(orderNumber){
Return orderNumber + 100
}
getOrderList(orderNumber)