可組合的類定義
- 2021 年 10 月 12 日
- 筆記
- javascript
我們定義類時,爐牆程式碼,和業務程式碼常常耦合在一起,本文是將業務程式碼和爐牆程式碼解耦。利用類繼承的特性。
一個常用的構造類的模式是流利模式,或者方法鏈,耦合的程式碼如下:
class Cake {
setFlavour(flavour) {
this.flavour = flavour;
return this
}
setLayers(layers) {
this.layers = layers;
return this
}
bake() {
// do some baking
return this
}
}
const cake = new Cake()
cake.
setFlavour('chocolate').
setLayers(3).
bake();
expect(cake).toEqual({ flavour: "chocolate", layers: 3, })
這裡,每個方法的賦值程式碼是業務程式碼,最後返回本實例是框架程式碼,混合在一起的程式碼閱讀難度增加很多。我們將其分離,首先,基類只寫業務程式碼:
class Cake {
setFlavour(flavour) {
this.flavour = flavour;
}
setLayers(layers) {
this.layers = layers;
}
bake() {
// do some baking
}
}
然後,我們寫流利模式程式碼:
class FluentCake extends Cake {
setFlavour(flavour) {
super.setFlavour(flavour)
return this
}
setLayers(layers) {
super.setLayers(layers)
return this
}
bake() {
// do some baking
super.bake()
return this
}
}
分離後的程式碼,更加清晰可讀。
用法是一樣的:
const cake = new FluentCake()
cake.
setFlavour('chocolate').
setLayers(3).
bake();
expect(cake).toEqual({ flavour: "chocolate", layers: 3, })
javascript中,超類和子類也可以解耦:
const Fluent = (superclass) => class Fluent extends superclass {
setFlavour(flavour) {
super.setFlavour(flavour)
return this
}
setLayers(layers) {
super.setLayers(layers)
return this
}
bake() {
// do some baking
super.bake()
return this
}
}
使用方法如下:
const FluentCake = Fluent(Cake)
const cake = new FluentCake()
cake.
setFlavour('chocolate').
setLayers(3).
bake();
expect(cake).toEqual({ flavour: "chocolate", layers: 3, })