这是我参与更文挑战的第15天,活动详情查看:更文挑战
代码重构
设计模式其实也是在进行代码重构,让代码更容易维护和简单的编写。所以我们在记住设计模式的使用方式以及应用场景之外,也需要记住一些代码重构的小技巧。
合并重复的片段
对于一个片段内重复出现的语句,我们可以尝试将其合并。例子如下:
const example = function(num) {
if(num < 0) {
num++;
console.log(num);
} else if(num < 10) {
num = 10;
console.log(num);
} else {
console.log(num);
}
}
上面的代码,我们实现了一个0以下加1,0~10之间变为10的一个函数。我们每次执行完毕之后都要打印num的值,但是明显log语句重复了,我们可以合并到一起。
const example = function(num) {
if(num < 0) {
num++;
} else if(num < 10) {
num = 10;
}
console.log(num);
}
这样就简洁了许多。
把条件语句提炼成函数
有时候我们在编写业务代码的时候会写很长的判断语句,这时候有可能一个if要换成好几行来写,直观是直观,但是需要读代码的人需要一个一个去看,很费劲。这时候我们可以把条件语句提炼出来,给他一个好的命名,帮助他人理解,也可以帮助自己记忆以及后面的更改。例子如下:
const getSign = function(person) {
const { age, sign } = person;
if(age >= 0 && age <= 17) {
reutrn getParentsSign(person);
}
return sign;
}
上面的代码是获取个人的签名,if语句中的age >= 0 && age <= 17,我们需要读懂代码可以看出来,是未成年人。如果是未成年,我们需要获取父母的签名信息。否则就返回自己的签名信息。其实可以直接将其提取出来,可以更直观,复用也更加方便。
const isUnderage = function(age) {
return age >= 0 && age <= 17;
}
const getSign = function(person) {
const { age, sign } = person;
if(isUnderage(age)) {
reutrn getParentsSign(person);
}
return sign;
}
这样改写之后更加容易读懂,复用也更方便。
提前让函数退出代替嵌套条件分支
还是关于if语句的问题,似乎程序员最喜欢的事就是优化if语句了。如果我们在if语句中进行了嵌套,那么就要观察是否可以将其平铺。不然对于读代码的人可能会很难受。
const relation = function(person) {
if(isUnderage(person.age)) { // 未成年才会有家长在
if(!person.father) {
return isFather();
} else if (!person.mother) {
return isMather();
}
} else {
return isSelf();
}
}
上面的代码是只有未成年,数据中才会有父母的数据存在。这时候我们可以把外面的if语句进行反转,这样就可以写成平铺的if和else语句了。
const relation = function(person) {
if(!isUnderage(person.age)) { // 不是未成年直接跳过
return isSelf();
}
if(!person.father) {
return isFather();
} else if (!person.mother) {
return isMather();
}
}
用return退出多重循环
我们在编写for循环时,经常会碰到多重嵌套循环需要直接退出到外层的情况。 但是直接用return方法又会直接将整个方法进行return,从而无法执行之后的代码。像这样:
const exampleFor = function() {
let a;
for(let i = 0; i < 10; i++) {
for(let j = 0; j < 10; j++) {
if( i + j > 13) {
a = i + j;
return;
}
}
}
console.log(a); // return之后无法打印
}
一般情况下我们可以这样解决,将循环之后的代码合并成为一个函数,直接运行。
const print = function(a) {
console.log(a);
}
const exampleFor = function() {
let a;
for(let i = 0; i < 10; i++) {
for(let j = 0; j < 10; j++) {
if( i + j > 13) {
return print(i + j);
}
}
}
}
引用
[1] 曾探:JavaScript设计模式与开发实践