10 装饰器模式 – 前端设计模式系列教程

介绍
  • 为对象添加新功能
  • 不改变原有的结构和功能
区别于适配器模式,是老接口不能用了需要改造才能使用,装饰器是保留原来的能力,进行扩展
比如手机壳给手机添加了保护功能,但是不影响原有的打电话发微信等功能。
代码:
class Circle{
    constructor(){
        this.name = 'c'
    }
    draw(){
        console.log('画圆')
    }
}

class Decorate{
    constructor(circle){
        this.circle = circle
    }
    setRedBorder(){
        console.log('红边框')
    }
    draw(){
        this.circle.draw()
        this.setRedBorder()
    }
}

let c = new Circle()
let d = new Decorate(c)
c.draw() // 画圆
d.draw() // 画圆 红边框

 

场景
ES7 装饰器
es7运行环境安装
1. 安装babel插件
npm i babel-plugin-transform-decorators-legacy -D

 

2. 配置.babelrc文件
{
    "presets":["es2015","latest"],
    "plugins":[
        "transform-decorators-legacy"
    ]
}

 

3. 验证代码是否支持
@testDec
class Demo {}
function testDec(target){
    target.isDec = true
}
alert(Demo.isDec) // true

 

代码解释
@testDec(false) //为Demo类添加一个testDec的装饰器
class Demo {} //Demo类原来是没有isDec这个属性的,通过装饰器为它添加

// 定义装饰器函数,返回的是一个方法
function testDec(isDec){
    return function(target){
        target.isDec = isDec
    }
}

alert(Demo.isDec) // false

 

core-decorators
看文档吧,这个库封装好了readonly装饰方法和deprecate 废弃方法等函数。
设计原则验证
  • 将现有的对象和装饰器分离,两者独立存在
  • 符合开放封闭原则

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:13 次浏览