随笔（三）——项目代码优化

文章目录

一、数据驱动的优化点
- 0.项目技术
- 1.需求说明
- [2. 优化前](#2. 优化前)
- 3.优化后（复杂版）
- 4.优化后（可读性高版）
二、使用循环遍历，减少if-else
- 1.源代码
- [2. 优化后](#2. 优化后)
- [3. 优点](#3. 优点)

一、数据驱动的优化点

0.项目技术

vue2 + view design

1.需求说明

一级选中，二级所有选中，一级下的所有不选中，二级的也不选中。二级有部分选中，一级半选中。
疑问：为什么不直接用组建，这种级联的方法不是刚好嘛？

原因：一级数据根据接口返回，二级数据根据一级的id请求获取，通过二级返回的id数据，将对应的数据插入到一级，所以只能手写一份逻辑，变成如下数据格式

javascript 复制代码

list: [
	{
		id: 0,
		name: '',
		checkAll: false, // 全选
        indeterminate: false, // 半选
		children: [
			id: 0,
			name: '',
			select: false, // 子级是否选中
		],
	}
]

效果示意图：

2. 优化前

当编辑后，需要将后端返回的数据和所有数据进行对比，然后将所有数据的的选中/半选/不选的状态分别赋值。判断依据是后端数据的子级和源数据的子级是否一致，一致全选，子级不一致并子级大于0半选，否则不选

selectedCounts为存储下标的值（如果目标数组存在当前item的id，存储下标加1），source是当前遍历的item

javascript 复制代码

// 如果源数据的子级 === 目标数据的子级 (前提是其中一个子级的长度大于0，不然会出现子级没有数据，默认选中的情况)
if ((selectedCount === source.children.length) && source.children.length) {
  // 子级相同，说明是全选状态
  source.checkAll = true
  source.indeterminate = false
} else if (selectedCount > 0) {
  // 子级大于一个，说明是半选中状态
  source.checkAll = false
  source.indeterminate = true
} else {
  source.checkAll = false
  source.indeterminate = false
}

3.优化后（复杂版）

仔细看上面逻辑，你将得到以下思路

1: 你会发现改变的只有全选和半选，不选是默认为false的，不用修改

2: 半选/全选的变化来源于当前item的子级长度（源数据的子级）和目标数据的子级

理解了上述的数据驱动，将不选的逻辑去调，也就是去调else哪部分内容，然后依次变成了下部分的优化

javascript 复制代码

source.checkAll = !!((selectedCount === source.children.length) && source.children.length) // 不加上true/false返回的就是1和0，导致回显失败
source.indeterminate = !source.checkAll && selectedCount > 0

问题：== 为什么使用了!!==

将返回的结果强制转为了布尔类型，防止有可能返回其他类型的数据

4.优化后（可读性高版）

上述代码如果是不理解代码的话，那么需要更久的思考时间，不利于代码的维护和可读性，通过gpt的优化，变成了以下代码（仅供参考）

javascript 复制代码

const totalChildren = source.children.length;
const allSelected = selectedCount === totalChildren;
const noneSelected = selectedCount === 0;

source.checkAll = allSelected;
source.indeterminate = !allSelected && !noneSelected;

二、使用循环遍历，减少if-else

1.源代码

dataPointsMap是一个map数据类型，里面有value1,value2,value3这三个数据类型

javascript 复制代码

if (dataPointsMap.value1) {
	this.switchSelectEcartshHandle('value1')
} else if (dataPointsMap.value2) {
	this.switchSelectEcartshHandle('value2')
} else if (dataPointsMap.value3) {
	this.switchSelectEcartshHandle('value3')
}

2. 优化后

javascript 复制代码

const values = ['value1', 'value2', 'value3'];
for (const value of values) {
  if (dataPointsMap[value]) {
    this.switchSelectEcartshHandle(value);
    break; // 找到第一个匹配的值后退出循环
  }
}

3. 优点

减少重复代码：避免了多次重复的 if-else 语句。

可扩展性：如果将来需要添加更多的值，只需在数组中添加即可。

简洁：代码更加简洁，易于阅读和维护。