Skip to content

一、代码逻辑书写规范

1. 禁止系列

  • 禁止一个方法超过200行,单一职能原则。
  • 禁止大量的 if else 嵌套。
  • 禁止三层以上的循环操作。
  • 禁止在初始化列表过程中列表项加载请求。
  • 禁止 this.$parent.$parent.$parent 这种类似的代码

2. 推荐系列 【一个好的习惯很难去养成,但是一个不好的习惯就在一念之间,代码永远不是怕麻烦就行】

  • 如果使用 ts 进行业务逻辑的编码,请勿 大量使用 any 类型,请使用准确的类型定义。
  • 当 一个值 需要被2个以上的组件共享时,请使用相关缓存技术进行处理,推荐 vuex。
  • 两层循环时,推荐数量少的循环在外层。
  • 数组过滤请使用 filter、find 等相关数组方法,不推荐使用 for + if 组合。
  • 无特殊场景,推荐使用 forEach、map、some、every 等方式进行数组的遍历操作。
  • 当存在多值判断的包含的场景,请使用数组的 includes 操作 如 ['1', '2', '3'].includes(item), 请不要出现 if (item === '1' || item === '2' || item === '3')。
  • 对于 等值 判断 请使用 '==='。
  • 接口数据返回,具备 ETL 操作,提升页面渲染效率和代码的健壮性。
  • 函数定义,推荐使用箭头函数
  • 推荐使用解构赋值、扩展运算符、rest参数、可选链、空值合并运算符、逻辑或 等提高代码质量,减少无效代码。
  • 推荐使用Symbol,去除代码中的魔术字符串,常用场景:switch case 中的 case
  • 对于非首页加载的资源,请使用动态导入方式进行导入
  • v-for 和 v-if 同时使用的场景,推荐使用 computed 进行数据过滤,提升渲染效率。虽然在vue3 优先级已经做了调整,但是依旧不建议同时出现的场景。
  • 不需要响应式监听的值,请使用 Object.freeze() 进行固化 或者 在 vue2 的版本中可以写在 data 函数中的 return 之外。
  • 推荐使用 唯一 ID 作为渲染数组的key,不推荐使用 index 更不推荐使用随机数
  • props 中的类型、默认值、是否必须 尽量将其完善。
  • 针对于请求参数,请使用请求参数对象进行包裹,同时针对无效参数,进行属性剔除。
  • 针对于 form 表单的验证,请优先使用 表单的 validate 进行校验。
  • 常见的内存泄漏的点:
    • 存储大量数据的全局变量,确保用完以后,设置为 null 或者 重新定义。
    • 被遗忘的计时器。
    • 脱离 DOM 的引用。
      • 当你保存一个 dom 的引用,然后将该 dom 从 html 中删除后,应该将这个引用赋为 null,否则 GC 不会回收,这个 dom 仍然在内存中。
  • 对象的私有属性,以 _ 命名
  • 不推荐使用 children parent 操作子组件
  • 推荐使用模板字符串拼接字符串

3. 坏味道代码示例

  • 变量名不规范、相同代码未进行抽取、乱用逻辑运算、代码逻辑混乱 code-bad-1.png

Released under the MIT License.