命名规范
- 语义化：包括文件名，变量名，方法名，参数名、css选择器、path路径名，语义时应根据业务优先考虑通用的、熟知的、简洁的英文。如
- 登录模块通常用login、logout、userName、phone、password、register、inviteCode等命名
- 权限模块通常用user、role、function、menu等命名
- 获取列表数据，常用getXXXList、getXXXs、getXXXData等命名
- 获取详情数据：常用getXXX、getXXXInfo、getXXXDetail等命名
- 表单提交方法通常用submit、save等命名
- 驼峰或下划线：多个英文需用驼峰或下划线
- 方法名、css选择器名称偏向于用驼峰
- 变量名、参数名偏向于使用下划线。如apple_price、apple_count、map_center、 map_level
- 文件名、path路径名，偏向于使用非驼峰、非下划线式命名
- 前后端命名规范最好保持一致
- 生僻英文命名应考虑加入注释
目录规范
- 全局公共组件应放至src目录下的component文件内
- 局部公共组件应放至该局部模块下面的component文件内
- 全局方法统一放在src/utils/index.js文件内
- 静态资源统一放在src/assets/目录下
- 全局配置文件应在src下
层级清晰
- 根据业务模块，把代码分模块。模块下仍有多个业务时，继续分模块
- Vue项目里的接口模块、Store状态管理模块、Views视图模块、router路由模块
- Html代码缩进，div父元素、子元素命名可采用层级命名，如( orderList > orederItem )
- 一个文件中代码量很大时，应该把重要的代码放在前面
代码封装
- 多个(两个以上)组件共用的代码需封装为公共组件，减少代码的重复率
- 多个组件共用的方法可上升至全局方法，如日期格式化、深克隆、去重
- 使用频率高的公共组件应在main.js全局引用
ES6+的使用
- 编码时优先考虑ES6的使用，如let、const、解构赋值、箭头函数、async await
- 字符串String、数组Array、对象Object中新增的ES6+方法可使代码更为简洁
- css3的弹性盒（display:flex）可使页面布局实现很简单
- 项目根目录下加入Eslint规则检查
其它
- 图片规范（理解四种常用图片格式jpg、svg、png、webp）
- json规范 (设计时注意语义化、层级、简洁)
- css规范（全局css和局部css）
- html规范（div应层级清晰、div元素事件属性放最后）
规范的重要性
- 统一的规范会使代码简洁明了、易阅读
- 方便开发和维护大项目
- 减少BUG，发现BUG时迅速定位
- 方便多人合作项目
网友评论