重构typescript中的长函数

Question

我有这个函数吗？我试着做一些重构。因此，以一个通用函数为例

setSelectedSearchOptions(optionLabel: string) {
//this.filterSection.reset();
this.selectedOption = optionLabel;
this.selectedSearch = optionLabel;
if (optionLabel === 'Registratie') {
this.showDatePickerOne = true;
this.showDatePickerTwo = false;
this.showDatePickerThree = false;
this.buttonFilterDisabled = false;
this.startDate = undefined;
this.selectedValue = '';
this.showDropdownChallenge = false;
this.showDropdownVcheqCode = false;
this.showDropdownMeasurement = false;
this.showDropdownIndicator = false;
}
if (optionLabel === 'Vcheq') {
this.showDatePickerOne = true;
this.showDatePickerTwo = false;
this.showDatePickerThree = false;
this.showDropdownMeasurement = false;
this.isButtonVisible = true;
this.startDate = undefined;
this.showDropdownVcheqCode = true;
this.showDropdownChallenge = false;
this.showDropdownQrCode = false;
this.showDropdownIndicator = false;
}
if (optionLabel === 'Doelen') {
this.showDatePickerOne = true;
this.showDatePickerTwo = false;
this.showDatePickerThree = false;
this.showDropdownMeasurement = false;
this.isButtonVisible = false;
this.startDate = undefined;
this.selectedValue = ',';
this.selectedValueOptie = ',';
this.selectedValueProgressie = ',';
this.showDropdownQrCode = true;
this.showDropdownChallenge = false;
this.showDropdownVcheqCode = false;
this.showDropdownIndicator = false;
}
}

但对我来说，它似乎可以缩短。但我不知道具体是怎么回事。

所以我的问题是，如何缩短这个函数？

谢谢

Answer 1

您可以将值放在类似的"表"中

const LABELS = ['Registratie', 'Vcheq', 'Doelen'];
const OPTIONS = {
// Registratie   Vcheq   Doelen
showDatePickerOne:    [             1,      1,       1],
showDatePickerTwo:    [             0,      1,       0],
showDatePickerThree:  [             1,      1,       0],
...etc
};

然后用替换你的代码

let index = LABELS.indexOf(optionLabel);
for (let [k, v] of Object.entries(OPTIONS)) {
this[k] = v[index];
}

通过这种方式，您可以在不失去灵活性的情况下保持代码的紧凑性。

Answer 2

我会这样做：

setSelectedSearchOptions(optionLabel: string) {
this.selectedOption = optionLabel;
this.selectedSearch = optionLabel;
switch (optionLabel) {
case 'Registratie':
this.registratie();
break;
case 'Vcheq':
this.vcheq();
break;
case 'Doelen':
this.doelen();
break;
}
}
private registratie() {
this.showDatePickerOne = true;
this.showDatePickerTwo = false;
this.showDatePickerThree = false;
this.buttonFilterDisabled = false;
this.startDate = undefined;
this.selectedValue = '';
this.showDropdownChallenge = false;
this.showDropdownVcheqCode = false;
this.showDropdownMeasurement = false;
this.showDropdownIndicator = false;
}
private vcheq() {
this.showDatePickerOne = true;
this.showDatePickerTwo = false;
this.showDatePickerThree = false;
this.showDropdownMeasurement = false;
this.isButtonVisible = true;
this.startDate = undefined;
this.showDropdownVcheqCode = true;
this.showDropdownChallenge = false;
this.showDropdownQrCode = false;
this.showDropdownIndicator = false;
}
private doelen() {
this.showDatePickerOne = true;
this.showDatePickerTwo = false;
this.showDatePickerThree = false;
this.showDropdownMeasurement = false;
this.isButtonVisible = false;
this.startDate = undefined;
this.selectedValue = ',';
this.selectedValueOptie = ',';
this.selectedValueProgressie = ',';
this.showDropdownQrCode = true;
this.showDropdownChallenge = false;
this.showDropdownVcheqCode = false;
this.showDropdownIndicator = false;
}