JavaScript 代码优化 - 简化人员选择逻辑

JavaScript 代码优化 - 简化人员选择逻辑

本文将对以下代码进行优化，使其更加易读、高效且易于维护。

personSelect(e) {
	//没有性别要求
	if (this.dataList.needMaleNum === null) {
		//校验总人数 如果没有性别要求则校验总人数即可，如果有则校验需要的男女数与总人数
		if (this.workerList.length < this.dataList.needWorkerNum - this.dataList.arriveNum) {
			//如果没有选择
			if (!this.pointList[e].selected) {
				this.pointList[e].selected = !this.pointList[e].selected;
				this.workerList.push(this.pointList[e])
			} else {
				this.pointList[e].selected = !this.pointList[e].selected;
				this.workerList = this.workerList.filter(worker => worker.id !== this.pointList[e].id);
			}
		} else {
			if (this.pointList[e].selected) {
				this.pointList[e].selected = !this.pointList[e].selected;
				this.workerList = this.workerList.filter(worker => worker.id !== this.pointList[e].id);
			} else {
				uni.showToast({
					title: '人员超出限制',
					duration: 2000
				});
			}
		}
	} else {
		if (this.workerList.length < this.dataList.needWorkerNum - this.dataList.arriveNum) {
			if (this.pointList[e].sex == '男') {
				//如果没有选择
				if (!this.pointList[e].selected) {
					if (this.currentMale == 0) {
						uni.showToast({
							title: '男性人员超出限制',
							duration: 2000
						});
						return;
					}
					this.pointList[e].selected = !this.pointList[e].selected;
					this.workerList.push(this.pointList[e]);
					this.currentMale--;
				} else {
					this.pointList[e].selected = !this.pointList[e].selected;
					this.workerList = this.workerList.filter(worker => worker.id !== this.pointList[e].id);
					this.currentMale++;
				}
			} else {
				//如果没有选择
				if (!this.pointList[e].selected) {
					if (this.currentWomen == 0) {
						uni.showToast({
							title: '女性人员超出限制',
							duration: 2000
						});
						return;
					}
					this.pointList[e].selected = !this.pointList[e].selected;
					this.workerList.push(this.pointList[e]);
					this.currentWomen--;
				} else {
					this.pointList[e].selected = !this.pointList[e].selected;
					this.workerList = this.workerList.filter(worker => worker.id !== this.pointList[e].id);
					this.currentWomen++;
				}
			}
		} else {
			if (this.pointList[e].selected) {
				this.pointList[e].selected = !this.pointList[e].selected;
				this.workerList = this.workerList.filter(worker => worker.id !== this.pointList[e].id);
				this.pointList[e].sex == '男' ? this.currentMale++ : this.currentWomen++;
			} else {
				uni.showToast({
					title: '人员超出限制',
					duration: 2000
				});
			}
		}
	}
}

优化建议：

1. 将函数拆分成多个小函数，方便维护和重用。

2. 简化if-else语句，避免过多嵌套，提高代码可读性。

3. 缓存变量，避免重复计算。

4. 使用三元表达式替换部分if-else语句，提高代码简洁性。

5. 避免在函数中直接调用uni.showToast()等UI操作，应该将UI操作封装成一个单独的函数。

修改后的代码：

// 校验总人数
function validateTotalNum(selected, id) {
  if (this.workerList.length < this.dataList.needWorkerNum - this.dataList.arriveNum) {
    if (!selected) {
      this.pointList[id].selected = !this.pointList[id].selected;
      this.workerList.push(this.pointList[id]);
    } else {
      this.pointList[id].selected = !this.pointList[id].selected;
      this.workerList = this.workerList.filter(worker => worker.id !== id);
    }
  } else {
    uni.showToast({
      title: '人员超出限制',
      duration: 2000
    });
  }
}

// 校验男女人数
function validateGenderNum(selected, id) {
  if (this.pointList[id].sex == '男') {
    if (!selected) {
      if (this.currentMale == 0) {
        uni.showToast({
          title: '男性人员超出限制',
          duration: 2000
        });
        return;
      }
      this.pointList[id].selected = !this.pointList[id].selected;
      this.workerList.push(this.pointList[id]);
      this.currentMale--;
    } else {
      this.pointList[id].selected = !this.pointList[id].selected;
      this.workerList = this.workerList.filter(worker => worker.id !== id);
      this.currentMale++;
    }
  } else {
    if (!selected) {
      if (this.currentWomen == 0) {
        uni.showToast({
          title: '女性人员超出限制',
          duration: 2000
        });
        return;
      }
      this.pointList[id].selected = !this.pointList[id].selected;
      this.workerList.push(this.pointList[id]);
      this.currentWomen--;
    } else {
      this.pointList[id].selected = !this.pointList[id].selected;
      this.workerList = this.workerList.filter(worker => worker.id !== id);
      this.currentWomen++;
    }
  }
}

// 点击选择人员
function personSelect(e) {
  const selected = this.pointList[e].selected;
  const id = this.pointList[e].id;
  // 没有性别要求
  if (this.dataList.needMaleNum === null) {
    validateTotalNum.call(this, selected, id);
  } else {
    validateGenderNum.call(this, selected, id);
  }
}

通过以上优化，代码逻辑更加清晰，可读性更高，且易于维护和扩展。