第五章 设计模式 - 结构型 - 装饰器模式

装饰器模式的概念

1、讲装饰器模式之前，先聊聊高阶函数。高阶函数就是一个函数就可以接收另一个函数作为参数。
 
2、给对象动态地添加职责的方式称为装饰者模式。
 
3、传统的面向对象语言中给对象添加功能常常使用继承的方式，但是继承的方式不灵活，而与之相比，装饰者模式更加灵活，“即用即付”。

装饰器模式的实现

1、高阶函数就是一个函数就可以接收另一个函数作为参数
 
const add = (x, y, f) => {
	return f(x) + f(y);
}
const num = add(2, -2, Math.abs);
console.log(num); // 4
 
2、函数 add 就是一个简单的高阶函数，而 add 相对于 Math.abs 来说相当于一个装饰器，因此这个例子也可以理解为一个简单的装饰器模式。

在 react 中，高阶组件(HOC)也是装饰器模式的一种体现，通常用来不改变原来组件的情况下添加一些属性，达到组件复用的功能。
 
import React from 'react';
 
const BgHOC = WrappedComponent => class extends React.Component {
	render () {
  	return (
    	<div style={{ background: 'blue' }}>
      	<WrappedComponent />
      </div>
    );
  }
}

装饰器模式的总结其一

小结
 
  装饰器模式将现有 对象 和 装饰器 进行分离，两者独立存在，符合开放封闭原则和单一职责模式。
 
使用场景
 
  es7 装饰器、vue mixins、core-decorators 等。

装饰器模式的总结其二

场景例子
 
  1、比如现在有4 种型号的自行车，我们为每种自行车都定义了一个单独的类。现在要给每种自行车都装上前灯、尾灯和铃铛这 3 种配件。如果使用继承的方式来给每种自行车创建子类，则需要 4×3 = 12 个子类。但是如果把前灯、尾灯、铃铛这些对象动态组合到自行车上面，则只需要额外增加3 个类
 
  2、ES7 Decorator 阮一峰
 
  3、core-decorators 
 
优点
 
  1、装饰类 和 被装饰类 都只关心自身的核心业务，实现了解耦。
  
  2、方便动态的扩展功能，且提供了比 继承 更多的灵活性。
 
缺点
 
  1、多层装饰比较复杂。
  
  2、常常会引入许多小对象，看起来比较相似，实际功能大相径庭，从而使得我们的应用程序架构变得复杂起来