javascript设计模式 ? 装饰模式原理与应用实例分析

本文实例讲述了javascript设计模式 ? 装饰模式原理与应用。分享给大家供大家参考，具体如下：

介绍：装饰模式可以在不改变一个对象本身功能的基础上给对象增加额外的新行为。在现实生活中，这种情况也到处存在，例如一张照片，可以不改变照片本身，通过增加一个相框，使其具有防潮的功能。装饰模式是一种用于替代继承的技术，它使用对象之间的关联关系来取代继承关系。

定义：动态的给一个对象增加一些额外的职责，就增加对象功能来说，装饰模式比生成子类实现更为灵活。装饰模式是一种对象结构模型。

场景：我们现有一个Circle类用来画一个圆，新的需求要求画一个红色的圆，又一个新的需求要求我们画一个半径20的圆，又一个新的需求要求我们画一个红色的，半径20的圆。
如何设计才能让我们的代码来兼容这样的需求呢？我们首先给Circle类包装一个颜色的相框，这个相框用来改变圆的颜色。再给Circle类包装一个大小的相框，这个相框用来改变圆的大小。通过不同的相框组合来达到想要的效果。

示例：

var Circle = function(){
  this.draw = function(){
    console.log('画圆');
  };
}
 
var ColorDecorator = function(circle){
  this.circle = circle;
  this.draw = function(){
    this.circle.draw();
    setColor();
    return this.circle;
  }
  function setColor(){
    console.log('红色');
  }
}
 
var RadiusDecorator = function(circle){
  this.circle = circle;
  this.draw = function(){
    this.circle.draw();
    setRadius();
  }
  function setRadius(){
    console.log('半径：20px')
  }
}
 
var circle = new Circle();
 
var redCricle = new ColorDecorator(circle);
 
var radiusCricle = new RadiusDecorator(circle);
 
var radiusRedCircle = new RadiusDecorator(new ColorDecorator(circle));
 
//输出：
circle.draw();  //画圆
 
redCricle.draw(); //画圆 红色
 
radiusCricle.draw(); //画圆 半径：20px
 
radiusRedCircle.draw(); //画圆 红色 半径：20px

以上就是装饰模式的示例，比较好懂，在不改变Circle类基础上进行扩展，通过包装一层来实现新特性。降低了系统的耦合度。与继承结构相比，装饰模式大大减少了子类的个数，让系统扩展起来更加方便，而且更容易维护。RadiusDecorator，ColorDecorator称为装饰类，他们的引入将大大简化系统的设计，他也是装饰模式的核心。

装饰模式总结：

优点：
* 便于扩展一个对象的功能，装饰模式比继承更加具有灵活性，不会导致类的个数急剧增加。
* 可以通过一种动态的方式来扩展一个对象的功能。
* 可以对一个对象进行多次装饰，通过不同的装饰类组合，可以创造很多不同行为的组合，得到功能更强大的对象

缺点：
* 使用装饰模式过程中会产生很多小对象，一定程度影响程序性能。
* 装饰模式特别灵活，同时也意味着更加容易出错，排除复杂度也不低。

适用场景：
* 不影响对象的基础下进行扩展，添加职责

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。