一分钟教你如何做代码review

56 阅读2分钟

以下列出了我们在开发过程中遇到的常见问题 :

! ! !写注释

data()中的定义的数据必须都是要用的

可能出现的问题:在data中定义了数据项,却没有在代码中使用

解决:定义数据项时,不要太随意,每一项都要在代码中使用

无用的代码要删除

可能出现的问题:项目中有很多注释的代码,或者是没有被使用的代码。

解决:删除注释的代码块, 删除无用的代码块。

不要有随意的空行,代码要对齐

可能出现的问题:代码没有注意缩进、对齐

解决:代码要按eslint的要求写,代码要缩进对齐

尽量少用字符串的拼接,而用计算属性

image.png

上面是改前,下面是修改后

image.png

函数、变量的名字语义化

可能出现的问题:命名随意。例如:用拼音命名,风格不一致(一会首字母大写,一会又改小写....),不能望文见义

解决:函数名采用动宾结构: 动词+名词。 getEmployes, delOrders ,不会就查字典

一个函数只做一件事,取名字要注意与做的事件匹配

下面的这段代码有两个问题:

  • 这个函数做了两件事;
  • id一般来表示编号,而这里却用来保存字符串;

image.png 修改后

image.png

所有的ajax请求数据都要有异常处理

可能出现的问题:没有写try catch,或者是 .then.catch

下面这个就没有写

image.png


async xxx () {
  try {
      xxxxx
  } catch(){
      // 错误处理
  }
}

then要加catch

image.png

对于简单的if,else可以用三元

例1

修改前

image.png 修改后

image.png

例2

修改前

image.png 修改后

image.png

灵活用解构赋值

解构赋值的几道[检测题]

image.png


image.png

尽量不要用for

用很多现成的函数可以替换for,如下是一个例子

image.png

父子组件传递数据就不要用eventBus

如果只是简单的父子传递,就不要用eventBus了,而应该使用emit和prop。

不要并列写多个v-if

image.png 上面的代码不优雅!!

下面的代码才是合格的。

image.png 但是,还是不够完美,可以进一步改成过滤器

改成过滤器(做格式转换的,都可以用过滤器)

image.png

上面的代码还可以进一步使用策略模式

image.png 也可以把这个写成全局过滤器,然后把mapDifficulty以单独的常量保存。