iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0

方法鏈可以透過一連串的方法呼叫來取得計算結果,而無需將中間結果存為變數。

生活範例

想像草莓果醬的生產線,上面包含幾個主要關卡:清洗、烹煮和裝瓶,經過一步步的處理,將新鮮草莓轉變為美味的果醬。生產線就像是方法鏈,而這些關卡則是草莓果醬的生產方法。這條生產線透過一連串的生產方法,將草莓加工成草莓果醬,就像方法鏈呼叫一連串的方法來得到最終結果一樣。

舉個例子

方法鏈是一個十分常見的技巧,透過連續調用同一對象的方法來進行一系列操作。讓我們用一個簡單的數學範例來展示方法鏈的設計方式。

MathChain 代表一個數學運算對象,能夠進行基本的加減乘除,你可以連續對目標數字進行運算,直到返回計算結果。

class MathChain {
  private value: number;

  constructor(initialValue: number) {
    this.value = initialValue;
    console.log(`Initial value: ${this.value}`);
  }

  add(n: number) {
    this.value += n;
    console.log(`Adding ${n}: ${this.value}`);
    return this;
  }

  subtract(n: number) {
    this.value -= n;
    console.log(`Subtracting ${n}: ${this.value}`);
    return this;
  }

  multiply(n: number) {
    this.value *= n;
    console.log(`Multiplying by ${n}: ${this.value}`);
    return this;
  }

  divide(n: number) {
    this.value /= n;
    console.log(`Dividing by ${n}: ${this.value}`);
    return this;
  }

  getValue() {
    return this.value;
  }
}

初始化一個運算方法鏈,依序執行加減乘除,再印出結果。

class MathChainTestDrive {
  static main() {
    const result = new MathChain(5)
      .add(4)
      .subtract(3)
      .multiply(2)
      .divide(1)
      .getValue();

    console.log(`Calculated result: ${result}`);
  }
}

MathChainTestDrive.main();

執行結果:

Initial value: 5
Adding 4: 9
Subtracting 3: 6
Multiplying by 2: 12
Dividing by 1: 12
Final value: 12
Calculation result: 12

定義

Method Chaining

  • 方法鏈(Chainable): 具備多個操作行為的物件,支援連續調用方法

方法鏈是一種程式設計技巧,使對象可以在同一語句中連續調用多個方法。這種設計的特點是,每個方法都會返回原對象,以便接續更多的操作。這允許我們直接呼叫一連串的方法來取得最終結果,而不需要將中間結果儲存成一個個變數,使程式碼變得更簡潔且更具組織性。

方法鏈被廣泛應用於 JavaScript 的基本型別中,例如字串和陣列的操作方法,許多開源套件也用這種手法設計 API,像是 zodRxJS。嚴格來說,方法鏈是一種程式設計技巧,而非一項正式的設計模式。然而,它十分實用也很容易上手,因此趁這個機會分享給大家。

總結

  • 允許在單個語句中連續調用多個方法
  • 直接呼叫一連串的方法來取得最終結果,而無需將中間結果存為變數
  • 使程式碼變得更整潔,並提升可讀性與維護性

完整範例

https://github.com/chengen0612/design-patterns-typescript/blob/main/patterns/other/method-chaining.ts


上一篇
Day 26 - Memento 備忘錄
下一篇
Day 28 - Interpreter 解釋器
系列文
前端也想學設計模式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言