在 Javascript (ES6) 中不使用 Switch 来调用新构造函数类的更好方法

Question

我有一个 class，它取决于字符串的类型，进入 swithc 语句，并调用 de new "class_name" 相关（构造函数）。

但是，我想知道是否有更好的方法来解决这个问题。

如果有一种方法可以在特定文件夹中独立调用所有存在的 class 构建器，那就太理想了。

项目示例：

Types/_String.js
Types/_Date.js
Types/_Integer.js
.....
TypeSwitcher.js（包含调用 "Types" classes 的构造函数的开关）。

关联代码到"TypeSwitcher.js"：

"use strict"
import _String from "./Inputs/_String";
import _Integer from "./Inputs/_Integer";
import _Date from "./Inputs/_Date";
import Document from "./Inputs/Document";
import Container from "./Inputs/Container";

export default class InputFactory
{
    static getInput(key,typedObject,form,inputDef)
    {
           let type=typedObject.getField(key).getTypeName();
           switch (type) 
           {
             case "String": {
               return new _String(key,typedObject,form,inputDef); 
             } break;

             case "Integer": {
               return new _Integer(key,typedObject,form,inputDef); 
             } break;

             case "Date": {
               return new _Date(key,typedObject,form,inputDef);                
             }break;

             case "Document": {
              return new Document(key,typedObject,form,inputDef);                
            }break;

            case "Container": {
              return new Container(key,typedObject,form,inputDef);                
            }break;  

            default: {throw "Input undefined:"+type}     
           }          
    }       
}

新建（已编辑） 我没有classes只有下划线“_”，也正常。我已经放置了缩进脚本，因为我正在重新定义系统的基本类型以根据我的需要自定义它们（String.js 保留并且不会离开，所以 _String.js)

我试过这样做：

"use strict"
import _String from "./Inputs/_String";
import _Integer from "./Inputs/_Integer";
import _Date from "./Inputs/_Date";

const predefinedSystemVar = ["String", "Integer", "Date"];

export default class InputFactory
{
    static getInput (key, typedObject, form, inputDef)
    {
      let type = typedObject.getField(key).getTypeName();
      if (predefinedSystemVar.includes(type) )    
          type = `_${type}`;  
      return eval( `new types[type](key, typedObject, form, inputDef)` );          
    }
}

已更新 但由于 webpack 的缘故，它并没有很好地工作，。 v4 :( 我认为 webpack v4 将名称更改为 imports 等，并且代码技巧不起作用 ...

问题，如果我以后创建一个新的class，我将不得不添加一个新的"case"并导入以考虑新的构造函数。

所以，我尝试的解决方案，我不太喜欢，因为我必须向 "predefinedSystemVar" 添加新变量...

ES6 或 javascript 中是否有一些东西可以以更好和优化的方式而不是 switch -> case 来完成这项工作？

Additional note: Project enviroment:

Webpack 诉4.x
通天塔7.x
ES6

package.json

{
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.2",
    "@babel/plugin-proposal-class-properties": "^7.7.0",
    "@babel/preset-env": "^7.7.1",
    "babel-loader": "^8.0.6",
    "cypress": "^3.7.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },

Answer 1

一种方法是创建一个对象，其键与大小写相同，值是一个函数，returns 一个您想要的值，如下所示：

"use strict"
import _String from "./Inputs/_String";
import _Integer from "./Inputs/_Integer";
import _Date from "./Inputs/_Date";

export default class InputFactory {
    static getInput(key, typedObject, form, inputDef) {
        let type = typedObject.getField(key).getTypeName();
        const operations = {
            "String": () => new _String(key, typedObject, form, inputDef),
            "Integer": () => new _Integer(key, typedObject, form, inputDef),
            "Date": () => new _Date(key, typedObject, form, inputDef),
        }

        try {
            return operations[type]();
        } catch() {
            throw "Input undefined:" + type
        }
    }
}

Answer 2

是的，如果我理解正确的话应该是可以的。下面的代码应该可以工作，除非我犯了一些语法错误。它确实需要更新类数组，但比更新 switch case 和其他解决方案工作更少。希望对您有所帮助，如果有帮助，请标记为答案，祝您一天愉快，干杯！

"use strict"
import _String from "./Inputs/_String";
import _Integer from "./Inputs/_Integer";
import _Date from "./Inputs/_Date";

const classes = {
    _String,
    _Integer,
    _Date
};

export default class InputFactory
{
    static getInput(key,typedObject,form,inputDef)
    {
           let type=typedObject.getField(key).getTypeName();
           if (classes["_"+type]{
            return new classes["_"+type](key,typedObject,form,inputDef);
           } else {
            throw "Input undefined:"+type
           }         
    }       
}

在 Javascript (ES6) 中不使用 Switch 来调用新构造函数类的更好方法

Better way to call new constructor classes not using a Switch in Javascript (ES6)

javascript

ecmascript-6

es6-class

在 Javascript (ES6) 中不使用 Switch 来调用新构造函数 类 的更好方法

Better way to call new constructor classes not using a Switch in Javascript (ES6)

javascript

ecmascript-6

es6-class

在 Javascript (ES6) 中不使用 Switch 来调用新构造函数类的更好方法