JavaScript重构技巧 — 条件

John Au-Yeung
来源:medium
译者:前端小智
点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

在本文中,我们将介绍一些优化条件表达式相关的重构思路。

分解条件表达式

我们可以将长的条件表达式分解成有命名的短小条件表达多,这样有利于阅读。例如我们可能会写这样的代码:

let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")

上面的代码太过冗长了,不利于阅读,我们可以把它分解成几个短小且有名字的条件表达式,如下所示:

let userAgent = navigator.userAgent.toLowerCase();
let isMac = userAgent.includes("mac");
let isIE = userAgent.toLowerCase().includes("ie");
let isMacIE = isMac && isIE;

合并条件表达式

与上面相反的,如果有多个简短的条件表达式,则可以将它们合并成一个。例如我们可能会写这样的代码:

const x = 5;
const bigEnough = x > 5;
const smallEnough = x < 6;
const inRange = bigEnough && smallEnough;

我们可以这样合并:

const x = 5;
const inRange = x > 5 && x < 6;

因为表达式很短,即使把它们组合在一起也不会使表达式变长,所以我们可以这样做。

合并重复的条件片段

如果我们在条件块中有重复的表达式或语句,则可以将它们移出。例如我们可能会写这样的代码:

if (price > 100) {
  //...
  complete();
} else {
  //...
  complete();
}

我们可以把重复的内容移到条件表达式外面,如下所示:

if (price > 100) {
  //...  
} else {
  //...  
}
complete();

这样,我们不必重复不必要地调用complete函数。

删除控制标志

如果我们在循环中使用了控制标志,那应该会这样代码:

let done = false;
while (!done) {
  if (condition) {
    done = true;
  }
  //...
}

在上面的代码中,done 是控制标,在conditiontrue时,将done设置为true停止while循环。

相对于上面,我们可以使用break来停止循环,如下所示:

let done = false;
while (!done) {
  if (condition) {
    break;
  }
  //...
}

用卫语句代替嵌套条件

卫语句就是把复杂的条件表达式拆分成多个条件表达式,比如一个很复杂的表达式,嵌套了好几层的if-then-else语句,转换为多个if语句,实现它的逻辑,这多条的if语句就是卫语句。

嵌套条件语句很难阅读,所以我们可以使用卫语句代替它们。例如我们可能会写这样的代码:

const fn = () => {
  if (foo) {
    if (bar) {
      if (baz) {
        //...
      }
    }
  }
}

我们可以这样优化:

  if (!foo) {
    return;
  }
  if (!bar) {
    return;
  }
  if (baz) {
    //...
  }
}

在上面的代码中,卫语句是:

if (!foo) {
  return;
}

if (!bar) {
  return;
}

如果这些条件为假,它们会提前返回函数,这样,我们就不需要嵌套了。

用多态替换条件

我们可以使用switch语句为不同种类的数据创建相同的子类,而不是使用switch语句对不同类型的数据执行相同的操作,然后针对对象的类型使用不同的方法。

例如我们可能会写这样的代码:

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
  getSpeed() {
    switch (this.type) {
      case ('cat'): {
        return getBaseSpeed() * 1.5
      }
      case ('dog'): {
        return getBaseSpeed() * 2
      }
      default: {
        return getBaseSpeed()
      }
    }
  }
}

我们可以这样重构:

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
}
class Cat extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 1.5;
  }
}
class Dog extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 2;
  }
}

switch语句很长时,应该为不同类型的对象定制case块。

采用空对象

如果我们重复检查nullundefined,则可以定义一个代表该类的nullundefined版本的子类,然后使用它。

例如我们可能会写这样的代码:

class Person {
  //...
}

我们可以这样重构:

class Person {
  //...
}
class NullPerson extends Person {
  //...
}

然后,我们将Person设置为nullundefined 的对象属性,而不是将其设置为NullPerson实例。

这样就无需使用条件检查这些值。


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://levelup.gitconnected....


交流

文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

阅读 594

推荐阅读
终身学习者
用户专栏

我要先坚持分享20年,大家来一起见证吧。

39089 人关注
400 篇文章
专栏主页