前端开发规范总结

前端技术开发标准

• git 分支规范：（A successful Git branching model » nvie.com）
• git commit规范：（http://commitizen.github.io/cz-cli/）
• npm 版本规范：（ Semantic Versioning 2.0.0 | Semantic Versioning）

浏览器兼容：IE11、Edge、chrome、safrai、firefox、360浏览器、qq浏览器

• 在不同浏览器的不同版本中对于同一属性的解释不同
• 在布局过程中需要注意布局何种方式可以滚动即滚动区域的确定。
• 移动端对document.documentElement的解释有差异，有的指向html有的则指向body

前端开发常见case

1、前端开发中输入框注意前后去除空格、输入非法校验。

2、后端接口响应速度一般应维持20ms左右。（对于大接口可以根据用户操作进行拆分等）

3、开发中各方法注意书写注释。

4、在通用布局中，出现些许差异，注意不要轻易更改通用布局样式。

5、在布局过程中，需要考虑到文本内容有超长情况时显示省略号，省略内容可以通过hover显示。在某些情况下，超出需要显示tooltip，不超出则不需要tooltip，可以通过动态创建标签计算长度的方式来判断。

6、空白显示区域需要判断是否需要空白UI。

7、滚动区域是否有监听需求。（如：返回顶部等）。

8、前端html用双引号，js用单引号。

9、变量，函数名采用小驼峰命名（如：theChar   getList()）

10、css类名采用oocss命名方式

11、使用less或sass等预编译css原则上层次深度最大不超过5级。最好保持在3级内。

12、vue 组件中不允许有全局css(会导致全局污染)，在全局只引入一个全局css就可以，所有全局css放到一处，便于整理和排查问题。

13、css中要避免使用!important, 可以使用/deep/深度查找元素

14、内部系统中需要增加水印（尤其注意敏感信息必须增加水印）watermask。

15、注意日期格式在不同浏览器的兼容处理。

16、按钮点击需要防暴力测试。

17、浏览器中字体具有继承性，font-family在最外层统一设置就可以(textarea要单独设置)

font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB","Microsoft YaHei", "微软雅黑", Arial, sans-serif;

18、前端应对后端请求响应状态码非200的状态进行统一处理（拦截数据请求）。

19、对于树状结构需要考虑层次深度，显示的不全状况。

20、兼容性：一般兼容考虑chrome、safari、firefox、IE10+、edge、360安全浏览器（极速模式+兼容模式）。特殊需求特殊处理。

21、项目中应该禁止使用vue  $bus，会导致状态管理混乱

22、蒙层弹出，关闭逻辑：关闭按钮、取消按钮、确认按钮、esc按钮

23、注意输入区域和键盘搜索输入框回车进行搜索

24、当开多个页面的时候，需要考虑一些提交和流程上的问题。

25、git push 前必须要先进性git pull

24、前端是否需要换肤？需要的话要对css进行整理

25、项目开发中mock数据通过yapi，没必要在项目中增加mocker代码和数据。

26、新建列表的顺序问题（需要考虑正序和逆序哪种更符合交需求）

27、查询条件和列表字段排序的功能一般是条件耦合的非独立

28、查询条件记得将页码重置为1

29、搜索：

搜索框清除、搜索建议、需要增加防抖函数，回车搜索、搜索图标点击搜索

30、input 输入框回车完成，blur、focus 操作

31、对于图片、icon增加alt，鼠标hover提示信息展示

32、菜单栏的重复点击效果

33、两行显示省略号：css line-clamp 通过动态计算高度进行hover判断是否展示样式

34、日期格式化：格式形式

代码功能自测

• 不同角色测试：两端+中间（如：CEO、部门领导、普通员工），尤其注意实时拉取数据的时候会造成数据在某个时机下只有部分数据，刷新后才会出现全部数据的情况。
• 边界点测试：文本内容超长、输入内容超长。
• 异常情况测试：非法输入
• 关系测试：如：订阅被订阅关系。（如上下级关系等）
• 交互自测：鼠标形状（cursor），hover效果，点击效果。
• 接口测试：接口返回值、数据格式、网络请求数量，是否会有并发请求（受众用户及请求数量）、setTimeout定时器未清除。
• 兼容性测试：明确使用范围，确定兼容版本。
• 暴力测试:连续点击导致多次提交，是否有节流或者防抖。
• 流程测试：当同时开多个页面的时候，页面处在同一流程环节和不同流程环节中，所看到的数据是什么样的。
• 测试工具：postman、charles、编写测试用例，单元测试工具等
• 全量前回归所有功能：在hybrid项目中，如weex、reactNative、electron开发的项目中，需要每次发版上线前，全量回归一边测试。底层代码变动可能引起关联问题，toC的产品还是要严格执行的
• BugFix测试：通常情况下，会以某一分支作为线上版本，当线上版本出现问题时，需要从线上分支迁移出一个新分支进行bugfix，修补完成后再测试环境进行验证，验证通过后方可合并到线上分支进行线上部署。
• 在目前上线版本至下一版本上线的周期内，修复的bugList需要在下一版本上线前进行再次验证。

页面交互

• 一些敏感、不可逆的操作，比如删除，结束等操作，需要有弹框二次确认
• 加载动画：耗时操作需要有加载状态的提示
• 页面加载、局部加载
• 请求接口
• 按钮重复点击
• 表单提交等更新数据的场景，需要处理前端的重复点击
• 页面宽度适配
• 浏览器宽度变化时，不能出现布局变形
• 至少要适配两个不同宽度（真实平台只适配一个宽度的页面除外）

页面性能

• 网络环境均为局域网下
  • 打开页面到页面可交互时间需小于3s
  • 部分页面，如（商品发布页、运费模板编辑页、店铺装修编辑页），不超过5s
  • 页面引用的资源要进行优化,不能过大
  • 如页面图片过多过大，需做懒加载
• 过度请求
  • 当网络或服务原因，接口响应过慢或报错等情况下，不应发起多个相同的请求
  • 接口响应过慢：应当等待上一个请求响应后再发起下一个请求，或先取消上一个请求再发起
  • 接口报错：不应该间隔过短地进行重试

安全

前端页面需要预防 XSS 攻击

日志

• 需输出关键日志
  • 业务关键流程错误，接口错误，必须输出
  • 日志内容应该包括，模块、调用函数和必要说明，严禁无说明只将数据输出
  • 禁止输出过多无意义的日志

window 全局变量

• 如无必要，不要使用
• 禁止任意、无限制地往 window 上挂全局变量、方法，
• 应当统一挂在有限的几个全局变量上

其他

• 项目公共逻辑需使用通用模块；通用逻辑/模块
• 使用Yarn 代替npm，并提交yarn.lock 文件至 git 仓库
• 编译产物中，静态资源（js, css, image, font 等）需在一个文件夹内，能与页面区分开
• 编译产物中的静态资源，如无例外，文件名都需要有 hash