除了慣例的面對對象的思想，另一種較流行的通過可復(fù)用組件創(chuàng)建類的方法是將簡單的類混合到一起。你可能對這種混合的方式比較熟悉或?qū)cala語言的特性有理解，這種模式在JavaScript社區(qū)也有一定的人氣。

混合案例

在下面的代碼中，我們展示了如何在TypeScript中混合模型，看完代碼之后，再分析它的執(zhí)行。

// Disposable Mixin class Disposable {isDisposed: boolean;dispose() {this.isDisposed = true;}}// Activatable Mixin class Activatable {isActive: boolean;activate() {this.isActive = true;}deactivate() {this.isActive = false;} }class SmartObject implements Disposable, Activatable {constructor() {setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);}interact() {this.activate();}// DisposableisDisposed: boolean = false;dispose: () => void;// ActivatableisActive: boolean = false;activate: () => void;deactivate: () => void; } applyMixins(SmartObject, [Disposable, Activatable])var smartObj = new SmartObject(); setTimeout(() => smartObj.interact(), 1000);//// // 在你代碼的某處 ////function applyMixins(derivedCtor: any, baseCtors: any[]) {baseCtors.forEach(baseCtor => {Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {derivedCtor.prototype[name] = baseCtor.prototype[name];})}); }

理解案例

該代碼例子剛開始的兩個(gè)類是將被作為混合部分的類。你可以看到，每一類都有特定的功能。之后我們將這兩個(gè)類混合成一個(gè)同時(shí)擁有這兩個(gè)類的功能的新類。

// Disposable Mixin class Disposable {isDisposed: boolean;dispose() {this.isDisposed = true;}}// Activatable Mixin class Activatable {isActive: boolean;activate() {this.isActive = true;}deactivate() {this.isActive = false;} }

接下來，我們創(chuàng)建一個(gè)新的類，并將這兩個(gè)類混合到這個(gè)新的類中。詳細(xì)的看看它是如何做的：

class SmartObject implements Disposable, Activatable {

你可能會(huì)注意到的第一件事是我們使用了"implements"，而不是"extends"。這樣做是將類作為接口對待，只使用了"Disposable"和"Activatable"后面的類型，而不是實(shí)現(xiàn)這兩個(gè)接口。這也意味著我們需要在類中實(shí)現(xiàn)這兩個(gè)接口，但這恰恰是我們想通過混合來避免的問題。

為了滿足這些需求，我們?yōu)檫@些將要混合進(jìn)來的屬性創(chuàng)建占位符和其類型。這樣可以讓編譯器認(rèn)識(shí)到這些成員在運(yùn)行時(shí)是可用的。這么做能達(dá)到混合的利益，即使我們需要提前編寫成員的占位符及其類型。

// Disposable isDisposed: boolean = false; dispose: () => void; // Activatable isActive: boolean = false; activate: () => void; deactivate: () => void;

最后，我們將這兩個(gè)類混合進(jìn)新的類，創(chuàng)建所有的實(shí)現(xiàn)方式。

applyMixins(SmartObject, [Disposable, Activatable])

最后，我們創(chuàng)建一個(gè)幫助我們做混合的輔助函數(shù)。這個(gè)函數(shù)遍歷每個(gè)混合類上的每個(gè)屬性，并且將他們拷貝到混合后的類中，填充在之前所留的占位符并且將其實(shí)現(xiàn)。

function applyMixins(derivedCtor: any, baseCtors: any[]) {baseCtors.forEach(baseCtor => {Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {derivedCtor.prototype[name] = baseCtor.prototype[name];})}); }

轉(zhuǎn)載于:https://www.cnblogs.com/ys-ys/p/5250594.html

總結(jié)

以上是生活随笔為你收集整理的Typescript Mixins(混合)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。