本文記錄我在工作中的一次失誤。

如下圖所示，我在建構函式里注入了一個新的依賴：

protected checkoutService: CheckoutService

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/c704e19e382143e7a8eb8a14e128484f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16)

當下列情況同時滿足時，客戶就會遇到編譯錯誤：

(1) 客戶升級到了新的 minor 版本，即我引入該新的依賴的版本。
(2) 客戶之前擴充套件了 CheckoutDeliveryService
(3) 客戶在自己的擴充套件類的建構函式里，呼叫了 super 即父類的建構函式。

因為客戶是從舊版本升級上來的，所以建構函式里沒有傳遞我這個新版本引入的 checkoutService 輸入引數，所以會遇到語法錯誤。

正確的做法如下圖所示：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/7576b226f0bd48d78d770c6fbc70c9ef.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16)

```typescript
export class CheckoutDeliveryService implements CheckoutDeliveryFacade {
  constructor(
    protected checkoutStore: Store<statewithcheckout>,
    protected processStateStore: Store<statewithprocess>>,
    protected activeCartService: ActiveCartService,
    protected userIdService: UserIdService,
    @Optional() protected checkoutService?: CheckoutService
  ) {}
```

使用 @Optional 來修飾這個新引入的建構函式輸入引數。

同時，在程式碼裡的邏輯也需要改變，需要同時處理 checkoutService 為空或者不為空的情況。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/bc685971645947d4bb7a776669e40921.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16)

```typescript
  protected isCheckoutDetailsLoading$: Observable<boolean> = this
    .checkoutService
    ? this.checkoutService.isLoading()
    : this.checkoutStore.pipe(select(CheckoutSelectors.getCheckoutLoading));
```

如果 checkoutService 不為空，則使用 checkoutService.isLoading 返回的 Observable；否則，就為舊版本的情況，使用舊版本的實現，從 checkoutStore 裡取出 checkout loading 的讀取狀態。

修改了服務程式碼之後，也會影響到對應的單元測試程式碼。

如今的 isSetDeliveryModeBusy 標誌位，決定其值的輸入條件之二，從 checkoutService.isLoading, 更改成了 isCheckoutDetailsLoading.

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/208f2e6b49314fe0b0b7e30c6c0b8c8c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16)

因此，在單元測試程式碼裡，我們需要建立一個全域性的 isCheckoutLoading$ Observable 物件：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/c13e33dd7d33467c873b338a1c1a5da4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16)

然後建立一個 mockCheckoutService 類，內部返回這個全域性的 isCheckoutLoading$ Observable 物件。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/1c9eafab15b24ee7adf8d69469bd5fd7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16)

這樣，在任何時候我們需要修改 CheckoutService.isLoading 的返回值時，透過呼叫 isCheckoutLoading$ 的 next 方法即可靈活控制。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/fd06057ae0cc457dbe04484a7f2c4418.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16)

需要強調的是，在大型 API 中保持穩定性是一項挑戰。 如果您要更改 API 庫，請考慮更改的廣泛後果，並嘗試預測可能出現的任何問題。

更多Jerry的原創文章，盡在："汪子熙".</boolean></statewithprocess></statewithcheckout>

避免修改建構函式輸入引數引起的 breaking change

相關文章