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

介绍

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

演示

	class Circle {
		draw() {/* ... */}
	}
	class Decrator {
		constructor(circle) {
			this.circle = circle;
		}
		draw() {
			this.circle.draw();
		}
		setRedBorder() {
			console.log('setRedBorder');
		}
	}
	let circle = new Circle();
	let decCircle = new Decrator(circle);

应用场景

• ES7装饰器

	//装饰类
	@testDec
	class Demo {
		// ...
	}
	function testDec(target) {
		target.isDec = true;
	}
	console.log(Demo.isDec);
	//装饰类可以加参数
	@testDec(val)
	class Demo {
		// ...
	}
	function testDec(val) {
		return function(target) {
			target.isDec = val;
		}
	}
	console.log(Demo.isDec);
	// 装饰类的原理
	@decorator
	class A {}
	// 等同于
	class A {}
	A = decorator(A) || A;
	----------------------------------
	//装饰方法
	class Person {
		@readonly
		demo() {console.log('ok')}
	}
	function readonly(target, name, descriptor) {
		descriptor.writable = false;
		return descriptor;
	}
	var p = new Person();
	p.demo();
	p.demo = function () {} // 这里会报错，因为经过装饰，name变为了只读的

• core-decorators库封装有一些常用装饰器
  • https://github.com/jayphelps/core-decoracors