也许有人会感觉CR没有什么卵用,只要我代码实现了功能,我完成了开发任务,我就OK了,为啥还要CR?? 但是CR真的是有必要的,你不仅可以发现自己代码中的不足之处,待优化点,简洁明了的代码易读别人接手也会很快。
1. 比如在vue项目中只有某一个组件用某一个特别长的常量对象,如果你只是把常量直接放在该组件下的data中,不仅代码不易读,而且会被watch,影响性能,因为常量是不变的,不用被watch。这个时候Object.freeze()就起作用了,估计很多人都没用过这个特性,先来了解一下:
Object.freeze()是ES5新增的特性,可以冻结一个对象,防止对象被修改。 如果你有一个巨大的数组或Object,并且确信数据不会修改,使用Object.freeze()可以让性能大幅提升。对于纯展示的大数据,可以使用Object.freeze提升性能。
- 优化代码前:可读性差;直接放到data中,会被watch,实际上并不需要被watch
<script>
export default {
data() {
tableData: {
test1: '测试测试1测试1测试1测试1测试1测试11',
test2: '测试测试2测试2测试2测试2测试2测试22',
test3: '测试测试3测试3测试3测试3测试3测试33',
test4: '测试测试4测试4测试4测试4测试4测试44',
test5: '测试测试5测试5测试5测试5测试5测试55',
test6: '测试测试6测试6测试6测试6测试6测试66',
test7: '测试测试7测试7测试7测试7测试7测试77',
test8: '测试测试8测试8测试8测试8测试8测试88',
test9: '测试测试9测试9测试9测试9测试9测试99',
test10: '测试测试10测试10测试10测试10测试10测试1010'
}
}
}
</script>
- 优化代码后:vue不会对tableData里的object做getter、setter绑定,提升性能
<script>
// 如果是多个文件都用到这个,放在constant.js文件中
const TABLEDATA = {
test1: '测试测试1测试1测试1测试1测试1测试11',
test2: '测试测试2测试2测试2测试2测试2测试22',
test3: '测试测试3测试3测试3测试3测试3测试33',
test4: '测试测试4测试4测试4测试4测试4测试44',
test5: '测试测试5测试5测试5测试5测试5测试55',
test6: '测试测试6测试6测试6测试6测试6测试66',
test7: '测试测试7测试7测试7测试7测试7测试77',
test8: '测试测试8测试8测试8测试8测试8测试88',
test9: '测试测试9测试9测试9测试9测试9测试99',
test10: '测试测试10测试10测试10测试10测试10测试1010'
};
export default {
data() {
tableData: Object.freeze(TABLEDATA)
}
}
</script>
2. 想知道某一个对象数组中是否有符合要求的属性值,some()方法了解一下。
some() 方法用于检测数组中的元素是否满足指定条件
想知道对象数组中的是否有属性isEdit为true的数据
- 优化代码前:
export default {
methods() {
validateTable(arr) {
let flag = false;
if (arr.filter(item => item.isEdit).length) {
flag = true;
}
return flag;
}
}
}
- 优化代码后:代码简洁明了
export default {
methods() {
validateTable(arr) {
return arr.some(item => item.isEdit);
}
}
}
3. 有时候需要连续初始化vuex好几个平级的属性值,可能某一个方法要调用好几次,代码虽然容易理解,这个时候如果通过配置数据遍历传参更新相应数据会更好,简洁易读,便于之后的代码维护
- 优化代码前:
export default {
methods() {
...mapAtions([
'updateState'
]),
initState() {
this.updateState('state1', false);
this.updateState('state2', false);
this.updateState('state3', false);
},
checkState(state) {
if (state === 'state1') {
this.updateState('state1', true);
} else if (state === 'state2') {
this.updateState('state2', true);
} else if (state === 'state3') {
this.updateState('state3', true);
}
}
}
}
- 优化代码后:通过配置数据遍历处理数据是不是更加简洁明了了
const STATE_MAPPING = {
state1: 'state1',
state2: 'state2',
state3: 'state3'
};
export default {
methods() {
...mapAtions([
'updateState'
]),
initState() {
Object.keys(STATE_MAPPING).forEach(key => this.updateState(STATE_MAPPING[key], false));
},
checkState(state) {
this.updateState(STATE_MAPPING[state], true);
}
}
}
优化后的代码是不是很简洁明了,通过CR你会发现自己代码的不足之处,也会在CR的过程中了解到一种需求的不同解决办法。