首页手记装饰者模式 &&...

装饰者模式 && ES7 decorator装饰器

标签：

CSS3

装饰者模式

在提及这个新特性前我们先了解一下设计模式中的装饰者模式。

定义

装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。

装饰者模式 v.s. 适配器模式

装饰者模式和适配器模式都是包装模式 (Wrapper Pattern)，它们都是通过封装其他对象达到设计的目的的，但是它们的形态有很大区别。

适配器模式我们使用的场景比较多，比如连接不同数据库的情况，你需要包装现有的模块接口，从而使之适配数据库 —— 好比你手机使用转接口来适配插座那样；

装饰者模式不一样，仅仅包装现有的模块，使之 “更加华丽” ，并不会影响原有接口的功能 —— 好比你给手机添加一个外壳罢了，并不影响手机原有的通话、充电等功能；

装饰者模式使用场景

AOP（面向切面编程）
- 使用场景：安全检查、缓存、调试、持久化
封装before/after函数
封装axios添加参数，鉴权，错误监听等功能
为表单提交添加验证函数

装饰器decorator

装饰器可以改变类的行为，也可以改变方法的行为。
装饰器不能用于函数，因为存在函数提升问题。
装饰器接受三个参数，因为它本质上是利用了 ES5 的 Object.defineProperty 属性，这三个参数其实是和 Object.defineProperty 参数一致的，因此不能更改。
- 第一个参数是要装饰的对象target
- 第二个参数是对象的属性名key
- 第三个参数是该属性的描述对象descriptor

// descriptor对象{
    value: specifiedFunction,
    enumerable: false,
    configurable: true,
    writable: true};

如果同一个方法有多个修饰器，会像剥洋葱一样，先从外到内进入，然后由内向外执行。

立即开始

由于decorator是es7提供的方法，在浏览器中是无法直接运行的，所以我们需要提前作准备，对它进行编译。

安装基础插件

npm i babel-plugin-transform-decorators-legacy babel-register --save-dev

安装：
babel-plugin-transform-decorators-legacy 
babel-registertransform-decorators-legacy：
是第三方插件，用于支持decorators

babel-register：
用于接入node api

编写你的装饰器栗子decorator.js
创建compile.js

require('babel-register')({    plugins: ['transform-decorators-legacy']
});require("./decorator.js")

运行compile.js

node compile

一个decorator栗子

// 主食加餐-方法装饰器function addMeat(target, key, descriptor) {    const method = descriptor.value;    let ret;
    descriptor.value = (...args) => {
        args[0] = '鳗鱼炒饭';
        ret = method.apply(target, args);        return ret;
    }    return descriptor
}// 饮料加餐-方法装饰器function addDrink(target, key, descriptor) {    const method = descriptor.value;    let ret;
    descriptor.value = (...args) => {
        args[1] = '莫吉托';
        ret = method.apply(target, args);        return ret;
    }    return descriptor
}// 新增甜品-类装饰器function addDimSum(isAdd) {    return function(target) {
        target.isAdd = isAdd;        let extra = isAdd ? '  (加餐加餐！另送一份拿破仑蛋糕' : '';        let method = target.prototype.toString;
        target.prototype.toString = (...args) => {            return method.apply(target.prototype, args) + extra
        }        return target
    }
}

@addDimSum(true)class Dinner {    constructor(meat, drink) {        this.init(meat, drink);
    }

    @addMeat
    @addDrink
    init (meat, drink) {        this.meat = meat;        this.drink = drink
    }

    toString () {        return `今日特价晚餐：${this.meat} 配 ${this.drink}`;
    }
}let todayDinner = new Dinner('白饭', '白开水');console.log(`${todayDinner}`);

自己实现一个decorator

// 创建一个基类function Dinner () {    this.meat = '白饭';    this.drink = '白开水';
}

Dinner.prototype.toString = function () {    return `今日特价晚餐：${this.meat} 配 ${this.drink}`;
}// 创建一个装饰器var Decorator = function (dinner) {    this.dinner = dinner;
}

Decorator.prototype.toString = function () {    return this.dinner.toString();
}// 继承装饰器var AddMeat = function (dinner) {
    dinner.meat = '鳗鱼草饭';
    Decorator.call(this, dinner);
}

AddMeat.prototype = new Decorator();

AddMeat.prototype.toString = function () {    return this.dinner.toString();
}// 实例var todayDinner = new Dinner('白饭');
todayDinner = new AddMeat(todayDinner);console.log(`${todayDinner}`);

作者：Eason_Wong
链接：https://www.jianshu.com/p/605d822a95db

点击查看更多内容