TypescriptMixins(混合)

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

除了惯例的面对对象的思想，另一种较流行的通过可复用组件创建类的方法是将简单的类混合到一起。你可能对这种混合的方式比较熟悉或对Scala语言的特性有理解，这种模式在JavaScript社区也有一定的人气。

混合案例

在下面的代码中，我们展示了如何在TypeScript中混合模型，看完代码之后，再分析它的执行。

// 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();
    }
 
    // Disposable
    isDisposed: boolean = false;
    dispose: () => void;
    // Activatable
    isActive: 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];
        })
    }); 
}

理解案例

该代码例子刚开始的两个类是将被作为混合部分的类。你可以看到，每一类都有特定的功能。之后我们将这两个类混合成一个同时拥有这两个类的功能的新类。

// 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 {

你可能会注意到的第一件事是我们使用了"implements"，而不是"extends"。这样做是将类作为接口对待，只使用了"Disposable"和"Activatable"后面的类型，而不是实现这两个接口。这也意味着我们需要在类中实现这两个接口，但这恰恰是我们想通过混合来避免的问题。

为了满足这些需求，我们为这些将要混合进来的属性创建占位符和其类型。这样可以让编译器认识到这些成员在运行时是可用的。这么做能达到混合的利益，即使我们需要提前编写成员的占位符及其类型。

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

最后，我们将这两个类混合进新的类，创建所有的实现方式。

applyMixins(SmartObject, [Disposable, Activatable])

最后，我们创建一个帮助我们做混合的辅助函数。这个函数遍历每个混合类上的每个属性，并且将他们拷贝到混合后的类中，填充在之前所留的占位符并且将其实现。

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