1、背景
目前在项目文件、样式、变量、函数等等命名没有专门特定的规范,对项目整洁性、可维护性造成一定的影响;对于多人开发多人迭代项目、命名的统一性可方便人员相互快速了解开发逻辑及业务内容。为提高团队协作效率和前端后期优化维护,下面列出前端命名的规则。
2、文件命名规范
组件文件夹名称:字母小写,横杠连接 => header-navigation、foot-navigation组件页面名称:字母小写,横杠连接 => header-list.vue、table-detail.vue页面文件夹名称:字母小写,横杠连接 => purchase-order、delivery-notice页面名称:字母小写,横杠连接 => order-list.vue、order-detail.vue
3、css 命名规范
字母小写,横杆连接 ;单词数量保持在1-4个区间,且保证语义化。推荐格式 : 文件名称 - 页面位置/范围 - 名称/功能
示例 :order - wrap 、order - header - title、order - middle - line 、order - footer - submit
4、js 命名规范
变量常量命名 : 小驼峰 ;单词数量在1-3个区间,且保证语义化 let orderParams = {} 、let orderNumber = 100 、 const orderPage = []函数命名 :小驼峰 ; 单词数量在1-3个区间,且保证语义化 submitOrder(){}、deleteOrder(){} 、confirmOrder(){} 其中形参实参也要保持小驼峰命名 getOrderList(orderNumber){ Return orderNumber + 100 } getOrderList(orderNumber)
注释规则
结构注释 分级注释,分块注释 方法注释 方法基本功能注释,入参注释,复杂逻辑注释 属性值注释 多状态属性全部场景注释
布尔值注释 t/f注释