时间戳

首页 > 解决方案 > 避免Angular组件中的许多if语句调用特定函数的最佳方法是什么？

javascript - 避免Angular组件中的许多if语句调用特定函数的最佳方法是什么？

问题描述

我正在Angular 7中创建一个温度转换应用程序，在我的formGroup中我有一个输入/输出值，以及2个多选，用户可以在其中选择一个温度单位“从”和“到”进行转换（摄氏度、华氏度或开尔文）。

当用户在我的组件中提交表单时，我得到输入数据

submitForm(data) {
    this.input = data.input;
    this.unitInput= data.unitInput;
    this.unitTarget= data.unitTarget;
    this.output= data.output;
  }

我想只是添加 if 语句来调用将进行转换的函数，但现在查看我拥有的所有 if 语句似乎很多，而不是一个好的设计。

if (this.inputUnit === 'Celsius' && this.targetUnit === 'Fahrenheit') {
        this.celsiusToFahrenheitConversion ();
}
if (this.inputUnit === 'Celsius' && this.targetUnit === 'Kelvin') {
      this.celsiusToKelvinConversion ();
}
if (this.inputUnit === 'Celsius' && this.targetUnit === 'Rankine') {
      this.celsiusToRankineConversion ();
}

If's for Fahrenheit, If's for Kelvin, If's for Rankine, etc.. 如果在功能中我想添加不同类型的单位呢？什么是更好的方法？

提前致谢

标签： javascriptangulartypescript

解决方案

我认为处理这个问题的最干净的方法是使用 switch 语句。没有比这更简单的了，我个人也讨厌它，但有时真的没有办法绕过它。

switch(this.inputType) {
  case 'Celsius':
    switch(this.targetUnit) {
      case 'Fahrenheit':
        this.celsiusToFahrenheitConversion();
        break;
      case 'Kelvin':
        this.celsiusToKelvinConversion();
        break;
      case 'Rankine':
        this.celsiusToRankineConversion();
        break;
    }
    break;
  case 'Fahrenheit':
    break;
  case 'Rankine':
    break;
  case 'Kelvin':
    break;
}

然而！这是一个数学转换。F° 到 C° (32°F − 32) × 5/9， F° 到 Kelvin 是(32°F − 32) × 5/9 + 273.15， F° 到 Rankine 是32°F + 459.67等等。哪里有数学，哪里就有系统。我的方法是创建一个转换表 - 一个对象，并将表单值用作查找值。例如：

const magicalLookupTable = {
  celsius: {
    fahrenheit: () => {
      /** Implementation */
    },
    kelvin: () => {
      /** Implementation */
    }
  },
  fahrenheit: {
    celsius: () => {
      /** Implementation */
    },
    kelvin: () => {
      /** Implementation */
    }
  }
}

推荐阅读