主页 > 装修管家 > 装潢者快3形式
  • 仅仅包装现有的模块,使之 “加倍华丽” ,并不会影响原有接口的坚守 —— 好比你给手机增添一个外壳而已,并不影响手机原有的通话、充电等坚守;

    运用 ES7 的 decorator

    ES7 中增添了一个 decorator 属性,它自创自 Python

    下面我们以 钢铁侠 为例讲解奈何运用 ES7 的 decorator。

    以钢铁侠为例,钢铁侠实质是一小我私家,只是“装潢”了很多武器方才变得那末 NB,不外再奈何装潢他照样一小我私家。

    我们的示例场景是如许的

    起首成立一个一般的Man类,它的抵挡值 2,进击力为 3,血量为 3;

    然后我们让其带上钢铁侠的盔甲,如许他的抵挡力增添 100,酿成 102;

    让其带上光束手套,进击力增添 50,酿成 53;

    末尾让他增添“飞舞翱翔”才气

    【Demo 1】对方式的装潢:设备盔甲

    成立 Man 类:

    class Man{ constructor(def = 2,atk = 3,hp = 3){ this.init(def,atk,hp); } init(def,atk,hp){ this.def = def; // 预防值 this.atk = atk; // 进击力 this.hp = hp; // 血量 } toString(){ return `预防力:${this.def},进击力:${this.atk},血量:${this.hp}`; } } var tony = new Man(); console.log(`当前状况 ===> ${tony}`); // 输出:当前状况 ===> 预防力:2,进击力:3,血量:3

    代码直接放在
    中运转查看结果,

    记得勾选
    Setting的
    Evaluate选项,和
    options的选项为
    legacy

    成立 decorateArmour 方式,为钢铁侠装配盔甲——注重 decorateArmour 是装潢在方式init上的。

    function decorateArmour(target, key, descriptor) { const method = descriptor.value; let moreDef = 100; let ret; descriptor.value = (...args)=>{ args[0] += moreDef; ret = method.apply(target, args); return ret; } return descriptor; } class Man{ constructor(def = 2,atk = 3,hp = 3){ this.init(def,atk,hp); } @decorateArmour init(def,atk,hp){ this.def = def; // 预防值 this.atk = atk; // 进击力 this.hp = hp; // 血量 } toString(){ return `预防力:${this.def},进击力:${this.atk},血量:${this.hp}`; } } var tony = new Man(); console.log(`当前状况 ===> ${tony}`); // 输出:当前状况 ===> 预防力:102,进击力:3,血量:3

    我们先看输出结果,预防力确实增添了 100,看来盔甲起浸染了。

    Decorators 的实质是操作了 ES5 的 Object.defineProperty 属性,这三个参数实际上是和 Object.defineProperty 参数一致的

    【Demo 2】装潢器叠加:增添光束手套

    在上面的示例中,我们胜利为 一般人 增添 “盔甲” 这个装潢;如今我想再给他增添 “光束手套”,愿望额外增添 50 点预防值。

    ... function decorateLight(target, key, descriptor) { const method = descriptor.value; let moreAtk = 50; let ret; descriptor.value = (...args)=>{ args[1] += moreAtk; ret = method.apply(target, args); return ret; } return descriptor; } class Man{ constructor(def = 2,atk = 3,hp = 3){ this.init(def,atk,hp); } @decorateArmour @decorateLight init(def,atk,hp){ this.def = def; // 预防值 this.atk = atk; // 进击力 this.hp = hp; // 血量 } ... } var tony = new Man(); console.log(`当前状况 ===> ${tony}`); //输出:当前状况 ===> 预防力:102,进击力:53,血量:3

    在这里你就可以或许看出装潢形式的上风了,它可以或许对某个方式进行叠加运用,对原类的侵入性很是小,只是增添一行@decorateLight而已,可以或许利便地增删;(同时还可以或许复用)

    【Demo 3】对类的装潢:增添飞舞翱翔才气

    装潢形式有两种:隧道的装潢形式 和 半透明的装潢形式。

    上述的两个 demo 中所运用的应该是 隧道的装潢形式,它并不增添对原有类的接口;下面要讲 demo 是给一般人增添“飞舞翱翔”才气,相当于给类新增一个方式,属于 半透明的装潢形式,有点儿像适配器形式的容貌。

    ... // 3 function addFly(canFly){ return function(target){ target.canFly = canFly; let extra = canFly ? '(妙技加成:飞舞翱翔才气)' : ''; let method = target.prototype.toString; target.prototype.toString = (...args)=>{ return method.apply(target.prototype,args) + extra; } return target; } } @addFly(true) class Man{ constructor(def = 2,atk = 3,hp = 3){ this.init(def,atk,hp); } @decorateArmour @decorateLight init(def,atk,hp){ this.def = def; // 预防值 this.atk = atk; // 进击力 this.hp = hp; // 血量 } ... } ... console.log(`当前状况 ===> ${tony}`); // 输出:当前状况 ===> 预防力:102,进击力:53,血量:3(妙技加成:飞舞翱翔才气)

    浸染在方式上的 decorator 接收的第一个参数(target )是类的 prototype;假如把一个 decorator 浸染到类上,则它的第一个参数 target 是 类自身。

    运用原生 JS 完成装潢器形式

    Man 是具体的类,Decorator 是针对 Man 的装潢器基类

    具体的装潢类 DecorateArmour 规范地运用 prototype 继承体式名堂 继承自 Decorator 基类;

版权声明:装潢者快3形式:http://www.deco51.com/zhuangxiuguanjia/400.html