web前端工程师编码规范

命名规范

1. 语义化：包括文件名，变量名，方法名，参数名、css选择器、path路径名，语义时应根据业务优先考虑通用的、熟知的、简洁的英文。如

• 登录模块通常用login、logout、userName、phone、password、register、inviteCode等命名
• 权限模块通常用user、role、function、menu等命名
• 获取列表数据，常用getXXXList、getXXXs、getXXXData等命名
• 获取详情数据：常用getXXX、getXXXInfo、getXXXDetail等命名
• 表单提交方法通常用submit、save等命名

2. 驼峰或下划线：多个英文需用驼峰或下划线

• 方法名、css选择器名称偏向于用驼峰
• 变量名、参数名偏向于使用下划线。如apple_price、apple_count、map_center、 map_level
• 文件名、path路径名，偏向于使用非驼峰、非下划线式命名

3. 前后端命名规范最好保持一致
4. 生僻英文命名应考虑加入注释

目录规范

• 全局公共组件应放至src目录下的component文件内
• 局部公共组件应放至该局部模块下面的component文件内
• 全局方法统一放在src/utils/index.js文件内
• 静态资源统一放在src/assets/目录下
• 全局配置文件应在src下

层级清晰

1. 根据业务模块，把代码分模块。模块下仍有多个业务时，继续分模块
2. Vue项目里的接口模块、Store状态管理模块、Views视图模块、router路由模块
3. Html代码缩进，div父元素、子元素命名可采用层级命名，如( orderList > orederItem )

代码封装

1. 多个(两个以上)组件共用的代码需封装为公共组件，减少代码的重复率
2. 多个组件共用的方法可上升至全局方法，如日期格式化、深克隆、去重
3. 使用频率高的公共组件应在main.js全局引用

ES6+的使用

1. 编码时优先考虑ES6的使用，如let、const、解构赋值、箭头函数、async await
2. 字符串String、数组Array、对象Object中新增的ES6+方法可使代码更为简洁
3. css3的弹性盒（display:flex）可使页面布局实现很简单
4. 项目根目录下加入Eslint规则检查

其它

1. 图片规范（理解四种常用图片格式jpg、svg、png、webp）
2. json规范 (设计时注意语义化、层级、简洁)
3. css规范（全局css和局部css）
4. html规范（div应层级清晰、div元素事件属性放最后）

规范的重要性

1. 统一的规范会使代码简洁明了、易阅读
2. 方便开发和维护大项目
3. 减少BUG，发现BUG时迅速定位
4. 方便多人合作项目