我们在修正别人代码的时刻,浏览别人代码所花的时候常常比完胜利用的时候还要更多
假如顺序结构不清晰,代码杂沓 。牵一发而动全身。那保护起来就更难保护了
在我们的顺序中,可以闻到很多的坏滋味。主要有以下这些点
定名存在应用缩写、不范例、无意义
例子: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 getMaxDay(year, month) {
var maxDay = 0;
switch (month) {
case 4:
case 6:
case 9:
case 11:
maxDay = 30;
break;
case 2:
if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) {
maxDay = 29;
} else {
maxDay = 28;
}
break;
default:
maxDay = 31;
}
return maxDay;
}
例子中,提炼前的代码,须要很费力的看完全部函数,才会邃晓做了什么处置惩罚,提炼后的代码。只须要轻微看一下,就晓得 getMaxDay 是猎取当前月份的最大天数
有时刻,一个函数的本体与函数名一样简朴易懂,就要用到这类手段。
这类手段用于处置惩罚优化过分的题目
举个例子:
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;
}
在两个例子中,引入解释性的变量以后,可读性大大增添。函数的企图就比较显著,单看变量定名就已能也许晓得详细的完成
举个例子:
// 剖析暂时变量
// 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')];
}
在计算机科学中,魔法数是汗青最悠长的不良现象之一。
魔法数是指顺序中稀里糊涂的数字。具有特别意义,却又不能明白表现出这类意义的数字
举个例子:
// 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('未知的毛病');
}
}
function test8(x) {
if (x == UploadStatus.ERROR) {
// do something
}
}
关于魔法数,应当用一个罗列对象或一个常量来给予其可见的意义。如许,你在用到的时刻,就可以明白的晓得它代表的是什么意义
而且,当需求变化的时刻,只须要转变一个处所即可
庞杂的前提逻辑是致使庞杂度上升的所在之一。由于必需编写代码来处置惩罚差别的分支,很轻易就写出一个相称长的函数
将每一个分支前提剖析成新函数可以凸起前提逻辑,更清晰表明每一个分支的作用以及缘由
举个例子:
// 剖析前提表达式
// 商品在冬季和夏日单价不一样
// before
var SUMMER_START = '06-01';
var SUMMER_END = '09-01';
function test9() {
var quantity = 2;
var winterRate = 0.5;
var winterServiceCharge = 9;
var summerRate = 0.6;
var charge = 0;
if (date.before(SUMMER_START) || date.after(SUMMER_END)) {
charge = quantity * winterRate + winterServiceCharge;
} else {
charge = quantity * summerRate;
}
return charge;
}
// 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;
}
function winterCharge(quantity) {
var winterRate = 0.5;
var winterServiceCharge = 9;
return quantity * winterRate + winterServiceCharge;
}
当发明一系列的前提搜检,搜检前提不一样,然则行动却一致。就可以将它们兼并为一个前提表达式
举个例子:
// 兼并前提表达式
// before
function test10(x) {
var isFireFox = 'xxxx';
var isIE = 'xxxx';
var isChrome = 'xxxx';
if (isFireFox) {
return true;
}
if (isIE) {
return true;
}
if (isChrome) {
return true;
}
return false;
}
// after
function test10(x) {
var isFireFox = 'xxxx';
var isIE = 'xxxx';
var isChrome = 'xxxx';
if (isFireFox || isIE || isChrome) {
return true;
}
return false;
}
兼并后的代码会通知你,实际上只要一个前提搜检,只是有多个并列前提须要搜检罢了
前提表达式上有着雷同的一段代码,就应当将它搬离出来
// 兼并反复片断
// before
function test11(isSpecial) {
var total,
price = 1;
if (isSpecial) {
total = price * 0.95;
// 这里处置惩罚一些营业
} else {
total = price * 0.8;
// 这里处置惩罚一些营业
}
}
// 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
// do something 比方举行DOM 操纵之类的
return 'andy';
}
if (people[i].name == 'ChunYang') {
// do something 比方举行DOM 操纵之类的
return 'ChunYang';
}
}
}
// after
function test14(people) {
var p = find(people);
// do something 比方举行DOM 操纵之类的
// doSomeThing(p);
}
function find(people) {
for (var i = 0, len = people.length; i
return 'andy';
}
if (people[i].name == 'ChunYang') {
return 'ChunYang';
}
}
}
假如发明两个函数,做着相似的事情。区分只在于个中几个变量的差别。就可以经由过程参数来处置惩罚。
如许可以去除反复的代码,进步灵活性
症结点: 找出差别的处所和反复的处所。
《重构 改良既有代码的设想 》 基于 java 的
《代码大全》
个人博客
代码片断