Angular 開(kāi)發(fā)中避免使用 If-else 結(jié)構(gòu)的優(yōu)秀實(shí)踐

作者：劉汪洋 2023-11-14 08:00:00

在本文中，我們將探討如何在 Angular 代碼中減少 if/else 結(jié)構(gòu)的使用，并提供實(shí)用的技巧和示例，幫你寫(xiě)出更加簡(jiǎn)潔、更易維護(hù)的代碼。

譯者 | 劉汪洋

審校 | 重樓

Angular 是一個(gè)受歡迎的前端框架，因其強(qiáng)大的功能和易用性而廣受認(rèn)可。但是，像其他任何編程語(yǔ)言或框架一樣，它也面臨著一系列的挑戰(zhàn)，其中之一是在代碼中處理復(fù)雜的條件邏輯。在本文中，我們將探討如何在 Angular 代碼中減少 if/else 結(jié)構(gòu)的使用，并提供實(shí)用的技巧和示例，幫你寫(xiě)出更加簡(jiǎn)潔、更易維護(hù)的代碼。

If/else 結(jié)構(gòu)帶來(lái)的問(wèn)題

If/else 結(jié)構(gòu)，或稱為條件語(yǔ)句，是編程的基本部分。它們?cè)试S開(kāi)發(fā)者基于某些條件在代碼中做出決策。盡管它們是必要的，但過(guò)度使用它們可能導(dǎo)致很多問(wèn)題：

復(fù)雜性：隨著代碼庫(kù)的增長(zhǎng)，if/else 語(yǔ)句的數(shù)量可能急劇增加，你的代碼將難以閱讀和理解。這種復(fù)雜性可能導(dǎo)致錯(cuò)誤和維護(hù)更加困難。
可讀性：過(guò)多的 if/else 語(yǔ)句可能降低代碼的可讀性，使其他開(kāi)發(fā)者（甚至是你未來(lái)的自己）難以快速讀懂邏輯。
可維護(hù)性：包含過(guò)多 if/else 結(jié)構(gòu)的代碼可能變得難以維護(hù)，因?yàn)槿魏胃幕蚋驴赡芏夹枰诙鄠€(gè)地方進(jìn)行修改。
測(cè)試難度：測(cè)試包含許多 if/else 分支的代碼可能會(huì)很麻煩，導(dǎo)致很多人不愿意為此充分編寫(xiě)測(cè)試代碼，導(dǎo)致測(cè)試覆蓋率不足。

為了解決這些問(wèn)題，采用更加結(jié)構(gòu)化和利用好 Angular 的內(nèi)置方法來(lái)處理應(yīng)用程序中的條件邏輯至關(guān)重要。

避免在 Angular 中使用 If/else：使用 ngSwitch 指令來(lái)代替

Angular 提供了一種高效的方法來(lái)處理模板中的條件邏輯，即借助 ngSwitch指令。該指令能夠根據(jù)特定條件動(dòng)態(tài)切換多個(gè)視圖，從而避免使用復(fù)雜的 if/else 語(yǔ)句。接下來(lái)，我們將通過(guò)一個(gè)示例來(lái)詳細(xì)解釋其工作機(jī)制。

使用 ngSwitch 的代碼示例

如果你要封裝一個(gè)根據(jù)一周中的不同天數(shù)展示不同的信息的 Angular 組件。相比于采用 if/else 語(yǔ)句，更建議使用ngSwitch指令，代碼如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-day-message',
  template: `
    <div [ngSwitch]="dayOfWeek">
      <p *ngSwitchCase="'Monday'">一周的開(kāi)始。</p>
      <p *ngSwitchCase="'Friday'">周末即將到來(lái)！</p>
      <p *ngSwitchDefault>祝你度過(guò)愉快的一天！</p>
    </div>
  `,
})
  export class DayMessageComponent {
    dayOfWeek = 'Monday';
  }

在這個(gè)示例中，ngSwitch指令根據(jù)dayOfWeek屬性的值來(lái)切換不同的信息輸出。其中，*ngSwitchCase用于定義條件，而*ngSwitchDefault則為不滿足任何條件的情況提供了默認(rèn)選項(xiàng)。

通過(guò)采用ngSwitch指令，我們成功地簡(jiǎn)化了代碼結(jié)構(gòu)，使之更為清晰和便于維護(hù)。

Angular Pipes 的高效應(yīng)用

Angular 的 Pipes 功能為在模板中進(jìn)行數(shù)據(jù)轉(zhuǎn)換和格式化提供了一種優(yōu)雅的解決方案，從而避免了 if/else 語(yǔ)句的使用。Pipes 允許你根據(jù)特定條件對(duì)數(shù)據(jù)進(jìn)行條件化格式化。接下來(lái)，通過(guò)一個(gè)示例來(lái)詳解這一概念：

利用 Pipes 實(shí)現(xiàn)條件數(shù)據(jù)格式化的示例

