:::info 以下为在对前端代码进行代码review的时候，需要从以下内容方面对代码进行全面、客观、准确的评估。 :::

1. 代码语法错误、逻辑错误

  1. 代码语法错误：代码中存在拼写错误导致部分代码无法正常运行。

  2. 代码逻辑错误：有些代码虽然语法正常，但是逻辑存在不通、相悖等情况。

    2. 代码编译、运行

    代码是否能通过编译，以及代码是否能按照预期的结果运行，且没有错误。

    3. 代码ESLint的规范

  3. 针对脚手架中配置的ESLint规范是否能够按照规范书写代码

  4. 代码命名规范（项目、目录、变量、常量、组件、方法、props）
  5. 项目、目录的命名规范：均为小写，连接符号未中划线-
  6. 变量、方法的命名规范：均为小驼峰命名方式（lowerCase）,名字需要按照语义化定义
  7. 常量的命名规范：常量的命名均为大写，用下划线连接，名字需要按照语义化定义
  8. 组件的命名规范：组件命名尽量避免单个单词命名（和标签冲突），组件名字为小写，中划线连接，导入的时候需要按照大驼峰（UpperCase）形式，引用的时候，使用中划线形式

  9. props的命名规范：按照小驼峰形式定义，在组件传参的时候，名称按照中划线连接

    4. 注释规范（单行注释、多行注释）

    注释可以使用单行注释和多行注释，需要注释的代码有：

  10. 方法定义，方法的描述、方法的参数、返回值

  11. 组件的定义，组件的使用场景描述、功能作用描述、组件参数、事件、方法注释、组件的使用注释
  12. 业务逻辑的注释，针对业务逻辑进行的注释，说明业务流程，业务定义的规范说明等

  13. 特殊变量、代码块等的备注说明

    5. 目录要求规范（项目的文件目录、.vue文件代码结构）

    按照脚手架规范的项目文件目录进行代码书写，不得随意修改目录结构，如需不用可以删除冗余目录，有新增加的目录，需要和攻坚组沟通定义后再操作。
    .vue文件中，整体按照template、script、style从上到下的结构，script中按照：name、components、directives、filters、extends、mixins、props、data、computed、created、mounted、watch、metods结构进行组件代码书写

    6. css代码规范（css命名、选择器、值、嵌套结构等）

  14. class 统一使用”-“连字符，id使用驼峰

  15. 省略值为 0 时的单位。
  16. 如果 CSS 可以做到，就不要使用 JS。
  17. 建议并适当缩写值，提高可读性，特殊情况除外。
  18. 元素选择器应该避免在 scoped 中出现
  19. 当使用 less/sass的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个 less/sass块应具有的顺序：
  • 当前选择器的样式属性
  • 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
  • 伪类元素 (:before and :after)
  • 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
  • 用 less 的上下文媒体查询
  • 子选择器作为最后的部分

    7. ES6及以上代码覆盖程度、代码简洁程度

    尽可能使用ES6及以上的语法：模板字符串、数组的map/some/every方法、对象解构赋值、箭头函数、默认参数、剩余参数、promise、ESModule、扩展运算符、Set、Map、Async、Symbol、Iterator、Generator
    使用ES6及以上的代码也是为了提升代码的简洁程度，还有一些if、switch、函数参数等方面，尽可能简洁。

    8. 方法封装的健壮性、通用性、可读性

  1. 方法封装首先要满足健壮性：参数类型校验，异常调用处理，参数边界限制、空值校验。
  2. 通用性：一个方法尽可能只做一件事，方法定义的越小，通用性就越好

  3. 可读性：方法中定义逻辑定义清楚，包括变量名字、注释、逻辑判断等，提升代码可读性

    9. 错误处理（统一的接口错误处理、方法错误处理、异步错误处理）

  4. 代码逻辑的空值、类型错误，等错误

  5. 接口清楚错误码处理（常用http请求的状态码处理、业务定义的错误码处理）

  6. 异步错误处理，异步处理的错误拦截

    10. 代码安全（明文密码、统一登录、debugger、上传下载、xss、用户权限、接口传输）

  7. 代码中禁止直接写死密码，或者明文敏感信息

  8. 是否有统一认证登录
  9. 生产环境不要再控制台打印日志，以及debugger
  10. 上传下载的文件校验（文件类型、文件编码、文件内容等，脚本过滤）
  11. 用户访问系统的权限处理

  12. 接口传输要求（项目为主）

    11. 代码性能（计算时间、内存占用）

    代码性能一般有两部分：代码执行的时间，代码运行内存占用。

  13. 代码执行时间：在前端决定了页面加载、响应、交互等用户可感知因素，尽量避免过长时间的代码执行，如大数据量循环、首页加载文件过大过多、事件监听处理流程繁琐、接口相应、网络等。

  14. 代码运行内存占用：代码在运行时，占用内存的情况，JavaScript是可以自动分配内存，有自己的垃圾回收机制，但是也会存在一直被应用，未被垃圾回收的情况。如：过多中间变量存在闭包当中、在执行DOM操作后，及时清除对页面DOM的引用、对于大数据量的处理，占用内存较多，可以使用异步加载，分批，分页等处理、还有过渡引用第三方包（如引入lodash，但是只使用某一个方法），可以使用ESModule形式引入。

    12. 边界限制（JavaScript 数值最大最小值、输入长度限制）

  15. JavaScript对于数值类型的范围限制（Number.MAX_VALUE、Number.MIN_VALUE），如果对于将数值字符串转为数值，需要注意数值的边界，最好不超过Number.MAX_SAFE_INTEGER、Number.MIN_SAFE_INTEGER。

  16. 对于页面输入数据，需要做长度限制，表单类的数据在数据库中有对应的类型长度，要做限制，避免接口报错。

    13. 代码自测

    对于自己开发的代码是否做过代码的自测，是如何自测的，是否有测试用例、测试脚本。

    14. 修复的bug描述

    讲述一个自己修复的一个bug过程，分析bug产生原因，如何解决，是否还有更好方案等等。