整洁代码系列 -- 会讲故事的代码才是好代码

[zhengguorong]

写这篇文章是因为最近在看业务代码，发现存在大量意大利面代码，一个函数上百行代码一个js有一千多行代码，理解的过程会让人非常痛苦。 我们就这个问题，讨论下如何编写让人能快速理解的代码。

从小明的一天开始

我们以小明的一天为故事编写两份代码，对比两个阅读体验。

class Person {
    constructor(name) {
        this.name = name;
        this.walkSetp(10)
        this.turnLeft()
        this.pickUpToothpaste()
        this.pickUpToothbrush()
        this.walkSetp(20);
        this.trunRight(10);
        this.turnLeft(10);
        this.sit();
        this.pickUpChopsticks();
        this.pinchUpFood();
        this.putInMouth();
    }
}
const xiaoMing = new Person("小明");

上面这段代码我猜大家阅读的时候是很吃力的，因为他把大量细节暴露出来，你无法理解小明为什么往前走了10步然后左转了，你看到后面执行了pickUpToothpaste，猜测是去刷牙了吧。这段代码就是因为缺少封装，把细节暴露在外面，导致理解成本增加。

我们做个改造。

class Person {
    constructor(name) {
        this.name = name;
        this.brushTeeth();
        this.eatBreakfast()
    }
    // 刷牙
    brushTeeth() {
        this.walkSetp(10)
        this.turnLeft()
        this.pickUpToothpaste() // 拿起牙膏
        this.pickUpToothbrush() // 拿起牙刷
    }
    // 吃早餐
    eatBreakfast() {
        this.walkSetp(20);
        this.trunRight(10);
        this.turnLeft(10);
        this.sit();
        this.pickUpChopsticks();
        this.pinchUpFood();
        this.putInMouth();
    }
}
const xiaoMing = new Person("小明");

现在好多了吧，你只要阅读构造函数里调用的两个方法，分别是brushTeeth和eatBreakfast，就知道小明是去了刷牙和吃早餐，具体怎么刷牙，你根本不需要关注。

如果这时候有个需求，我希望小明吃早餐前去洗手。

例一中，我们最快的方式是直接插入代码，但是随着时间的增加，代码会不断膨胀，同时因为人员流动，这段代码会无人理解，最终导致项目bug率和维护成本激增。

...省略代码
this.pickUpToothbrush()
this.washHands()
this.walkSetp(20);
...省略代码

例二中，我们不需要阅读brushTeeth方法，直接找到eatBreakfast方法修改即可。 虽然例二代码看起来没什么高级的编程技巧，也没用设计模式，但是就因为做了简单封装，把细节封装到一个方法里面，使方法具有语意化，我们在修改代码的时候能快速找到需要修改的位置，也能把影响范围降低降低出错率。

提高代码封装性手段

1、code review 2、检查函数圈复杂度 3、写单元测试

[PLQin]

code review 呀~!