编写可保护的代码
媒介
我们在修正别人代码的时刻，浏览别人代码所花的时候常常比完胜利用的时候还要更多
假如顺序结构不清晰，代码杂沓 。牵一发而动全身。那保护起来就更难保护了
可读性
- 可邃晓性：别人可以接办代码并邃晓它
- 直观性 : 代码逻辑清晰
- 可调试性 ：失足时，轻易定位题目所在
怎样进步可读性
- 代码格式化
- 恰当增添解释
- 函数与要领
- 大段代码
- 解释需有意义
怎样优化代码
- 找出代码的坏滋味
- 应用重构手段将其处置惩罚掉
代码的坏滋味
在我们的顺序中，可以闻到很多的坏滋味。主要有以下这些点
定名不范例或无意义
定名存在应用缩写、不范例、无意义
例子：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;
}在两个例子中，引入解释性的变量以后，可读性大大增添。函数的企图就比较显著，单看变量定名就已能也许晓得详细的完成
剖析暂时变量
- 除了 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('未知的毛病');
}
}
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 < len; i++) {
if (people[i].name == 'andy') {
// 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 < len; i++) {
if (people[i].name == 'andy') {
return 'andy';
}
if (people[i].name == 'ChunYang') {
return 'ChunYang';
}
}
}令函数照顾参数
假如发明两个函数，做着相似的事情。区分只在于个中几个变量的差别。就可以经由过程参数来处置惩罚。
如许可以去除反复的代码，进步灵活性
症结点： 找出差别的处所和反复的处所。
引荐书本
《重构 改良既有代码的设想 》 基于 java 的
《代码大全》
