Typescript Mixins(混合)
2024-09-27 23:27:38
除了惯例的面对对象的思想,另一种较流行的通过可复用组件创建类的方法是将简单的类混合到一起。你可能对这种混合的方式比较熟悉或对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];
})
});
}
最新文章
- 以前用SQL实现的机构职能树,再看看
- go环境import cycle not allowed问题处理
- dynamic获取类型可变的json对象
- 【Tree 3】树形结构数据加载的思考
- CentOS 6.3 安装 phpmyadmin
- 读取Jar包中的资源问题探究
- QQ上传大文件为什么这么快
- 酷摄影:关于梦 - Miki takahashi
- MVC引用CSS文件の正确姿势
- java中gson的简单使用
- VC++学习之网络编程中的套接字
- spring cloud微服务搭建第一天
- 开涛spring3(5.3) - Spring表达式语言 之 5.3 SpEL语法
- linux学习(二)linux配置网卡以及常见网络问题排查
- Fineui js getText
- saiku查询出错如何debug(saiku查询过程的本质),以及相关workbench的schema设置
- [经验交流] 试用基于 influxdb+kapacitor 的监控系统
- Why choose Nexiq USB-link 125032 Diesel Truck Diagnose
- Linux:CentOS 7系统的安装
- MongoDB的安装及安装为windows服务