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 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...
随机推荐
- 基于redis分布式缓存实现(新浪微博案例)
第一:Redis 是什么? Redis是基于内存.可持久化的日志型.Key-Value数据库 高性能存储系统,并提供多种语言的API. 第二:出现背景 数据结构(Data Structure)需求越来 ...
- 优化mysql服务器
一.使用show variables 和show status 命令查看MySQL的服务器静态参数值和动态运行状态信息. 二.可以使用 mysqld --verbose --help|more 查看某 ...
- URL无法显示某些特殊符号
URL无法显示某些特殊符号,这个时候就要使用编码了.编码的格式为:一个百分号,后面跟对应字符的ASCII(16进制)码值.例如 空格的编码值是"%20".(ASCII参考)URL中 ...
- 【转】Hive 基础之:分区、桶、Sort Merge Bucket Join
Hive 已是目前业界最为通用.廉价的构建大数据时代数据仓库的解决方案了,虽然也有 Impala 等后起之秀,但目前从功能.稳定性等方面来说,Hive 的地位尚不可撼动. 其实这篇博文主要是想聊聊 S ...
- 利用 spring bean 的属性 init-method 解决因为数据库连接没有初始化而导致首次点击页面超慢的问题
问题的描述: 一个项目,涉及到了 两个数据源,分别使用的是 两个不同的 数据库连接池,其中一个是 poxool 连接池,问题在于,spring在启动时,只初始化其中的一个 数据库连接池中的数据库连接, ...
- HTML入门篇
HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏 ...
- java常用的文件读写操作
现在算算已经做java开发两年了,回过头想想还真是挺不容易的,java的东西是比较复杂但是如果基础功扎实的话能力的提升就很快,这次特别整理了点有关文件操作的常用代码和大家分享 1.文件的读取(普通方式 ...
- jackson annotations注解详解
jackson中常用到的注解 猛击下面的连接地址 http://blog.csdn.net/sdyy321/article/details/40298081
- stm32 u8 u16 u32
u8 是 unsigned char u16 是 unsigned short u32 是 unsigned int
- iptables详解
Netfilter包含有三种表,三种表下共包含有五种链,链下面包含各种规则.即表包含若干链,链包含若干规则. (一)三种表为:filter nat mangle 1.filter:处理与本机有 ...