装饰者模式——typescript实现

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

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

请看结果输出:
在这里插入图片描述
那我现在想让它发射激光了,怎么办呢,请看:

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();
    }
}

请看输出结果:
在这里插入图片描述
把全部代码贴出来吧:

//抽象攻击类
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();

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页