首页 > 云开发 > JavaScript > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

代码重构

JavaScript

引言

列举一些编码过程中重构的目标,虽然不难理解,但确实蛮实用的,平时编码中有些经常遇到。

用return 退出多重循环

常见的就是二重for循环标记break退出。

let func=function () {
    let flag=false;
    for(let i=0;i<100;i++){
        for(let j=0;j<100;j++){
            if(i*j>30){
                flag=true;
                break;
            }

        }
        if(flag==true){
            break;
        }
    }
}



let func=function () {
    let flag=false;
    for(let i=0;i<100;i++){
        for(let j=0;j<100;j++){
            if(i*j>30){
                return;
            }

        }
    }
}

说明 第一种 方式通过设置flag的方式,代码不易读,而重构后的代码简介明了。其次如果return后还要一些逻辑要执行,可以把要执行的逻辑封装成函数放到return后面。

大型类的分解
let Attack=function (hero) {
    this.hero=hero;
}
Attack.prototype.start=function (type) {
    return this.list[type].call(this);
}
Attack.prototype.list={
    q:function () {
        console.log("q skill")
    },
    w:function () {
        console.log("w skill")
    }
};

let Hero=function (name) {
    this.name=name;
    this.attackObj=new Attack(this);
}
Hero.prototype.attack=function (type) {
    this.attackObj.start(type);
}
let gaiLunIns=new Hero("GaiLun");
gaiLunIns.attack("q");

说明 函数式编程中我们会将复杂逻辑拆成一个个可处理的最小单元,而在面向对象中合理利用设计模式,可以极大的解耦我们的代码,
上述实例中,攻击功能比较复杂,单独封装成一个类,技能维护成一个列表,拓展性强,整个攻击逻辑不掺和在hero当中,hero显得也非常精简。

少用三目运算符

少用并不是说不用,适当的地方使用,例如下面的判断条件简单且清晰

let global=typeof window != "undefined"  ? window:this;

但是如果嵌套很多层,就不提倡,不易阅读和维护。

减少函数参数的数量

函数参数多,就容易给使用者带来复杂度,合理的编码,利用一些设计模式,例如典型的策略模式,而不应该保留过多条件在函数参数中,
复杂的逻辑内部应该封装起来。还要就是函数参数应该用一个对象来传递,例如vue,handsontable等等,这些工具实例化时传递的都是option对象,
工具内部做了一些默认处理,并且我们传递的参数时,也不用关心顺序和个数。

函数提炼
let getPrice=function (price) {
    var date=new Date();
    if(date.getMonth()>=6&&date.getMonth()<=9){
            return price*0.8
    }
}
let isSummer=function () {
    let date=new Date();
    return date.getMonth()>=6&&date.getMonth()<=9
}
<!-------------------------------------------->
let getPrice=function (price) {
    var date=new Date();
    if(isSummer()){
        return price*0.8
    }
    return price;
}

说明 复杂的条件语句增加维护难度,不易阅读,而函数更能清晰的表达代码含义,如果命名良好,基本就不用加注释了。

一等函数
http.post('/add/article',function(){
…… 
});
http.post('/add/article',callback);

说明 上面不传递一个具体匿名函数的好处是,方便解耦和以后不确定增加的维护难度,函数式编程中一等函数的应用好处其实有很多。

总结

设计模式和重构行为,都不是必须的,但是这都是一个程序员基本的涵养,重构有很多方面,我只是列举了其中几点,还有一些常见的比如用对象或函数式封装变量,模块化封装一组功能等等,上面的示例中,有些情况
在平常编码中不注意也会出现上面的情况,总结一下,也算是加深一下自己的认知吧。

文章来源:segmentfault,作者:jsdt。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

代码 重构 优化

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索