JavaScript 23 种设计模式之 9 装饰模式

最新推荐文章于 2022-10-15 21:25:50 发布

杏子姐_1024

最新推荐文章于 2022-10-15 21:25:50 发布

阅读量168

点赞数

分类专栏：设计模式

本文链接：https://blog.csdn.net/weixin_44135121/article/details/106017379

版权

设计模式专栏收录该内容

30 篇文章 2 订阅

订阅专栏

JavaScript 23 种设计模式之 9 装饰模式

概念与特点
结构与实现
应用场景
应用实例
总结

概念与特点

概念：
在不改变对象结构的情况下，给对象增加一些额外的功能。

特点：

装饰模式拓展对象比继承方式更加灵活。
可以设计出不同的具体装饰类，创造出不同行为的组合。

结构与实现

装饰模式包含抽象构件类，具体构件类，抽象装饰类，具体装饰类。
抽象构件类：定义一个抽象类和抽象方法。
具体构件类：实现抽象方法。
抽象装饰类：拿到具体构件类的实例对象并调用其方法。作为函数供具体装饰类调用。
具体装饰类：实现抽象装饰类的方法，添加附加职责。

小剧场：
小王的女盆友小花要过生日了。小王做了一个芝士蛋糕，为了给小花一个惊喜，小王想在蛋糕上附带一张爱心卡片。小王要做以下几件事情。

做一个蛋糕模型（只有奶油的蛋糕）。
在蛋糕模型上涂上芝士，做一个芝士蛋糕。
先定位找到蛋糕装饰店。
准备给女盆友加一个爱心卡片，所以找一家能够做爱心卡片的蛋糕装饰店。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React App</title>
</head>
<body>
<script>
    //抽象构件类-蛋糕
    class Cake{
        //拿到蛋糕
        getCake(){

        }
    }
    //具体构件类-芝士蛋糕
    class CheeseCake extends Cake{
        constructor(){
            super();
        }
        getCake(){
            console.log("取到芝士蛋糕")
        }
    }
    //抽象装饰类-蛋糕装饰店
    class Decorator extends Cake{
        constructor(cake,type){
            super();
            console.log("这里是蛋糕装饰店，准备装饰【"+type+"】蛋糕");
            this.cake= cake;
        }
        //装饰蛋糕
        decorate(){

        }
    }
    //具体装饰类-给蛋糕加个爱心卡片
    class LoveDecorator extends Decorator{
        constructor(cheeseCake,type){
            super(cheeseCake,type);
        }
        decorate(name){
            //首先要把蛋糕拿过来
            this.cake.getCake();
            //然后给蛋糕加爱心卡片
            this.loveCard(name);
        }
        loveCard(name){
            console.log("卡片信息是...【"+name+",happy birthday. i love you。】")
        }
    }

    class PrepareCake{
       static main(){
            //拿一个芝士蛋糕
            let cheeseCake = new CheeseCake();
            //芝士蛋糕放到卡片装饰店进行卡片装饰
            let decorator = new LoveDecorator(cheeseCake,'芝士');
            decorator.decorate('小花');
        }
    }
    PrepareCake.main();
</script>
</body>
</html>