前端开发链路规范

协作规范

一、UI协作规范

1. 统一工具
2. 确定图标icon（推荐iconfont 或 图片）
3. 明确尺寸边界（最小宽度、最大宽度）
4. 明确内容边界（文字换行）
5. 明确交互UI变化效果（鼠标形状、颜色值、阴影、loading、空数据提示等）

二、前后端协作规范

1. 需求分析，技术难点讨论
2. 确认接口公共参数、cookie、响应数据格式（如code、分页、msg提示等）
3. 梳理数据来源
4. 数据模型确认（前端交互所需要的数据是否齐全），输出mock数据模型
5. 输出接口文档、参数说明、标记必传标识
6. 联调前，接口做好充分自测
7. 接口数据对接联调

流程规范

三、新建项目规范

1. 项目md说明文件（开发说明、构建说明等）
2. 项目源码放入src中
3. 不需要打包的文件放入static中
4. 一些配置文件放入config中
5. 说明文档放入docs中
6. 构建文件输出到dist中

四、技术选型规范

1. 语言选择（js or ts）
2. 包管理（npm or yarn）
3. UI框架选择
4. 路由、状态器、动画库、脚手架、组件库、SSR/CSR等
5. 时间处理
6. 工具库函数
7. 开发/调试工具

五、GIT规范

1. 明确分支类型，线上分支（master）、测试分支（test）、开发分支(dev)、热修复分支(hotfix)
2. 分支管理流程：几年前画了图，丢了，只能脑补·····
3. 明确分支命名方式：[分支类型]-[版本号]-[用户名]
4. 设置分支权限，受保护分支
5. 合并代码需提交marge request
6. tag规范：[分支名]-[发版日期]-[版本号]，备注发版内容

六、包管理规范

七、灰度规范

八、发布规范

九、私有化规范

开发规范

十、代码风格规范

1. JS，遵循Airbnb规范（Airbnb JavaScript Style Guide_BurningMyself的博客-优快云博客）、推荐ESLint （ESLint简介_chengqiuming的博客-优快云博客_eslint）
2. CSS，遵循BEM规范（CSS中什么是BEM 命名规范？ - DIVCSS5）、（Stylelint的使用_火鸡面多放火鸡的博客-优快云博客_stylelint）
3. HTML，推荐HTMLHint （前端代码检查工具之HTMLHint使用指南_guocongcong-cc的博客-优快云博客_htmlhint）
4. 代码格式化，Prettier (Prettier首页、文档和下载 - 前端代码格式化工具 - OSCHINA - 中文开源技术交流社区)
5. Vue组件文档，Vue Styleguidist （使用Vue Styleguidist编写组件文档 - 简书）
6. codereview提交时 或 定时，（Code Review最佳实践_seven豆的博客-优快云博客_code review 最佳实践）
7. 注释占福20%以上，文件注释（文件开头位置）、函数头部注释（参数、作用、返回值）、边写代码边注释
8. 变量、常量、分支语句必须加上注释
9. 注释格式统一，“/*...........*/”

十一、代码提交规范

1. 格式：[type 类型]: [(scoped 影响范围)] [message 描述]
2. type：
   1. feat：新功能的开发
   2. fix：bug的修复
   3. style：代码格式改变
   4. test：增加测试（调试）
   5. docs：文档格式的改动
   6. perf：性能优化
   7. build：改变了build工具
   8. chore：构建过程或辅助工具的变动
   9. refactor：对已有的功能进行重构
   10. revert：撤销上一次的commit提交
3. scoped： 响应范围：如登录模块、权限模块
4. message： 提交的简短说明
5. 例如：fix：（登录页面表单）添加缺少的图标

十二、命名规范

1. 统一编码格式：UTF-8
2. 遵循语义化，避免出现a,  abc,  cao,  a10086等命名方式
3. 变量：小驼峰
4. 类、构造函数：大驼峰
5. 常量：全大写，下划线连接
6. 私有变量、私有常量、私有函数：下划线开头
7. 函数方法：动宾结构，动词+宾语（如：get/set + 宾语，is/has + 宾语，open/close + 宾语......）

十四、安全规范

1. 访问外部对象时，做好判空判断
2. 功能失效时，相关代码删除，防止意外恢复
3. 注释中不能包含开发人员信息
4. 客户端对外部的输入校验
5. 禁止对外部数据，使用evel函数
6. 禁止对外部数据，直接序列化
7. 外部提供的数据，禁止直接数据组装（比如组装成json对象、数组等）
8. 禁止在localStorage中存储敏感数据

十五、图片规范

1. img标签不推荐设置width、height属性，推荐写上alt属性
2. css中图片地址必须加上引号
3. 更新频率低、使用频率高的小图建议合并成雪碧图
4. 确保将要合并的小图片 与 合并后的雪碧图尺寸皆为偶数
5. 图片小于2k，更新频率高，非移动端、IE7以下，建议使用base64

十六、组件规范（以vue组件为例）

1. mixins放在最前面醒目位置
2. props必须添加注释，是否必传、是否默认值、数据类型
3. data、computed、watch依次编写
4. 生命周期书写顺序，遵循组件的生命周期顺序
5. methods放最后

监控规范

十七、埋点规范

十八、性能监控规范

十九、异常监控规范