幽灵资源网 Design By www.bzswh.com

本文实例讲述了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程序设计有所帮助。

标签:
javascript,设计模式,装饰模式

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?