装饰器模式
- 为对象添加新功能
- 不改变其原有的结构和功能
示例
zs1.png
zsuml.png
class Circle {
draw() {
console.log("画一个圆形");
}
}
class Decorator {
constructor(circle) {
this.circle = circle;
}
draw() {
this.circle.draw();
this.setRedBorder(circle);
}
setRedBorder(circle) {
console.log("设置红色边框");
}
}
const circle = new Circle();
circle.draw();
const dec = new Decorator(circle);
dec.draw();
场景
ES7 装饰器
安装 babel 插件
npm i -D babel-plugin-transform-decorators-legacy
配置.babelrc
- 验证配置
@testDec
class Demo {}
function testDec(target) {
target.isDec = true;
}
console.log(Demo.isDec);
- mixin
function mixin(...list) {
return function(target) {
Object.assign(target.prototype, ...list);
};
}
const Foo = {
foo() {
console.log("foo");
}
};
@mixin(Foo)
class MyClass {}
const obj = new MyClass();
obj.foo();
- 装饰方法
function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
class Person {
constructor() {
this.first = "A";
this.last = "B";
}
@readonly
name() {
return `${this.first} ${this.last}`;
}
}
// 测试
const p = new Person();
console.log(p.name());
p.name = 1; // 报错, name是只读的
function log(target, name, descriptor) {
const oldValue = descriptor.value;
descriptor.value = function() {
console.log(`calling ${name} with`, arguments);
return oldValue.apply(this, arguments);
};
return descriptor;
}
class Math {
@log
add(a, b) {
return a + b;
}
}
// 测试
const math = new Math();
console.log(math.add(2, 4));
core-decorators
- 第三方开源 lib
- 提供常用的装饰器
- 查阅 GitHub文档
cd1.png
cd2.png
cd3.png
设计原则验证
- 将现有对象和装饰器进行分离, 两者独立存在
- 符合开放封闭原则
