JavaScript 设计模式----装饰器模式

1. 装饰器模式

1.1 装饰器模式介绍

• 为对象添加新功能
• 不改变其原有的结构和功能

1.2 装饰器模式类图

• 传统 UML 类图
  
• 简化后的 UML 类图
  

1.3 装饰器模式演示

class Circle{
    
    
	draw() {
    
    
		console.log('画一个圆形')
	}
}

class Decorator {
    
    
	constructor(circle) {
    
    
		this.circle = circle
	}
	draw() {
    
    
		this.circle.draw()
		this.setRedBorder(circle)
	}
	setRedBorder(circle) {
    
    
		console.log('设置红色边框')
	}
}

// 测试
let circle = new Circle()
circle.draw()

let dec = new Decorator(circle)
dec.draw()

1.4 装饰器模式场景

1.4.1 ES7 装饰器

• 配置环境，安装插件
  • npm install babel-plugin-transform-decorators-legacy --save-dev
• .babelrc 文件

{
    
    
	"presets": ["es2015", "latest"],
	"plugins": ["transform-decorators-legacy"]
}

• 验证环境

@testDec // 装饰器
class Demo {
    
    
	// ...
}

function testDec(target) {
    
     // target 其实就是 class Demo
	target.isDec = true
}
alert(Demo.isDec) // true

1.4.2 装饰类

• 装饰类

// 装饰器的原理
@decorator
class A {
    
    }

// 等同于
class A {
    
    }
A = decorator(A) || A;

// 可以加参数
function testDec(isDec) {
    
    
	return function(target) {
    
    
		target.isDec = isDec;
	}
}

@testDec(true)
class Demo {
    
    
	// ...
}
alert(Demo.isDec) // true

• 装饰类 - mixin 示例

function mixins(...list) {
    
    
	return function (target) {
    
    
		Object.assign(target.prototype, ...list)
	}
}

const Foo = {
    
    
	foo() {
    
    
		alert('foo')
	}
}

@mixins(Foo)
class MyClass {
    
    }

let obj = new MyClass();
obj.foo() // 'foo'

1.4.3 装饰方法

• 装饰方法 - 例1

class Person {
    
    
	constructor() {
    
    
		this.first = 'A'
		this.last = 'B'
	}

	// 装饰方法
	@readonly
	name() {
    
    
		return `${
      
      this.first} ${
      
      this.last}` 
	}
}

var p = new Persion()
console.log(p.name())
// p.name = function () {} // 这里会报错，因为 name 是只读属性

• readonly 如何实现的

function readonly(target, name, descriptor) {
    
    
	// descriptor 属性描述对象 (Object.defineProperty 中会用到), 原来的值如下
	// {
    
    
	//	value: specifiedFunction,
	//	enumerabel: false,
	//	configurable: true,
	//	writable: true,
	// };
	descriptor.writable = false; // 关闭可写
	return descriptor;
}

• 装饰方法 - 例2

class Math {
    
    
	// 装饰方法
	@log
	add(a, b) {
    
    
		return a + b;
	}
}

const math = new Math();
const result = math.add(2, 4); // 执行 add 时，会自动打印日志，因为有 @log 装饰器
console.log('result', result);

• log 如何实现的

function log(target, name, descriptor) {
    
    
	var oldValue = descriptor.value;

	descriptor.value = function() {
    
    
		console.log(`Calling ${
      
      name} with`, arguments);
		return oldValue.apply(this, arguments);
	};

	return descriptor;
}

1.4.4 core-decorators 插件

• 第三方开源 lib
• 提供常用的装饰器
• 查阅文档：https://github.com/jayphelps/core-decorators
• 示例

// 首先安装 npm install core-decorators --save

// 开始编码
import {
    
     readonly } from 'core-decorators'

class Person {
    
    
	@readonly
	name() {
    
    
		return 'zhang'
	}
}

let p = new Person()
alert(p.name())
p.name = function () {
    
     /*...*/ } // 此处会报错

import {
    
     deprecate } from 'core-decorators'

class Person {
    
    
	@deprecate
	facepalm() {
    
    }

	@deprecate('We stopped facepalming')
	facepalmHard() {
    
    }

	@deprecate('We stopped facepalming', {
    
     url: 'http://knowyourmeme.com/memes/facepalm' })
	facepalmHarder() {
    
    }
}

let person = new Person();

person.facepalm();
// DEPRECATION Person#facepalm: This function will be removed in future versions.

person.facepalmHard();
// DEPRECATION Person#facepalmHard: We stopped facepalming

person.facepalmHarder();
// DEPRECATION Person#facepalmHarder: We stopped facepalming

// See http://knowyourmeme.com/memes/facepalm for more details.

1.5 装饰器模式设计原则验证

• 将现有对象和装饰器进行分离，两者独立存在
• 符合开放封闭原则