前端开发规范

代码命名规范

• 务必杜绝使用拼音；
• 变量命名语义化；
• 组件名字：使用大驼峰；

• 普通文件名字：使用小驼峰；

  CSS相关

• 命名：使用小驼峰；

• CSS 复用：将重复 css 样式抽离；

• 当值为 0 时不加单位；

  git commit 提交规范：

• commit 提交信息，按照 feat 和 fix，写明提交内容概述参考。

  • 提交说明包含了下面的结构化元素，以向类库使用者表明其意图：
  • fix: 类型 为 fix 的提交表示在代码库中修复了一个 bug（这和语义化版本中的 PATCH 相对应）。
  • feat: 类型 为 feat 的提交表示在代码库中新增了一个功能（这和语义化版本中的 MINOR 相对应）。

业务：

• 退出登录的时候，清除本地localStotage
• cdn 务必使用自己公司的，可以开发类似工具，上传到七牛。

• 线上环境静态资源上传至CDN

  代码开发

• 用不到的代码删除。

• 用不到的变量删除。

• 函数加注释，要使用 /* /。

  /**
  * 标题
  * @description 函数说明
  * @author 作者
  * @param {Array<Route>} array: 传参数说明
  * @param {Route | null} parent: 传参数说明
  * @return {Array<Route>} 返回值说明
  */

• 始终使用 === 替代 ==。

• 不要定义没有用到的 state。
• 删除无用的调试日志（console.log）。
• 符合eslint。
• 组件命名、组件封装、css 样式及模块化、公用方法定义、注释规范等
• 请求状态码、关键的参数，定义成语义化常量并增加注释 ```javascript // bad if (key === 1) …

// good const SUCCESS_CODE = 1; if (key === SUCCESS_CODE) …

- 函数参数超过两个以上用对象
- 三元运算符不能嵌套
- axios 要创建实例
```javascript
// TODO

vscode 配置

• 保存自动格式化

  React

• 组件最好定义 defaultProps；

• React 组件文件名后缀使用 jsx 或 tsx；
• 引用 Store 中数据时不要使用解构“…”，应按需引用参数；（TODO：增加示例）
• 单个组件行数不超过 300 行
• 初始化 render 次数不超过 5 次
• class 组件中函数使用箭头函数

• return 组件时 dom 结构嵌套层级不超过 10 层

  // TODO

• 避免不必要的嵌套

  return (
    <>
    <App />
    <App />
  </>
  )

  图片处理

安全保障

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

服务端渲染项目

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

优化项目关键点

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

浏览器兼容

• 跳转页面尽量采用a标签
• ie浏览器 input框默认小叉号 input::-ms-clear,::-ms-reveal{display:none;}
• 有出现safari图片圆角闪现问题 可采用will-change: transform;

• textarea、input 个别浏览器无法输入 user-select: text;

• 防止 xss、csrf 攻击

• cookie 避免 key 值冲突、不能超过 300b；