如何将此 Angular/TS 代码重构为几行以获得更好的性能和可读性？答案

【问题标题】：How to refactor this Angular/TS code into few lines for better performance & readability?如何将此 Angular/TS 代码重构为几行以获得更好的性能和可读性？
【发布时间】：2023-01-02 15:31:39
【问题描述】：

我有一个 getBaseUrl() 方法，它根据 serviceType 值将字符串值分配给 this.baseURL。

getBaseUrl(serviceType: string, network?: string) {
    this.network = network;

    const PROXY_13541_NEEDED_SERVICE_TYPES = ["pipInventory"];
    const PROXY_13561_NEEDED_SERVICE_TYPES = [
      "pipChangeManager",
      "pubChangeManagerdbw",
      "pubChangeManager",
      "pubChangeManager alert",
      "pipChangeManagerBulkvalidate",
    ];
    const PROXY_13651_NEEDED_SERVICE_TYPES = [
      "elineChangeManagerSubscribe",
      "elineChangeManager",
      "elanChangeManager",
      "elanChangeManagerBulkvalidate",
    ];
    const PROXY_13661_NEEDED_SERVICE_TYPES = [
      "enum-values-by-pagetype",
      "dnmCommon",
      "self-service",
      "dnmEline",
      "dnm",
      "dnmDelphiTestResult",
      "chatbot",
    ];
    const PROXY_13396_NEEDED_SERVICE_TYPES = ["pnp"];
    const PROXY_13621_NEEDED_SERVICE_TYPES = [
      "utilizationExportController",
      "utilizationExportController_pub",
      "bulkUtilizationPub",
    ];
    const PROXY_13751_NEEDED_SERVICE_TYPES = ["ccds"];
    const PROXY_13551_NEEDED_SERVICE_TYPES = ["routerservice"];
    const PROXY_13571_NEEDED_SERVICE_TYPES = [
      "pipAnalyticscheduled",
      "pipAnalytics",
      "pipAnalyticsNTD",
      "pipAnalyticsBulk",
    ];
    const PROXY_14150_NEEDED_SERVICE_TYPES = [
      "12and13workflow",
      "12and13workflowstatus",
      "dnmworkflow",
    ];
    const PROXY_14160_NEEDED_SERVICE_TYPES = ["errorManagement"];
    const PROXY_13601_NEEDED_SERVICE_TYPES = [
      "dnmActivationSupport",
      "activation",
    ];
    const PROXY_13631_NEEDED_SERVICE_TYPES = [
      "pubInventory",
      "pubInventorySubInprogress",
      "pubInventoryAccessSpeed",
    ];
    const PROXY_7303_NEEDED_SERVICE_TYPES = ["provRestBridge"];
    const PROXY_13271_NEEDED_SERVICE_TYPES = ["vams"];
    const PROXY_13822_NEEDED_SERVICE_TYPES = ["ucpe"];
    const PROXY_13641_NEEDED_SERVICE_TYPES = [
      "ethernetEline",
      "ethernetElineBulk",
      "ethernetAccess",
      "ethernetElan",
      "ethernetTest",
    ];
    const PROXY_13721_NEEDED_SERVICE_TYPES = ["sciChangeManager"];
    const PROXY_13711_NEEDED_SERVICE_TYPES = ["scicatalog"];
    const PROXY_13784_NEEDED_SERVICE_TYPES = ["livedashboard"];
    const PROXY_13182_NEEDED_SERVICE_TYPES = ["1mmsService"];
    const PROXY_13171_NEEDED_SERVICE_TYPES = [
      "pipVNS",
      "upiServices",
      "webComponent",
      "",
    ];

    this.options = this.getOptions();

    if (PROXY_13541_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13541/";
    } else if (PROXY_13561_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13561/";
    } else if (PROXY_13651_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13651/";
    } else if (PROXY_13661_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13661/";
    } else if (PROXY_13396_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13396/";
      this.options = this.getVnsOptions();
    } else if (PROXY_13621_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13621/";
    } else if (PROXY_13751_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13751/";
    } else if (PROXY_13551_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13551/";
    } else if (PROXY_13571_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13571/";
    } else if (PROXY_14150_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_14158/";
    } else if (PROXY_14160_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_14160/";
    } else if (PROXY_13601_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13601/";
    } else if (PROXY_13631_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13631/";
    } else if (PROXY_7303_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_7303/";
    } else if (PROXY_13271_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13271/";
      this.options = this.getVnsOptions();
    } else if (PROXY_13822_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13641/";
    } else if (PROXY_13641_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13721";
    } else if (PROXY_13721_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13721/";
    } else if (PROXY_13711_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13711/";
    } else if (PROXY_13784_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13784/";
    } else if (PROXY_13182_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13182/";
    } else if (PROXY_13171_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13171/";
      this.options = this.getVnsOptions();
    } else {
      this.baseURL = "/PROXY_UNDEFINED/";
      this.options = this.getVnsOptions();
    }
  }

我期望以该方法具有的方式重构该方法

行数少
最佳性能和
良好的可读性
请帮我解决这个...

【问题讨论】：

标签： javascript angular typescript refactoring

【解决方案1】：

我用将基本 URL 映射到服务类型数组的对象 serviceTypeMap 替换了一长串常量和 if-else 语句。然后，我使用 for-of 循环迭代 serviceTypeMap 中的条目，并检查传递给函数的服务类型是否包含在所需服务类型数组中。如果是，则将相应的基本 URL 分配给 this.baseURL 并使用 break 语句提前退出循环。

