装饰者模式——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();

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

装饰者模式——typescript实现

猜你喜欢