zoukankan      html  css  js  c++  java
  • 重构,改善既有代码的设计读后感-至大量嵌套函数

    该书的第一章遥进行重构的代码(补充了一些中文注释):

    //剧目数据
    var plays =
    {
        "hamlet":{"name":"Hamlet","type":"tragedy"},
        "as-like":{"name":"As You Like It","type":"comedy"},
        "othello":{"name":"othello","type":"tragedy"}
    }
    
    //账单
    var invoices =
    [
        {
            "customer":"BigCo", //客户
            "performances":[  //演出情况
                {
                    "payID":"hamlet",//莎士比亚的哈姆雷特
                    "audience":55 //观众数
                },
                {
                    "payID":"as-like",//莎士比亚的皆大欢喜
                    "audience":35
                },
                {
                    "payID":"othello",//莎士比亚的奥赛罗
                    "audience":40
                }
            ]
        }
    ]
    
    
    function statement ( invoice,plays ) {
        let totalAmount = 0 ;  // 账单总额
        let volumeCredits = 0 ;  //观众量积分,用于获取折扣,提升客户忠诚度
        let result = `Statement for ${invoice.customer}
    `; //用于打印的字符串
    
        //用于格式化数字,优化显示货币。
        //locale 是必传参数(支持不同国家的数字分隔符格式)
        //option 是可选参数是一个对象
        //style,currency 可以设置货币符号或者精确度计算
        //unit 是可选参数,可以增加单位(长度单位等)
        const format = new Intl.NumberFormat("en-US",{ style:"currency",currency:"USD",minimumFractionDigits:2}).format;
        for(let perf of invoice.performances){
            const play = plays[perf.payID];
            let thisAmount = 0 ;
    
            //用于计算总账单
            switch (play.type) {
                case "tragedy":
                    thisAmount = 40000 ;
                    if (perf.audience > 30) {
                        thisAmount += 1000 * (perf.audience - 30);
                    }
                    break;
                case "comedy":
                    thisAmount = 30000 ;
                    if ( perf.audience > 20 ) {
                        thisAmount += 10000 + 500 * (perf.audience - 20);
                    }
                    thisAmount += 300 * perf.audience;
                    break;
                default:
                    throw new Error(`unknown type:${play.type}`);
            }
    
            //计算观众积分 add volume credits
            volumeCredits += Math.max(perf.audience - 30,0); //取两者较大数,防止结果小于0
            //add extra credit for every ten comedy attendees
            if("comedy" === play.type)  volumeCredits += Math.floor(perf.audience / 5);
    
            //print line for this order
            result += ` ${play.name}:${format(thisAmount/100)} (${perf.audience} seats)
    `;
            totalAmount += thisAmount;
        }
        result += `Amount owed is ${format(totalAmount/100)}
    `;
        result += `You earned ${volumeCredits} credits
    `;
        return result;
    }
    

    通过调用函数statement ( invoices[0],plays ) 便可以打印出结果
    statement.png

    如果你要给程序添加一个特性,但发现代码因缺乏良好的结构而不易于修改,那就先重构那个程序使其比较容易添加该特性,然后再添加该特性。

    重构前,先检查自己是否有一套可靠的测试集。这些测试,必须有自我检验能力。

    本书第一章举了一个例子,将一个函数进行拆分重构。以我不太充分的知识库看来,主要做的就是:
    1.将函数中独立的功能重新写成函数,在顶层函数调用。
    2.对顶层函数与拆分出来的函数进行变量名优化。
    3.将一些临时变量提炼成为函数,通过直接调用函数来获取。
    4.将一些在循环中累加的变量,将其剥离出来,在函数中重新遍历累加,以实现以查询取代临时变量的目的。

    有两个问题:
    1.提炼临时变量,会造成多次调用函数
    2.同一个循环拆成多个同样会造成性能损耗

    书中写道:

    大多数时候,重复一次这样的循环对性能的影响都可以忽略不计。
    当然,’大多数时候‘不等同于‘所有时候’。有时,一些重构手法会显著的影响性能。但即便如此,我也不去管他,继续重构,因为有了一份结构良好的代码,回头调优其性能也会容易得多。如果我在重构时引入了明显的性能消耗,我后面会花时间进行性能调优。进行调优时,可能会回退我早先做的一些重构----但更多时候,因为重构,我可以使用更高效的调优方案。最后我得到的是既整洁又高效的代码。

    但是针对实际的工作环境,在特定时间长度下,能做的工作有限。所以个人觉得,并非所有重构都要按部就班,可以根据实际情况具体分析。如果时间不够,对于一些可能会影响性能的暂时忽略。如果时间允许,则可以尝试,先重构,后调优的路子。---仅个人见解

    编程时,需要遵循营地法则:保证你离开时的代码库一定比来时更健康。

    实际编程中,普通程序员实现可能比较难。因为在一定的时间内,除了要完成任务之外还要重构会耽误文本的开发计划。而且重构并不能保证代码不会出现bug。程序很脆弱,每一次改动都应当有比较完备的测试。
    实际上,可以针对一些方法进行简单重构,过程也不一定时持续的,也不一定是一个人。
    更好的时有领导决定,以任务的形式派发下来,给重构代码的程序员时间。

    重构技术,就是以微小的步伐修改程序。如果你犯下错误,很容易便可发现他。

    实际工作中,可能不需要这样,如果仅仅是 如修改参数变量名这样的事情。当然了,如果步伐更好,出错概率也更小,好处是显而易见的。这是在测试容易的情况下。如果测试过程比较耗时,就需要你自己平衡关系了。

    跟随书中示例代码,大概的见识一下重构的过程。
    第一眼比较容易的看到的时swich语句,这段代码用来计算每一种剧目需要的花费,所以可以考虑将这段抽取成独立的函数。这个过程称为 提炼函数(106).
    抽取的代码 涉及三个临时变量,其中perf,play仅仅是使用,不会修改,可以作为参数传过来,thisAmount是改变的,可以将其作为返回值。同时为了更明显的看出作为返回值的变量,故修改变量名。参数命名也同样需要让其意义更确定。以定冠词开头,意义更明显。当然,如果可以的话,修改临时变量与参数应该分成单独的步骤。结果如下:

    //提炼函数
    function statement ( invoice,plays ) {
        let totalAmount = 0 ;  // 账单总额
        let volumeCredits = 0 ;  //观众量积分,用于获取折扣,提升客户忠诚度
        let result = `Statement for ${invoice.customer}
    `; //用于打印的字符串
    
        const format = new Intl.NumberFormat("en-US",{ style:"currency",currency:"USD",minimumFractionDigits:2}).format;
        for(let aPerformance of invoice.performances){
            const play = plays[aPerformance.payID];
            let thisAmount = amountFor(aPerformance,play) ;
    
            //计算观众积分 add volume credits
            volumeCredits += Math.max(aPerformance.audience - 30,0); //取两者较大数,防止结果小于0
            //add extra credit for every ten comedy attendees
            if("comedy" === play.type)  volumeCredits += Math.floor(aPerformance.audience / 5);
    
            //print line for this order
            result += ` ${play.name}:${format(thisAmount/100)} (${aPerformance.audience} seats)
    `;
            totalAmount += thisAmount;
        }
        result += `Amount owed is ${format(totalAmount/100)}
    `;
        result += `You earned ${volumeCredits} credits
    `;
        return result;
    
        function amountFor(aPerformance,play){
            let result= 0 ;
            //用于计算总账单
            switch (play.type) {
                case "tragedy":
                    result= 40000 ;
                    if (aPerformance.audience > 30) {
                        result+= 1000 * (aPerformance.audience - 30);
                    }
                    break;
                case "comedy":
                    result= 30000 ;
                    if ( aPerformance.audience > 20 ) {
                        result+= 10000 + 500 * (aPerformance.audience - 20);
                    }
                    result+= 300 * aPerformance.audience;
                    break;
                default:
                    throw new Error(`unknown type:${play.type}`);
            }
            return result;
        }
    }
    

    最上层函数看起来明晰了很多。

    以查询取代临时变量(178)
    观察提炼出来的amountFor函数的参数,可以发现第一个参数是从循环中取得,每次都是变化的,但是第二个参数是由performances计算得来,因此没必要将其作为参数引入。

    //内联变量
    function statement ( invoice,plays ) {
        let totalAmount = 0 ;  // 账单总额
        let volumeCredits = 0 ;  //观众量积分,用于获取折扣,提升客户忠诚度
        let result = `Statement for ${invoice.customer}
    `; //用于打印的字符串
    
        const format = new Intl.NumberFormat("en-US",{ style:"currency",currency:"USD",minimumFractionDigits:2}).format;
        for(let aPerformance of invoice.performances){
            let thisAmount = amountFor(aPerformance,playFor(aPerformance)) ;
    
            //计算观众积分 add volume credits
            volumeCredits += Math.max(aPerformance.audience - 30,0); //取两者较大数,防止结果小于0
            //add extra credit for every ten comedy attendees
            if("comedy" === playFor(aPerformance).type)  volumeCredits += Math.floor(aPerformance.audience / 5);
    
            //print line for this order
            result += ` ${playFor(aPerformance).name}:${format(thisAmount/100)} (${aPerformance.audience} seats)
    `;
            totalAmount += thisAmount;
        }
        result += `Amount owed is ${format(totalAmount/100)}
    `;
        result += `You earned ${volumeCredits} credits
    `;
        return result;
    
        function playFor(aperformance) {
            return plays[aperformance.playID];
        }
    
        function amountFor(aPerformance,play){
            let result= 0 ;
            //用于计算总账单
            switch (play.type) {
                case "tragedy":
                    result= 40000 ;
                    if (aPerformance.audience > 30) {
                        result+= 1000 * (aPerformance.audience - 30);
                    }
                    break;
                case "comedy":
                    result= 30000 ;
                    if ( aPerformance.audience > 20 ) {
                        result+= 10000 + 500 * (aPerformance.audience - 20);
                    }
                    result+= 300 * aPerformance.audience;
                    break;
                default:
                    throw new Error(`unknown type:${play.type}`);
            }
            return result;
        }
    }
    

    改变函数声明(124)

    //改变函数声明(124)
    function statement ( invoice,plays ) {
        let totalAmount = 0 ;  // 账单总额
        let volumeCredits = 0 ;  //观众量积分,用于获取折扣,提升客户忠诚度
        let result = `Statement for ${invoice.customer}
    `; //用于打印的字符串
    
        const format = new Intl.NumberFormat("en-US",{ style:"currency",currency:"USD",minimumFractionDigits:2}).format;
        for(let aPerformance of invoice.performances){
            let thisAmount = amountFor(aPerformance) ;
    
            //计算观众积分 add volume credits
            volumeCredits += Math.max(aPerformance.audience - 30,0); //取两者较大数,防止结果小于0
            //add extra credit for every ten comedy attendees
            if("comedy" === playFor(aPerformance).type)  volumeCredits += Math.floor(aPerformance.audience / 5);
    
            //print line for this order
            result += ` ${playFor(aPerformance).name}:${format(thisAmount/100)} (${aPerformance.audience} seats)
    `;
            totalAmount += thisAmount;
        }
        result += `Amount owed is ${format(totalAmount/100)}
    `;
        result += `You earned ${volumeCredits} credits
    `;
        return result;
    
        function playFor(aPerformance) {
            return plays[aPerformance.playID];
        }
    
        function amountFor(aPerformance){
            let result= 0 ;
            //用于计算总账单
            switch (playFor(aPerformance).type) {
                case "tragedy":
                    result= 40000 ;
                    if (aPerformance.audience > 30) {
                        result+= 1000 * (aPerformance.audience - 30);
                    }
                    break;
                case "comedy":
                    result= 30000 ;
                    if ( aPerformance.audience > 20 ) {
                        result+= 10000 + 500 * (aPerformance.audience - 20);
                    }
                    result+= 300 * aPerformance.audience;
                    break;
                default:
                    throw new Error(`unknown type:${playFor(aPerformance).type}`);
            }
            return result;
        }
    }
    

    提炼计算观众积分的逻辑
    将函数变量改成函数声明,同时注意函数名要尽量表意。

    //改变函数声明(124)
    function statement ( invoice,plays ) {
        let totalAmount = 0 ;  // 账单总额
        let volumeCredits = 0 ;  //观众量积分,用于获取折扣,提升客户忠诚度
        let result = `Statement for ${invoice.customer}
    `; //用于打印的字符串
        for(let aPerformance of invoice.performances){
            let thisAmount = amountFor(aPerformance) ;
            //计算观众积分 add volume credits
            volumeCredits += volumeCreditsFor(aPerformance);
            //print line for this order
            result += ` ${playFor(aPerformance).name}:${usd(thisAmount/100)} (${aPerformance.audience} seats)
    `;
            totalAmount += thisAmount;
        }
        result += `Amount owed is ${usd(totalAmount/100)}
    `;
        result += `You earned ${volumeCredits} credits
    `;
        return result;
    
        //这一轮循环增加的量
        function volumeCreditsFor(aPerformance) {
            let result = 0;
            result += Math.max(aPerformance - 30 , 0);
            if ("comedy" == playFor(aPerformance).type) result += Math.floor(aPerformance.audience / 5);
            return result;
        }
        
        function usd(aNumber) {
            return new Intl.NumberFormat("en-US",
                    { style:"currency",currency:"USD",
                        minimumFractionDigits:2}).format(aNumber/100);
        }
    
        function playFor(aPerformance) {
            return plays[aPerformance.playID];
        }
    
        function amountFor(aPerformance){
            let result= 0 ;
            //用于计算总账单
            switch (playFor(aPerformance).type) {
                case "tragedy":
                    result= 40000 ;
                    if (aPerformance.audience > 30) {
                        result+= 1000 * (aPerformance.audience - 30);
                    }
                    break;
                case "comedy":
                    result= 30000 ;
                    if ( aPerformance.audience > 20 ) {
                        result+= 10000 + 500 * (aPerformance.audience - 20);
                    }
                    result+= 300 * aPerformance.audience;
                    break;
                default:
                    throw new Error(`unknown type:${playFor(aPerformance).type}`);
            }
            return result;
        }
    }
    

    移除观众量总积分

    //移除观众量积分总和
    function statement ( invoice,plays ) {
        let totalAmount = 0 ;  // 账单总额
        let result = `Statement for ${invoice.customer}
    `; //用于打印的字符串
        for(let aPerformance of invoice.performances){
            //print line for this order
            result += ` ${playFor(aPerformance).name}:${usd(amountFor(aPerformance)/100)} (${aPerformance.audience} seats)
    `;
            totalAmount += amountFor(aPerformance);
        }
        let volumeCredits = totalVolumeCredits();//计算观众积分 add volume credits
        result += `Amount owed is ${usd(totalAmount/100)}
    `;
        result += `You earned ${volumeCredits} credits
    `;
        return result;
    
        //计算观众积分 add volume credits
        function totalVolumeCredits() {
            let volumeCredits = 0 ;  //观众量积分,用于获取折扣,提升客户忠诚度
            for(let aPerformance of invoice.performances){
                //计算观众积分 add volume credits
                volumeCredits += volumeCreditsFor(aPerformance);
            }
            return volumeCredits;
        }
    
        //这一轮循环增加的量
        function volumeCreditsFor(aPerformance) {
            let result = 0;
            result += Math.max(aPerformance - 30 , 0);
            if ("comedy" == playFor(aPerformance).type) result += Math.floor(aPerformance.audience / 5);
            return result;
        }
    
        function usd(aNumber) {
            return new Intl.NumberFormat("en-US",
                { style:"currency",currency:"USD",
                    minimumFractionDigits:2}).format(aNumber/100);
        }
    
        function playFor(aPerformance) {
            return plays[aPerformance.playID];
        }
    
        function amountFor(aPerformance){
            let result= 0 ;
            //用于计算总账单
            switch (playFor(aPerformance).type) {
                case "tragedy":
                    result= 40000 ;
                    if (aPerformance.audience > 30) {
                        result+= 1000 * (aPerformance.audience - 30);
                    }
                    break;
                case "comedy":
                    result= 30000 ;
                    if ( aPerformance.audience > 20 ) {
                        result+= 10000 + 500 * (aPerformance.audience - 20);
                    }
                    result+= 300 * aPerformance.audience;
                    break;
                default:
                    throw new Error(`unknown type:${playFor(aPerformance).type}`);
            }
            return result;
        }
    }
    

    其中使用了
    拆分循环(227) 分离出累加过程
    移动语句(223) 将累加变量的声明与累加过程集中到一起
    提炼函数(106) 提炼出计算总和的函数
    内联变量(123) 完全移除中间变量

    同样的步骤来移除totalAmount

    //移除观众量积分总和
    function statement ( invoice,plays ) {
        let result = `Statement for ${invoice.customer}
    `; //用于打印的字符串
        for(let aPerformance of invoice.performances){
            //print line for this order
            result += ` ${playFor(aPerformance).name}:${usd(amountFor(aPerformance)/100)} (${aPerformance.audience} seats)
    `;
        }
        result += `Amount owed is ${usd(totalAmount()/100)}
    `;
        result += `You earned ${totalVolumeCredits()} credits
    `;
        return result;
    
        //计算总的账目
        function totalAmount() {
            let totalAmount = 0 ;  // 账单总额
            for(let aPerformance of invoice.performances){
                totalAmount += amountFor(aPerformance);
            }
            return totalAmount;
        }
    
        //计算观众积分 add volume credits
        function totalVolumeCredits() {
            let volumeCredits = 0 ;  //观众量积分,用于获取折扣,提升客户忠诚度
            for(let aPerformance of invoice.performances){
                //计算观众积分 add volume credits
                volumeCredits += volumeCreditsFor(aPerformance);
            }
            return volumeCredits;
        }
    
        //这一轮循环增加的量
        function volumeCreditsFor(aPerformance) {
            let result = 0;
            result += Math.max(aPerformance - 30 , 0);
            if ("comedy" == playFor(aPerformance).type) result += Math.floor(aPerformance.audience / 5);
            return result;
        }
    
        //格式化数字,显示为货币
        function usd(aNumber) {
            return new Intl.NumberFormat("en-US",
                { style:"currency",currency:"USD",
                    minimumFractionDigits:2}).format(aNumber/100);
        }
    
        //获取某一剧目
        function playFor(aPerformance) {
            return plays[aPerformance.playID];
        }
    
        //计算某一剧目需要的账目
        function amountFor(aPerformance){
            let result= 0 ;
            //用于计算总账单
            switch (playFor(aPerformance).type) {
                case "tragedy":
                    result= 40000 ;
                    if (aPerformance.audience > 30) {
                        result+= 1000 * (aPerformance.audience - 30);
                    }
                    break;
                case "comedy":
                    result= 30000 ;
                    if ( aPerformance.audience > 20 ) {
                        result+= 10000 + 500 * (aPerformance.audience - 20);
                    }
                    result+= 300 * aPerformance.audience;
                    break;
                default:
                    throw new Error(`unknown type:${playFor(aPerformance).type}`);
            }
            return result;
        }
    }
    

    将函数折叠后再看,是不是思路比较清晰明了了
    daima.png

    欢迎大家留言,以便于后面的人更快解决问题!另外亦欢迎大家可以关注我的微信公众号,方便利用零碎时间互相交流。共勉!

  • 相关阅读:
    笨办法29IF语句
    笨办法28布尔表达式
    笨办法27记住逻辑
    笨办法26恭喜你,可以进行一次考试了
    笨办法25更多更多的练习
    笨办法23复制文件
    成功转移(✿◡‿◡)
    笨办法22到目前为止你学到了什么?
    vue.js
    webpack-优化
  • 原文地址:https://www.cnblogs.com/caozz/p/refact.html
Copyright © 2011-2022 走看看