一些重构的建议:
* 避免出现超大函数
* 独立出来的函数有助于代码复用
* 独立出来的函数更容易被覆写
* 独立出来的函数如果拥有一个良好的命名,
* 它本身就起到了注释的作用。
比如在一个负责取得用户信息的函数里面,我们还需要打印跟用户信息有关的log,那么打印log的语句就可以被封装在一个独立的函数里:
var getUserInfo = function() {
ajax(‘http://xxx.com/userInfo‘, function(data) {
console.log(‘userId: ‘ + data.userId);
console.log(‘userName: ‘ + data.userName);
console.log(‘nickName: ‘ + data.nickName);
});
};
可以改成:
var getUserInfo = function() {
ajax(‘http://xxx.com/userInfo‘, function(data) {
printDetails(data);
});
};
var printDetails = function(data) {
console.log(‘userId: ‘ + data.userId);
console.log(‘userName: ‘ + data.userName);
console.log(‘nickName: ‘ + data.nickName);
}
//页面跳转
var paging = function(currPage) {
if (currPage <= 0) {
currPage = 0;
jump(currPage); //跳转
} else if (currPage >= totalPage) {
currPage = totalPage;
jump(currPage); //跳转
} else {
jump(currPage); //跳转
}
}
改成
//页面跳转
var paging = function(currPage) {
if (currPage <= 0) {
currPage = 0;
} else if (currPage >= totalPage) {
currPage = totalPage;
}
jump(currPage); //跳转
}
//计算商品价格,如果处于夏季,全部商品八折出售
var getPrice = function(price) {
var date = new Date();
if (date.getMonth() >= 6 && date.getMonth <= 9) { //夏季
return price * 0.8;
}
return price;
}
改成
//计算商品价格,如果处于夏季,全部商品八折出售
var getPrice = function(price) {
if (isSummer()) { //夏季
return price * 0.8;
}
return price;
}
var isSummer = function() {
var date = new Date();
return date.getMonth() >= 6 && date.getMonth <= 9;
}
var createXHR = function() {
var xhr;
try{
xhr = new ActiveXObject('MSXML2.XMLHttp.6.0');
} catch(e) {
try {
xhr = new ActiveXObject('MSXML2.XMLHttp.3.0');
} catch(e) {
xhr = new ActiveXObject('MSXML2.XMLHttp');
}
}
return xhr;
};
var xhr = createXHR();
改成:
var createXHR = function() {
var versions = [‘MSXML2.XMLHttp.6.0’, ‘MSXML2.XMLHttp.3.0’, ‘MSXML2.XMLHttp’];
for (var i = 0, version; version = versions[i++]; ) {
try {
return new ActiveObject(version);
} catch(e) {
}
}
};
var xhr = createXHR();
var del = function(obj) {
var ret;
if (!obj.isReadOnly) { //不为只读的时候才可以删除
if (obj.isFolder) { //如果是文件夹
ret = deleteFolder(obj);
} else if (obj.isFile) { //如果是文件
ret = deleteFile(obj);
}
}
return ret;
}
改成:
var del = function(obj) {
if (obj.isReadOnly) {
return;
}
if (obj.isFolder) { //如果是文件夹
return deleteFolder(obj);
}
if (obj.isFile) { //如果是文件
return deleteFile(obj);
}
}
var setUserInfo = function(id, name, address, sex, mobile, qq) {
console.log(‘id=’ + id);
console.log(‘name=’ + name);
console.log(‘address=’ + address);
console.log(‘sex=’ + sex);
console.log(‘mobile=’ + mobile);
console.log(‘qq=’ + qq);
}
setUserInfo(1234, cyseria, guangzhou, female, 188***, 52***);
改成:
var setUserInfo = function(obj) {
console.log(‘id=’ + obj.id);
console.log(‘name=’ + obj.name);
console.log(‘address=’ + obj.address);
console.log(‘sex=’ + obj.sex);
console.log(‘mobile=’ + obj.mobile);
console.log(‘qq=’ + obj.qq);
}
setUserInfo({
id: 1234,
name: cyseria,
address: guangzhou,
sex: female,
mobile: 188***,
qq: 52***
});
尽量减少参数数量
尽量减少一些没必要的不会使用或者可以求出的参数。这里不做过多阐述。
少用三目运算
有时候我们用三目运算会觉得它性能高,代码量少。但是在实际开发中,即使把一段代码循环一百万次,使用三目运算和if,else
的时间开销依旧在同个级别中。同样,相比损失的代码可读性和可维护性,他能节省的代码量可以忽略不计。
至于例子,看看下面那个你就知道了:
if (!aup || bup) {
return a === doc ? -1 :
b === doc ? 1 :
aup ? -1 :
bup : -1 :
sortInput ? (indexOf.call(sortInput, a) - indexOf.call(sortInput, b)) :
0;
}
当然,如果只是简单的一句,用一下也没什么所谓。
var User = {
id: null,
name: null,
setId: function(id) {
this.id = id;
return this;
},
setName: function(name) {
this.name= name;
return this;
}
};
console.log(User.setId(1234).setName(‘cyseria’));
var Spirit = function(name) {
this.name = name;
};
Spirit.prototype.attack = function(type) {
if (type === 'waveBoxing') {
console.log(this.name + ':使用波动拳');
} else if (type === 'whirlKick') {
console.log(this.name + ':使用旋风腿');
}
};
var Spirit = new Spirit('AAA');
Spirit .attack('waveBoxing');
Spirit .attack('whirlKick');
改成:
var Attack = function(spirit) {
this.spirit = spirit;
};
Attack.prototype.start = function(type) {
return this.list[type].call(this);
}
Attack.prototype.list= function(type) {
waveBoxing: function() {
console.log(this.spirit.name + ‘:使用波动拳’);
},
whirlKick: function() {
console.log(this.spirit.name + ‘:使用旋风腿’);
}
};
var Spirit = function(name) {
this.name = name;
this.attackObj = new Attack(this);
};
Spirit.prototype.attack = function(type) {
this.attackObj.start(type);
};
var Spirit = new Spirit('AAA');
Spirit .attack('waveBoxing');
Spirit .attack('whirlKick');
var print = function(i) {
console.log(i);
};
var func = function() {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i * j > 30) {
return print(i);
}
}
}
};
func();