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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • 利用策略模式与装饰模式扩展JavaScript表单验证功能

    利用策略模式与装饰模式扩展JavaScript表单验证功能

    简单的表单验证 html结构 <!-- validata.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validata</title> </head> <body> <form id="form"> <labe

  • Javascript设计模式之装饰者模式详解篇

    一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改变原对象的原本结构的情况下进行功能添加. 2. 装饰对象和原对象具有相同的接口,可以使客户以与原对象相同的方式使用装饰对象. 3. 装饰对象中包含原对象的引用,即装饰对象是真正的原对象经过包装后的对象. 二.Javascript装饰者模式详解: 描述: 装饰者模式中,可以在运行时动态添加附加功能到对

  • JavaScript设计模式之装饰者模式定义与应用示例

    本文实例讲述了JavaScript设计模式之装饰者模式定义与应用.分享给大家供大家参考,具体如下: 在不改变原对象的基础上,通过对其进行包装扩展(添加属性或方法),使原有对象可以满足用户的更复杂需求,满足开闭原则,也不会破坏现有的操作. 适用场景:当遇到新的功能或需求需要对原来的操作做出更改时,若原来的操作比较复杂,可以把原来的操作原封不动地放在装饰者中,然后再添加新功能. eg1: function Person() { } Person.prototype.sayHello = functi

  • javascript设计模式 – 组合模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 组合模式原理与应用.分享给大家供大家参考,具体如下: 介绍:组合模式又叫部分整体模式,用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 定义:组合多个对象形成树形结构以表示具有整体一部分关系的层次机构.组合模式对单个对象(即叶子对象)和组合对象(即容器对象)的使用具有一致性,组合模式又可以成为整体一部分模式. 它是一种对象结构型模式. 场景:我们对公司的人员架构进行一下打印,假设所有管理岗和开发岗的区

  • JavaScript装饰者模式原理与用法实例详解

    本文实例讲述了JavaScript装饰者模式原理与用法.分享给大家供大家参考,具体如下: 这里我们通过需求逐渐引出装饰者模式. 下面是一个关于几代汽车的不同逐渐体现装饰者模式的. 首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下, //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //定义一个接口类 var Interface=

  • javascript设计模式之装饰者模式

    在js函数开发中,想要为现有函数添加与现有功能无关的新功能时,按普通思路肯定是在现有函数中添加新功能的代码.这并不能说错,但因为函数中的这两块代码其实并无关联,后期维护成本会明显增大,也会造成函数臃肿. 比较好的办法就是采用装饰器模式.在保持现有函数及其内部代码实现不变的前提下,将新功能函数分离开来,然后将其通过与现有函数包装起来一起执行. 先来看个比较原始的js版装饰器模式实现: var Plane = function(){} Plane.prototype.fire = function(

  • JavaScript设计模式之装饰者模式介绍

    装饰者模式说明 说明:通一个类来动态的对另一个类的功能对象进行前或后的修饰,给它辅加一些额外的功能; 这是对一个类对象功能的装饰,装饰的类跟被装饰的类,要求拥有相同的访问接口方法(功能),这在动态面向对象类里,一般以实现同一个接口(interface)来约束实现:装饰类的要有对被装饰类的引用,用于在装饰类的相应方法,调用相应被装饰类的方法,然后对其进行修饰: 场景举例: 1>. 比如我们生活中的穿衣服, 一件衬衣,一件西装外套,一条裤子,一条领带,一双漂亮的皮鞋; 每多穿一件,都是对前面一件或全

  • JS中间件设计模式的深入探讨与实例分析

    本文实例讲述了JS中间件设计模式.分享给大家供大家参考,具体如下: 中间件作为一些辅助处理功能,应用非常广泛,例如express中间件,redux中间件,koa中间件,那么中间件的设计模式到底是怎样的呢.结合中间件的使用实例探讨和总结一下中间件的设计思想和一般实现模式. 仿照redux中间件实现模式,看如下一个例子: function fn2(next){ console.log('执行2,返回改造的next之前') return action => { console.log('执行2') n

  • javascript设计模式 – 适配器模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 适配器模式原理与应用.分享给大家供大家参考,具体如下: 介绍:适配器模式的产生也来自具体的问题,拿mac来举例,我不能直接用mac链接VGA,不能直接连接网线接口,这是就需要提供一些转接头,来将一些特殊的接口与我们的火线口相链接. 在这个过程中转接头就相当于一类适配器,mac被转接头所扩展,所以mac称之为适配者.适配器的主要作用是将客户端的请求转化为对适配者接口的调用.好多场景下因为接口的不兼容, 多一个参数少一个参数,参数格式不正确,调用顺序等

  • JavaScript实现AOP详解(面向切面编程,装饰者模式)

    JavaScript实现AOP详解(面向切面编程,装饰者模式)

    什么是AOP? AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等.把这些功能抽离出来之后, 再通过"动态织入"的方式掺入业务逻辑模块中. AOP能给我们带来什么好处? AOP的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块. JavaScript实现AOP的思路? 通常,在 JavaScript 中实现 AOP,都是指把一个函数"动态织入&qu

  • JavaScript设计模式之装饰者模式实例详解

    JavaScript设计模式之装饰者模式实例详解

    本文实例讲述了JavaScript设计模式之装饰者模式.分享给大家供大家参考,具体如下: 这里我们通过需求逐渐引出装饰者模式. 下面是一个关于几代汽车的不同逐渐体现装饰者模式的. 首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下, //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //定义一个接口类 var Interface=

  • javascript设计模式 – 桥接模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 桥接模式原理与应用.分享给大家供大家参考,具体如下: 介绍:如果软件系统中某个类存在两个或多个独立变化的维度,可以通过桥接模式将这些维度分离出来,使两者可以独立扩展,让系统更符合单一职责原则. 定义:将抽象部分与其实现部分分离,使他们都可以独立的变化.它是一种对象结构型模式,又称为柄体模式或接口模式. 场景:我们做一个简单的画圆,将圆的半径和颜色这两个维度进行分离,使每一个维度都可以单独扩展,很多同学都说这么简单一个需求我5行代码就实现了.为什么写

随机推荐