web前端性能优化

2019-12-30  本文已影响0人  刘叶青

\color{red}{重复代码要提取成函数,然后从外部传入实参,来让代码更灵活}
原代码:
function change_start_price(e) {
dispatch({
type : 'groupManageModel/updateState',
payload : {
start_price : e
}
});
}
function change_end_price(e) {
dispatch({
type : 'groupManageModel/updateState',
payload : {
end : e
}
});
}
修改之后的代码:
function change_val(key, e) {
dispatch({
type : 'groupManageModel/updateState',
payload : {
[key] : e
}
});
}
调用时这样调用:
change_val.bind(this, 'start_price')
change_val.bind(this, 'end_price')

\color{red}{2个变量,是同一个值,这种代码要去掉其中一个变量}

\color{red}{新建弹出框时清空弹出框数据,其他时候不清空弹出框数据,以前在弹出框里处理数据以后,点击确定,成功以后我也清空弹出框数据,其实没必要}

\color{red}{同一个属性使用次数超过一次时,进行封装:}
原代码:
if(addModalTitle == '编辑'){
// 编辑商品组
dispatch({
type: 'groupManageModel/goodsRuleupdate',
payload: {
id,
gePrice : select_price ? start_price : undefined,
ltPrice : select_price ? end_price : undefined,
},
});
}
else{
// 创建商品组
dispatch({
type: 'groupManageModel/goodsRulecreate',
payload: {
gePrice : select_price ? start_price : undefined,
ltPrice : select_price ? end_price : undefined,
},
});
}
修改之后的代码:
let commonPayload = {
gePrice : select_price ? start_price : undefined,
ltPrice : select_price ? end_price : undefined,
};
if(addModalTitle != '编辑'){
// 创建商品组
dispatch({
type: 'groupManageModel/goodsRulecreate',
payload: commonPayload,
});
}
else{
// 编辑商品组
dispatch({
type: 'groupManageModel/goodsRuleupdate',
payload: {
id,
...commonPayload
},
});
}

\color{red}{关于for循环时,缓存长度的值:}
原代码:
var arr = [1, 2];
for(var i = 0;i < arr.length;i++){
console.log(arr[i]);
}
修改之后的代码:
var arr = [1, 2];
for(var i = 0,len = arr.length;i < len;i++){
console.log(arr[i]);
}

上一篇 下一篇

猜你喜欢

热点阅读