如何写出干净的JS代码?写出干净的JS代码需要注意什么?小编整理的相关内容如下:
1. 将数字定义为常量
我们常常会用到数字,比如以下代码:
const isOldEnough = (person) => { return person.getAge() >= 100;}
谁知道这个 100 具体指的是什么?我们通常需要结合函数上下文再推测、判断这个 100 它可能是具体代表一个什么值。
如果这样的数字有多个的话,一定会很容易造成更大的困惑。
写出干净的 JavaScript:将数字定义为常量
即可清晰的解决这个问题:
const AGE_REQUIREMENT = 100;const isOldEnough = (person) => { return person.getAge() >= AGE_REQUIREMENT;}
现在,我们通过声明常量的名字,即可立马读懂 100 是“年龄要求”的意思。修改时也能迅速定位、一处修改、多处生效。
2. 避免将布尔值作为函数参数
将布尔值作为参数传入函数中是一种常见的容易造成代码混乱的写法。
const validateCreature = (creature, isHuman) => { if (isHuman) { // ... } else { // ... }}
布尔值作为参数传入函数不能表示出明确的意义,只能告诉读者,这个函数将会有判断发生,产生两种或多种情况。
写出干净的 JavaScript:避免将布尔值作为函数参数
const validatePerson = (person) => { // ...}const validateCreature = (creature) => { // ...}
3. 将多个条件封装
我们经常会写出这样的代码:
if ( person.getAge() > 30 && person.getName() === "simon" && person.getOrigin() === "sweden") { // ...}
不是不行,只是隔久了会一下子看不懂这些判断到底是要干嘛的,所以建议把这些条件用变量或函数进行封装。
写出干净的 JavaScript:将多个条件封装
const isSimon = person.getAge() > 30 && person.getName() === "simon" && person.getOrigin() === "sweden";if (isSimon) { // ...}
或者
const isSimon = (person) => { return ( person.getAge() > 30 && person.getName() === "simon" && person.getOrigin() === "sweden" );};if (isSimon(person)) { // ...}
4. 避免否定的判断条件
条件判断中,使用否定判断,会额外造成一种思考负担。
比如下面的代码,条件!isCreatureNotHuman(creature)双重否定,读起来就会觉得有点费劲。