利用设计模式的思维进行代码优化重构

279 阅读1分钟

这是我参与更文挑战的第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设计模式与开发实践