装饰者模式——typescript实现

cocoscreator转laya3d了,语言也从js换成了ts,强类型语言写着就是爽o( ̄︶ ̄)o
再加上ts完美支持js,妈妈再也不用担心我的语法问题啦~

进入公司的第一件事就是代码优化,我负责的项目是类似于弓箭传说类型的游戏,有好多怪物脚本,原本都是一个怪物一个脚本,但是这样维护起来太麻烦了,然后leader问我说,你知道装饰者模式么,用这个设计模式把怪物类的代码重构一下怎么样,因为以前的项目用的是观察者模式,没用到过这种设计模式,于是我这个菜鸟便上菜鸟教程查了一下。
了解了这种设计模式之后,让我想起了有的人写的一首诗:你站在桥上看风景,看风景人在楼上看你。明月装饰了你的窗子,你装饰了别人的梦。这都是什么呀,怎么装饰过来装饰过去的,好乱啊(可以想象一下风吹乱了我所剩无几的头发,我无助的坐在地上双眼无神的场景)哈哈哈哈嗝哈哈嘿嘿嘿
其实这个装饰者模式挺简单的,也很有意思,你可以把自己想想成一位上帝,上帝是啥,是赋予,是创造。比如:但是上帝心情好,想多给你添加一个会飞的能力,ok,经我大手一挥,你会神奇的发现,你还是你,但是,你竟然会飞了,但是有一天上帝不高兴了,想摘你两颗肾,哦不,两条腿,好了,你只能一直飞了,你不能走了。
这是我理解的装饰者模式,好了,废话说了一大堆,接下来正式看一下我们到底要怎么做这个上帝,首先要设计东西,肯定要先画图,对着图来,事半功倍 ,就拿攻击装饰来举例说吧,请看设计图
装饰者模式——typescript实现
首先有一个抽象的攻击部件,类里面肯定要有攻击方法啊,ok,代码出来了:

//抽象攻击部件
export abstract class AttackComponent{
abstract attack():void;
}

抽象的有了,那接下来肯定要用具体的攻击部件来实现它啊:

//具体攻击部件
export class ConcreteAttackComponent extends AttackComponent{
public attack():void {
console.log("default attack");
}
}

攻击的有了,那接下来轮到装饰了:

//攻击装饰抽象类
export abstract class AttackDecorator extends AttackComponent{
private component:AttackComponent;

constructor(component:AttackComponent){
super();
this.component = component;
}

public attack():void{
this.component.attack();
}
}

ok,到这一步,前面的工作算是完了,接下来该赋予其具体的职能了,比如:我要它会发射子弹,那么:

//子弹攻击装饰
export class BulltsAttack extends AttackDecorator{
constructor(component:AttackDecorator){
super(component);
}
bulltsDecorator():void{
console.log("子弹攻击");
}
public attack(){
this.bulltsDecorator();
super.attack();
}
}

我想让他发射激光,那么:

//激光攻击装饰
export class LaserAttack extends AttackDecorator{
constructor(component:AttackDecorator){
super(component);
}
laserDecorator():void{
console.log("激光攻击");
}
public attack(){
this.laserDecorator();
super.attack();
}

}

能力创造完了,接下来你想让谁有这些能力,谁就有这些能力,请看:

export class Monster1{
public attackComponent:any = AttackComponent;
public attackDecorator:any = AttackDecorator;
constructor(){
this.attackComponent = new ConcreteAttackComponent();
}
attackBullts(){
this.attackDecorator = new BulltsAttack(this.attackComponent);
this.attackDecorator.attack();
}
}

我们来运行起来看看效果怎么样,我想让monster1这个怪能发射子弹,那么:

new Monster1().attackBullts();

请看结果输出:
装饰者模式——typescript实现
那我现在想让它发射激光了,怎么办呢,请看:

export class Monster1{
public attackComponent:any = AttackComponent;
public attackDecorator:any = AttackDecorator;
constructor(){
this.attackComponent = new ConcreteAttackComponent();
}
attackBullts(){
this.attackDecorator = new LaserAttack(this.attackComponent);
this.attackDecorator.attack();
}
}

请看输出结果:
装饰者模式——typescript实现
把全部代码贴出来吧:

//抽象攻击类
export abstract class AttackComponent{
abstract attack():void;
}

//具体攻击部件
export class ConcreteAttackComponent extends AttackComponent{
public attack():void {
console.log("default attack");
}
}

//攻击装饰抽象类
export abstract class AttackDecorator extends AttackComponent{
private component:AttackComponent;

constructor(component:AttackComponent){
super();
this.component = component;
}

public attack():void{
this.component.attack();
}
}

//子弹攻击类
export class BulltsAttack extends AttackDecorator{
constructor(component:AttackDecorator){
super(component);
}
bulltsDecorator():void{
console.log("子弹攻击");
}
public attack(){
this.bulltsDecorator();
super.attack();
}
}

//激光攻击类
export class LaserAttack extends AttackDecorator{
constructor(component:AttackDecorator){
super(component);
}
laserDecorator():void{
console.log("激光攻击");
}
public attack(){
this.laserDecorator();
super.attack();
}

}

export class Monster1{
public attackComponent:any = AttackComponent;
public attackDecorator:any = AttackDecorator;
constructor(){
this.attackComponent = new ConcreteAttackComponent();
}
attackBullts(){
this.attackDecorator = new LaserAttack(this.attackComponent);
this.attackDecorator.attack();
}
}

new Monster1().attackBullts();

请用你的上帝之手去尽可能创造更多的可能吧~

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

装饰者模式——typescript实现

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 装饰者模式——typescript实现
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