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


Posted in Javascript onApril 14, 2020

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

Javascript 相关文章推荐
js 数组克隆方法 小结
Mar 20 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 #Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 #Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 #Javascript
vue cli3适配所有端方案的实现
Apr 13 #Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 #Javascript
JS错误处理与调试操作实例分析
Apr 13 #Javascript
You might like
php中return的用法实例分析
2015/02/28 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
浅析vue深复制
2018/01/29 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
什么是唯一索引
2015/07/05 面试题
幼教个人求职信范文
2013/12/02 职场文书
生产部经理岗位职责
2013/12/16 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
教师节联欢会主持词
2015/07/04 职场文书
TS 类型收窄教程示例详解
2022/09/23 Javascript
Moment的feature导致线上bug解决分析
2022/09/23 Javascript