编写可维护的代码

7次阅读

共计 6991 个字符，预计需要花费 18 分钟才能阅读完成。

编写可维护的代码
前言
我们在修改他人代码的时候，阅读他人代码所花的时间经常比实现功能的时间还要更多
如果程序结构不清晰，代码混乱。牵一发而动全身。那维护起来就更难维护了
可读性

可理解性：他人可以接手代码并理解它
直观性 : 代码逻辑清晰
可调试性：出错时，方便定位问题所在

如何提高可读性

代码格式化
适当添加注释

函数与方法
大段代码
注释需有意义

如何优化代码

找出代码的坏味道
使用重构手法将其解决掉

代码的坏味道
在我们的程序中，可以闻到很多的坏味道。主要有以下这些点
命名不规范或无意义
命名存在使用缩写、不规范、无意义
例子：var a = xxx,b = xxx
重复代码
相同（或相似）的代码在项目中出现了多次，如果需求发生更改，则需要同时修改多个地方
过长函数
程序越长越难理解，一个函数应该只完成一个功能
过长的类
一个类的职责过多，一个类应该是一个独立的整体。
过长参数列表
太长的参数列表难以理解，不易使用。当需要修改的时候，会更加容易出错
数据泥团
有些数据项总是成群结队的待在一起。例如两个类中相同的字段、许多函数签名相同的参数。
这些都应该提炼到一个对象中，将很多参数列缩短，简化函数调用
类似的函数
整体上实现的功能差不多，但是由于有一点点区别。所以写成了多个函数
重构手法
提炼函数
针对一个比较长的函数，提炼成一个个完成特定功能的函数。
例子
// 提炼前
function test11() {
var day = $(‘day’);
var yearVal = ‘2016’;
var monthVal = ’10’;
var dayVal = ’10’;
day.val(dayVal);
switch (monthVal) {
case 4:
case 6:
case 9:
case 11:
if (dayVal > 30) {
day.val(30);
}
break;
case 2:
if (
yearVal % 4 == 0 &&
(yearVal % 100 != 0 || yearVal % 400 == 0) &&
monthVal == 2
) {
if (dayVal > 29) {
day.val(29);
}
} else {
if (dayVal > 28) {
day.val(28);
}
}
break;
default:
if (dayVal > 31) {
day.val(31);
}
}
}
// 提炼后
function test12() {
var day = $(‘day’);
var yearVal = ‘2016’;
var monthVal = ’10’;
var dayVal = ’10’;

var maxDay = getMaxDay(yearVal, monthVal);
if (dayVal > maxDay) {
day.val(maxDay);
} else {
day.val(dayVal);
}
}

如果每个函数的粒度都很小，那么函数被复用的机会就更大；
这会使高层函数读起来就想一系列注释；
如果函数都是细粒度，那么函数的覆写也会更容易些

内联函数
有时候，一个函数的本体与函数名一样简单易懂，就要用到这种手法。
这种手法用于处理优化过度的问题
举个例子：
function biggerThanZero(num) {
return num > 0;
}
function test() {
var num = 10;
if (biggerThanZero(num)) {
//do something
}
}
// 内联后
function test() {
var num = 10;
if (num > 0) {
//do something
}
}
引入解释性变量
当表达式比较复杂难以阅读的时候，就可以通过临时变量来帮助你将表达式分解为容易管理的形式
有些时候，运用提炼函数会更好一点
举两个简单的例子：
// 例子 1
// before
function test2() {
if (
platform.toUpperCase().indexOf(‘MAC’) > -1 &&
browser.toUpperCase().indexOf(‘IE’) > -1 &&
wasInitialized() &&
resize > 0
) {
// do something
}
}
// after
function test2() {
var isMacOs = platform.toUpperCase().indexOf(‘MAC’) > -1;
var isIEBrowser = browser.toUpperCase().indexOf(‘IE’) > -1;
var wasResized = resize > 0;
if (isMacOs && isIEBrowser && wasInitialized() && wasResized) {
// do something
}
}
// ————————————————–

// 例子 2
// before
function caluPrice(quantity, itemPrice) {
return (
quantity * itemPrice –
Math.max(0, quantity – 500) * itemPrice * 0.05 +
Math.min(quantity * itemPrice * 0.1, 100)
);
}

// after
function caluPrice(quantity, itemPrice) {
var basePrice = quantity * itemPrice;
var discount = Math.max(0, quantity – 500) * itemPrice * 0.05;
var shiping = Math.min(basePrice * 0.1, 100);
return basePrice – discount + shiping;
}
在两个例子中，引入解释性的变量之后，可读性大大增加。函数的意图就比较明显，单看变量命名就已经能大概知道具体的实现
分解临时变量

除了 for 循环里用来收集结果的变量，其他的临时变量都应该只被赋值一次。
因为被赋值超过一次，就意味着他在函数中承担了多个责任。
一个变量承担多个责任。会令代码看起来容易迷惑

