开发规范

  1. 用不到的代码删除。
  2. 用不到的变量删除。
  3. 函数加注释。
  4. 始终使用 === 替代 ==。
  5. 不要定义没有用到的 state。
  6. 组件最好定义 defaultProps。
  7. 变量命名语义化，驼峰命名。
  8. 删除无用的调试日志（console.log）。
  9. commit 提交信息，按照 feat 和 fix，写明提交内容概述。
  10. 符合eslint。
  11. 组件命名、组件封装、css 样式及模块化、公用方法定义、注释规范、vscode 配置建议等。

语法规范

按项目内的eslint规则来写，不可关闭。
PS：非特殊情况不可单独关闭eslint，关闭eslint区域需要给出理由通知到位项目负责人及合作团队成员。

三元判断不可多层嵌套

尽量多思考用其它方式解决，而不要太依赖多层三元判断逻辑，错误演示如下图：
image.png

if嵌套不可超过3层以上

image.png

标签样式不能超过6层

标签样式层级不能过深，上限不超过6嵌套，超过嵌套层级单独抽离成一个组件的形式引入

页面及接口容错处理

容错处理必须要做，可以自测页面在断网情况下，出现错误的页面。下面情况必须做容错处理

404页面

比如下图，页面发生404的时候，路由需要匹配404自定义页面。
image.png

接口错误

在获取数据处理方法时，并没有做各种容错处理导至页面错误，因为断网或是数据结构不一样，此封装方法获取解析是错误不正常的，要解决此方法就需要对user进行容错，或者使用try catch包裹或是给user默认参数。
image.png

语法错误

安全规范

  1. 页面加载图片，务必算出骨架，不允许出现堆叠效果。

  2. 项目务必加上全局异常捕获（sentry）和接口状态异常上报（nvwa）

    1.服务端渲染项目

  3. 接口异常，保证程序不要挂掉，保证返回默认值，程序正常运行。

  4. 接口异常，保证及时能得到通知。
  5. 需要seo的地方，注意服务端渲染数据。

2.优化项目关键点

  1. 图片保证webp格式、首屏可采用Imgx、其余可采用NextImgx懒加载(next.js前提下)，图片注意压缩
  2. img定宽高，避免多次重绘，以及添加alt属性
  3. 页面未加载完成需要占位，避免出现堆叠、抖动
  4. antd样式采用按需加载
  5. 删除js/css中无用代码，不能出现打印日志，非业务必须使用的js文件可采取异步加载

可用谷歌自带工具Lighthouse评分，查看网站掉分点去优化

3.浏览器兼容

  1. 跳转页面尽量采用a标签
  2. ie浏览器 input框默认小叉号 input::-ms-clear,::-ms-reveal{display:none;}
  3. 有出现safari图片圆角闪现问题 可采用will-change: transform;
  4. textarea、input 个别浏览
  5. 器无法输入 user-select: text;

前端性能规范

页面加载图片，务必算出骨架，不允许出现堆叠效果。
项目务必加上全局异常捕获（sentry）和接口状态异常上报（nvwa）


服务端渲染项目


1.接口异常，保证程序不要挂掉，保证返回默认值，程序正常运行。
2.接口异常，保证及时能得到通知。
3.需要seo的地方，注意服务端渲染数据。

优化项目关键点


1.图片保证webp格式、首屏可采用Imgx、其余可采用NextImgx懒加载(next.js前提下)，图片注意压缩
2.img定宽高，避免多次重绘，以及添加alt属性
3.页面未加载完成需要占位，避免出现堆叠、抖动
4.antd样式采用按需加载
5.删除js/css中无用代码，不能出现打印日志，非业务必须使用的js文件可采取异步加载
可用谷歌自带工具Lighthouse评分，查看网站掉分点去优化

浏览器兼容


1.跳转页面尽量采用a标签
2.ie浏览器 input框默认小叉号 input::-ms-clear,::-ms-reveal{display:none;}
3.有出现safari图片圆角闪现问题 可采用will-change: transform;
4.textarea、input 个别浏览器无法输入 user-select: text;