最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • (设计模式)4.装饰器模式

    正文概述 掘金(国服前端)   2021-03-04   595

    说明:继续学习努力
    PS:学习自---掘金的JavaScript设计模式核心原理与应用小册

    一、介绍

    • 1.概念

    在不改变原对象的基础上,通过对其进行包装拓展,使原有对象可以满足用户的更复杂需求。

    • 2.举例

    在人工智能时代,我们公司制造了一个机器人,这个机器人呢,可以扫地可以巡逻。后来,因为某国发生了战争,需要定制我们的机器人,需要满足作战的需求0.0。这时候我们就进行修改机器人,改成了战争机器人。后来又来了一批订单要求我们可以送外卖,我们就又进行了开发。然后。。。无数个业务,我们公司应该发了吧。
    a few moments later 很多人都离职了,我也打算离职了,新来员工和我交接,然后里面东西人家也不是很懂,初始产品已经改了很多了,项目越来越难维护了。老板也不让我走,给我买了套上海的房子(醒醒小伙子)。

    二、代码分析

    • 1.初始化机器人

    创建机器人类,拥有打扫和巡逻功能

    class Robot {
        // 初始化能力
        initAbility() {
            this.clean();
            this.patrol();
        }
        // 打扫
        clean() {
            console.log('在打扫卫生,版本');
        }
        // 巡逻
        patrol() {
            console.log('进行巡逻')
        }
    }
    // 初识机器人调用
    const robot = new Robot();
    robot.initAbility()
    

    打印结果:
    (设计模式)4.装饰器模式

    • 2.创建打仗装饰器,可以进行打仗

    具有穿盔甲和发射武器的能力

    // 定义装饰器类
    class FightDecorator {
        constructor(obj) {
            this.obj = obj;
        }
        initAbility() {
            this.obj.initAbility();
            this.handleDeco();
        }
        // 装饰器内的方法
        handleDeco() {
            this.corselet()
            this.arms()
        }
        // 穿盔甲
        corselet() {
            console.log('我穿上了盔甲');
        }
        // 发射武器
        arms() {
            console.log('发射武器');
        }
    }
    // 使用装饰器进行装饰
    const robot2 = new Robot();
    const fightRobot = new FightDecorator(robot2);
    fightRobot.initAbility()
    

    打印结果:
    (设计模式)4.装饰器模式

    • 3.创建外卖机器人装饰器

    可以进行送外卖和对接美团系统

    class TakeAwayDecorator {
        constructor(obj) {
            this.obj = obj;
        }
        initAbility() {
            this.obj.initAbility();
            this.handleDeco()
        }
        handleDeco() {
            this.bike();
            this.system();
        }
        // 骑电瓶车
        bike() {
            console.log('我是骑车机器人');
        }
        // 对接系统
        system() {
            console.log('我能够对接美团系统');
        }
    }
    const robot3 = new Robot();
    const takeAwayDecorator = new TakeAwayDecorator(robot3);
    takeAwayDecorator.initAbility()
    

    打印结果:
    (设计模式)4.装饰器模式

    PS:ES7部分装饰器语法糖&react的HOC等我复习完webpack打包和react部分再介绍,这里先学这么多


    起源地下载网 » (设计模式)4.装饰器模式

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元