这减少了行数并提高了性能，因为循环将在找到匹配项后立即退出，而不是继续检查所有服务类型。希望这可以帮助！

getBaseUrl(serviceType: string, network?: string) {
  this.network = network;

  const serviceTypeMap = {
    PROXY_13541: ["pipInventory"],
    PROXY_13561: [
      "pipChangeManager",
      "pubChangeManagerdbw",
      "pubChangeManager",
      "pubChangeManager alert",
      "pipChangeManagerBulkvalidate"
    ],
    PROXY_13651: [
      "elineChangeManagerSubscribe",
      "elineChangeManager",
      "elanChangeManager",
      "elanChangeManagerBulkvalidate"
    ],
    PROXY_13661: [
      "enum-values-by-pagetype",
      "dnmCommon",
      "self-service",
      "dnmEline",
      "dnm",
      "dnmDelphiTestResult",
      "chatbot"
    ],
    PROXY_13396: ["pnp"],
    PROXY_13621: [
      "utilizationExportController",
      "utilizationExportController_pub",
      "bulkUtilizationPub"
    ],
    PROXY_13751: ["ccds"],
    PROXY_13551: ["routerservice"],
    PROXY_13571: [
      "pipAnalyticscheduled",
      "pipAnalytics",
      "pipAnalyticsNTD",
      "pipAnalyticsBulk"
    ],
    PROXY_14150: [
      "12and13workflow",
      "12and13workflowstatus",
      "dnmworkflow"
    ],
    PROXY_14160: ["errorManagement"],
    PROXY_13601: [
      "dnmActivationSupport",
      "activation"
    ],
    PROXY_13631: [
      "pubInventory",
      "pubInventorySubInprogress",
      "pubInventoryAccessSpeed"
    ],
    PROXY_7303: ["provRestBridge"],
    PROXY_13271: ["vams"],
    PROXY_13822: ["ucpe"],
    PROXY_13641: [
      "ethernetEline",
      "ethernetElineBulk",
      "ethernetAccess",
      "ethernetElan",
      "ethernetTest"
    ],
    PROXY_13721: ["sciChangeManager"],
    PROXY_13711: ["scicatalog"],
    PROXY_13784: ["livedashboard"],
    PROXY_13182: ["1mmsService"],
    PROXY_13171: [
      "pipVNS",
      "upiServices",
      "webComponent",
      ""
    ]
  };

  for (const [baseURL, neededServiceTypes] of Object.entries(serviceTypeMap)) {
    if (neededServiceTypes.includes(serviceType)) {
      this.baseURL = `/${baseURL}/`;
      break;
    }
  }

  this.options = this.getOptions();
}

【讨论】：

【解决方案2】：

按照下面的步骤，您会发现更好的代码结构、易读性和最佳性能。

为名为的 serviceTypeMap 变量创建单独的文件服务类型.enum.ts并将你的数组放在那里，如下所示

枚举允许开发人员定义一组命名常量。使用枚举可以更轻松地记录意图，或创建一组不同的案例。 TypeScript 提供基于数字和字符串的枚举。

export enum ServiceTypeMap  = {
    PROXY_13541: ["pipInventory"],
    PROXY_13561: [
      "pipChangeManager",
      "pubChangeManagerdbw",
      "pubChangeManager",
      "pubChangeManager alert",
      "pipChangeManagerBulkvalidate"
    ],
    PROXY_13651: [
      "elineChangeManagerSubscribe",
      "elineChangeManager",
      "elanChangeManager",
      "elanChangeManagerBulkvalidate"
    ],
    PROXY_13661: [
      "enum-values-by-pagetype",
      "dnmCommon",
      "self-service",
      "dnmEline",
      "dnm",
      "dnmDelphiTestResult",
      "chatbot"
    ],
    PROXY_13396: ["pnp"],
    PROXY_13621: [
      "utilizationExportController",
      "utilizationExportController_pub",
      "bulkUtilizationPub"
    ],
    PROXY_13751: ["ccds"],
    PROXY_13551: ["routerservice"],
    PROXY_13571: [
      "pipAnalyticscheduled",
      "pipAnalytics",
      "pipAnalyticsNTD",
      "pipAnalyticsBulk"
    ],
    PROXY_14150: [
      "12and13workflow",
      "12and13workflowstatus",
      "dnmworkflow"
    ],
    PROXY_14160: ["errorManagement"],
    PROXY_13601: [
      "dnmActivationSupport",
      "activation"
    ],
    PROXY_13631: [
      "pubInventory",
      "pubInventorySubInprogress",
      "pubInventoryAccessSpeed"
    ],
    PROXY_7303: ["provRestBridge"],
    PROXY_13271: ["vams"],
    PROXY_13822: ["ucpe"],
    PROXY_13641: [
      "ethernetEline",
      "ethernetElineBulk",
      "ethernetAccess",
      "ethernetElan",
      "ethernetTest"
    ],
    PROXY_13721: ["sciChangeManager"],
    PROXY_13711: ["scicatalog"],
    PROXY_13784: ["livedashboard"],
    PROXY_13182: ["1mmsService"],
    PROXY_13171: [
      "pipVNS",
      "upiServices",
      "webComponent",
      ""
    ]
  };

现在让我们定义 getBaseUrl() 方法

/* Import your enum */

public getBaseUrl(serviceType: string, network?: string) {
  this.network = network;

  for (const [baseURL, neededServiceTypes] of Object.entries(ServiceTypeMap)) {
    if (neededServiceTypes.includes(serviceType)) {
      this.baseURL = `/${baseURL}/`;
      break;
    }
  }

  this.options = this.getOptions();
}

谢谢！

【讨论】：