設(shè)想你需要顯示產(chǎn)品列表，希望根據(jù)產(chǎn)品是否有庫(kù)存展示不同的信息。相比于使用 if/else 語(yǔ)句，我更建議你采用ngIf、ngElse結(jié)構(gòu)指令和自定義 pipe 相結(jié)合的方法。代碼如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  template: `
    <div *ngFor="let product of products">
      <h3>{{ product.name }}</h3>
      <p>價(jià)格：{{ product.price | currency }}</p>
      <p *ngIf="product.inStock; else outOfStockTemplate">有庫(kù)存</p>
      <ng-template #outOfStockTemplate>無(wú)庫(kù)存</ng-template>
    </div>
  `,
})
  
  export class ProductListComponent {
    products = [
      { name: '產(chǎn)品 A', price: 49.99, inStock: true },
      { name: '產(chǎn)品 B', price: 29.99, inStock: false },
      // ...其他產(chǎn)品
    ];
  }

在該實(shí)例中，我們運(yùn)用ngIf指令，根據(jù)產(chǎn)品的inStock屬性來(lái)?xiàng)l件性地展示相關(guān)信息。具有庫(kù)存的產(chǎn)品將顯示“有庫(kù)存”，否則將顯示“無(wú)庫(kù)存”。

通過(guò)這種方法，我們不僅優(yōu)化了代碼邏輯，還增強(qiáng)了代碼的可讀性和可維護(hù)性。

構(gòu)建自定義指令

當(dāng) Angular 內(nèi)置指令無(wú)法滿足特定業(yè)務(wù)邏輯需求時(shí)，自定義指令成為一種有效的解決方案。該方法能夠封裝條件邏輯，同時(shí)保證模板代碼的可讀性和可維護(hù)性。接下來(lái)，我們通過(guò)一個(gè)具體示例來(lái)講解：

實(shí)現(xiàn)折扣標(biāo)簽自定義指令示例

考慮一個(gè)場(chǎng)景：為具有特別折扣的產(chǎn)品展示獨(dú)特的標(biāo)簽。相比于在模板中硬編碼復(fù)雜的 if/else 邏輯，更推薦創(chuàng)建一個(gè)專門(mén)的自定義指令來(lái)處理這一需求。

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appDiscountBadge]'
})
  export class DiscountBadgeDirective {
    @Input() set appDiscountBadge(isDiscounted: boolean) {
      if (isDiscounted) {
        this.viewContainer.createEmbeddedView(this.templateRef);
      } else {
        this.viewContainer.clear();
      }
    }

    constructor(
      private templateRef: TemplateRef<any>,
      private viewContainer: ViewContainerRef
    ) {}
  }

在模板代碼中，你可以采用如下的方式使用這一自定義指令：

<div *ngFor="let product of products">
  <h3>{{ product.name }}</h3>
  <p>價(jià)格：{{ product.price | currency }}</p>
  <div *appDiscountBadge="product.hasDiscount" class="discount-badge">
  特別折扣！
  </div>
  </div>

此方法成功地將條件邏輯從模板中分離出來(lái)，增強(qiáng)了代碼的易理解性和可維護(hù)性。

常見(jiàn)問(wèn)題與解答

問(wèn)題1：為什么要避免在 Angular 項(xiàng)目中使用 if/else 結(jié)構(gòu)？

答案1：避免在 Angular 代碼中采用 if/else 結(jié)構(gòu)有助于提升代碼的可讀性、可維護(hù)性和可測(cè)試性。這一做法有助于降低代碼復(fù)雜度，從而提高整體的代碼質(zhì)量。

問(wèn)題2：何時(shí)應(yīng)當(dāng)優(yōu)先使用自定義指令而不是 Angular 的內(nèi)置功能，例如 ngIf 和 ngSwitch ？

答案2：當(dāng)你面臨需求具有特定性、可復(fù)用性，并且超越內(nèi)置指令能力范圍的條件邏輯時(shí)，應(yīng)當(dāng)考慮自定義指令。自定義指令可以很好地封裝這樣的邏輯，提供一種更加整潔有序的使用方式。

問(wèn)題3：在使用 ngIf 或自定義指令進(jìn)行條件渲染時(shí)，需要注意哪些性能方面的考慮？

答案3：盡管 Angular 的變更檢測(cè)機(jī)制非常高效，并針對(duì)渲染過(guò)程進(jìn)行了優(yōu)化，仍需關(guān)注條件判斷的數(shù)量和復(fù)雜度，以確保獲得最佳性能。

總結(jié)

避免在 Angular 代碼中使用 if/else 結(jié)構(gòu)是一種優(yōu)秀的編程實(shí)踐，它有助于提高代碼可維護(hù)性和可讀性。通過(guò)充分利用 Angular 的內(nèi)置特性，如 ngSwitch 指令、pipes 和自定義指令，你可以讓代碼更為清晰和有條理。請(qǐng)記住，這樣做的目的不僅是避免使用 if/else 本身，更是為了提高代碼質(zhì)量。