如何封裝一個可被鏈式調用的函式庫?

「鏈式調用」是一種函式庫封裝的設計模式,而對於前端的 JS 使用者們來說,鏈式調用並不陌生,有名的 DOM 操作庫「jQuery」就是這樣使用的,讓我們來試著封裝一個可被鏈式調用的函式庫吧!

本篇短文用一個最簡單的題目來實作可被鏈式調用 — 「加減乘除」函式庫。

先定義清楚我們要的函式庫功能:

  1. 可被接受一數字參數的接口
  2. 具有 4 個方法,分別為加(add)減(sub)乘(mul)除(divide)
  3. 最後可以取得鏈式調用的結果

一個重要的心法 — 每次回傳類是「實體」(或者說實例),讓你可以不斷使用實例上的方法。

來聊聊建構式,接受一數字參數。

class ASMD{
constructor(num){
this.num = num
}
}

定義其中一個方法並且返回實例

class ASMD{
constructor(num){
this.num = num;
}
add(param){
this.num += param
return this; // <-- 記得我們一定要回傳實例
}
}

class 中透過 this 操作實例,並且將其回傳。

完成剩餘的程式碼

const asmd10 = new ASMD(10);
let result = asmd10.add(1).sub(2).mul(4).div(2).num;
console.log(result);
// 18

((10+1–2)*4)/2 = 18

小學數學,Great!

一個程式封裝的技巧,尤其在暴露多個類似的方法時,會讓使用者變得相當易用,比起重複操作還要易用。

const instance = new Something(10)
instance.add(1);
instance.sub(2);
instance.mul(4);
instance.div(2);
console.log(instance.num)

If any interest, 👉 https://realdennis.me.

If any interest, 👉 https://realdennis.me.