Typescript Mixins(混合)
除了惯例的面对对象的思想,另一种较流行的通过可复用组件创建类的方法是将简单的类混合到一起。你可能对这种混合的方式比较熟悉或对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];
})
});
}
Typescript Mixins(混合)的更多相关文章
- 11.mixins混合类
一.混合类(mixins) 使用基于类的视图,最大的优势之一就创建可复用的代码 我们编写的非常类似的代码,可以抽象出来,将这部分代码放到mixin类系列中,然后作为父类提供子类继承使用 from ...
- TypeScript Declaration Merging(声明合并)
TypeScript中有一些独特的概念,来自需要描述JavaScript对象类型发生了哪些变化.举个例子,最为独特的概念就是"声明合并".理解了这个概念将会对你在当前JavaScr ...
- vue的混合mixins学习
mixins 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式. 混合对象可以包含任意组件选项. 当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选 ...
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- vue中mixins的理解及应用
vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
- 装饰器vue-property-decorator
接触到了新的vue项目,使用vue+ts+vue-property-decotator来进行项目的简化,一时间语法没有看懂,所以花时间学习这个装饰器的包. 1.装饰器 @Component(optio ...
- React生命周期
在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...
- vue的选项
这篇是我自己看着方便整理的,请直接看官方api:http://cn.vuejs.org/v2/api/ 数据 data,props,computed 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...
随机推荐
- sql tuning advisor使用
DB tuning advisor是创建优化任务,对某些sql数据库进行分析,并尽量给出优化建议的一个强大的数据库工具. 自己平时几乎没用过这玩意,所以来测一测用法,其实对于一些sql一筹莫展的时候跑 ...
- 《java JDK7 学习笔记》之接口与多态
1.对于"定义行为"也就是接口,可以使用interface关键字定义,接口中的方法不能操作,直接标示为abstract,而且一定是public修饰的. 类要操作接口,必须使用imp ...
- C/C++浮点数在内存中的存储方式
一.内存表示 任何数据在内存中都是以二进制的形式存储的,浮点数的表示是把一个数的有效数字和数的范围在计算机的一个存储单元中分别予以表示,数的小数点位置随比例因子的不同而在一定范围内自由浮动.如下图是3 ...
- Android 通过Uri获取Bitmap对象
(转自:http://blog.sina.com.cn/s/blog_5de73d0b0100zfm8.html) private Bitmap getBitmapFromUri(Uri uri) { ...
- WIN32下使用DirectSound接口的简单音频播放器(支持wav和mp3)
刚好最近接触了一些DirectSound,就写了一个小程序练练手,可以用来添加播放基本的wav和mp3音频文件的播放器.界面只是简单的GDI,dxsdk只使用了DirectSound8相关的接口. D ...
- spark standalone ha spark submit
when you build a spark standalone ha cluster, when you submit your app, you should send it to the l ...
- EF级联删除
引言 在主表中指定Key,子表中指定Required后,并不会在数据库中生成级联删除的外键.那怎么才能使EF在数据中生成级联删除的外键? SQLServer数据库中级联删除功能配置界面: 上图 ...
- [转]ArcIMS 中地图坐标参考设置(ArcGIS Unknown Spatial Reference)
"ArcGIS Unknown Spatial Reference"问题: shp文件在Arcgis打开后经常因为原有坐标系无法识别而丢失信息,出现以下提示信息: "Un ...
- c++中this指针的用法
1. this指针的用处: 一个对象的this指针并不是对象本身的一部分,不会影响sizeof(对象)的结果.this作用域是在类内部,当在类的非静态成员函数中访问类的非静态成员的时候,编译器会自动将 ...
- 洛谷P1119 灾后重建[Floyd]
题目背景 B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两个重建完成的村庄的公路才能 ...