举个例子：
// 分解临时变量
// before
function test3() {
var temp = 2 * (width + height);
console.log(temp);
// do something
temp = height * width;
// do something
console.log(temp);
}
// after
function test4() {
var perimeter = 2 * (width + height);
console.log(perimeter);
// do something
var area = height * width;
// do something
console.log(area);
}
在这个例子中，temp 分别被赋予了两次，如果代码块较长的情况，会增加风险，因为你不知道他在哪里被改掉了
替换算法
当你重构的时候，发现实现同样的功能有一个更清晰的方式，就应该将原有的算法替换成你的算法。
举个例子：
// 替换算法
// before
function getWeekDay() {
var weekStr = ”;
switch (date.format(‘d’)) {
case 0:
weekStr = ‘ 日 ’;
break;
case 1:
weekStr = ‘ 一 ’;
break;
case 2:
weekStr = ‘ 二 ’;
break;
case 3:
weekStr = ‘ 三 ’;
break;
case 4:
weekStr = ‘ 四 ’;
break;
case 5:
weekStr = ‘ 五 ’;
break;
case 6:
weekStr = ‘ 六 ’;
break;
}
return weekStr;
}
// after
function getWeekDay() {
var weekDays = [‘ 日 ’, ‘ 一 ’, ‘ 二 ’, ‘ 三 ’, ‘ 四 ’, ‘ 五 ’, ‘ 六 ’];
return weekDays[date.format(‘d’)];
}
以字面常量取代魔法数（eg：状态码）
在计算机科学中，魔法数是历史最悠久的不良现象之一。
魔法数是指程序中莫名其妙的数字。拥有特殊意义，却又不能明确表现出这种意义的数字
举个例子：
// before
function test5(x) {
if (x == 1) {
console.log(‘ 完成 ’);
} else if (x == 2) {
console.log(‘ 上传中 ’);
} else if (x == 3) {
console.log(‘ 上传失败 ’);
} else {
console.log(‘ 未知的错误 ’);
}
}

function test6(x) {
if (x == 3) {
// do something
}
}

// after
var UploadStatus = {
START: 0,
UPLOADING: 1,
SUCCESS: 2,
ERROR: 3,
UNKNOWN: 4
};
function test7(x) {
if (x == UploadStatus.START) {
console.log(‘ 未开始 ’);
} else if (x == UploadStatus.UPLOADING) {
console.log(‘ 上传中 ’);
} else if (x == UploadStatus.SUCCESS) {
console.log(‘ 上传成功 ’);
} else if (x == UploadStatus.ERROR) {
console.log(‘ 上传失败 ’);
} else {
console.log(‘ 未知的错误 ’);
}
}

// after
function test9() {
var quantity = 2;
return notSummer(date) ? winterCharge(quantity) : summerCharge(quantity);
}

function notSummer(date) {
return date.before(SUMMER_START) || date.after(SUMMER_END);
}

function summerCharge(quantity) {
var summerRate = 0.6;
return quantity * summerRate;
}

// after
function test12(isSpecial) {
var total,
price = 1;
if (isSpecial) {
total = price * 0.95;
} else {
total = price * 0.8;
}
// 这里处理一些业务
}
在不同的条件里面做了同样的事情，应该将其抽离出条件判断。这样代码量少而且逻辑更加清晰
以卫语句取代嵌套条件表达式
如果某个条件较为罕见，应该单独检查该条件，并在该条件为真时立即从函数中返回。这样的检查就叫卫语句
举个例子：
// 以卫语句取代嵌套条件表达式
// before
function getPayMent() {
var result = 0;
if (isDead) {
result = deadAmount();
} else {
if (isSepartated) {
result = separtedAmount();
} else {
if (isRetired) {
result = retiredAmount();
} else {
result = normalPayAmount();
}
}
}
return result;
}

// after
function getPayMent() {
if (isDead) {
return deadAmount();
}
if (isSepartated) {
return separtedAmount();
}
if (isRetired) {
return retiredAmount();
}
return normalPayAmount();
}
函数改名（命名）
当函数名称不能表达函数的用途，就应该改名

变量和函数应使用合乎逻辑的名字。
eg: 获取产品列表 -> getProductList()

变量名应为名词, 因为变量名描述的大部分是一个事物。
eg: 产品 -> product

函数名应为动词开始, 因为函数描述的是一个动作
eg: 获取产品列表 -> getProductList()

将查询函数和修改函数分开
如果某个函数只向你提供一个值，没有任何副作用。这个函数就可以任意的调用。
这样的函数称为纯函数
如果遇到一个既有返回值，又有副作用的函数。就应该将查询与修改动作分离出来
举个例子：
// before
function test13(people) {
for (var i = 0, len = people.length; i < len; i++) {
if (people[i].name == ‘andy’) {
// do something 例如进行 DOM 操作之类的
return ‘andy’;
}
if (people[i].name == ‘ChunYang’) {
// do something 例如进行 DOM 操作之类的
return ‘ChunYang’;
}
}
}