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


Posted in Javascript onDecember 28, 2014

装饰者模式说明

说明:通一个类来动态的对另一个类的功能对象进行前或后的修饰,给它辅加一些额外的功能; 这是对一个类对象功能的装饰,装饰的类跟被装饰的类,要求拥有相同的访问接口方法(功能),这在动态面向对象类里,一般以实现同一个接口(interface)来约束实现;装饰类的要有对被装饰类的引用,用于在装饰类的相应方法,调用相应被装饰类的方法,然后对其进行修饰;

场景举例:

1>. 比如我们生活中的穿衣服, 一件衬衣,一件西装外套,一条裤子,一条领带,一双漂亮的皮鞋; 每多穿一件,都是对前面一件或全身的装饰;

2>. 比如我们有个类下的功能方法,可能用于写日志,可能用于用户登陆这样的功能,也许写入日志前需要获取当前操作者信息,或是登录成功后,写入一条日志;写入日志之前的额外操作,它的总体来说也还是一个写日志的目的;登孙成功后写日志,它总体上也是一个登录过程的操作信息;

因此装饰者模式用于实现,两者相似操作的一种场景;就是装饰者对被装饰者功能对象的扩展,本质还是原方法相同的功能范围;

实例源码

1. 被装饰者类

function Wear() {

    

}
Wear.prototype.Shirt = function() {

    //穿了件衬衫

console.log('穿上衬衫');

}

2. 装饰者类

function Decorator(wear) {

    this.wear = wear;

}
Decorator.prototype.Shirt = function() {

    this.wear.Shirt();

    //穿了件衬衫后,我又加上了领带

}

3. 使用方法

var wear = new Wear();

var decorator = new Decorator(wear);

decorator.Shirt();

这样就实现了对 Wear 穿衬衫这个功能对象的动态扩展装饰,你也不必知道原被装饰方法是如何执行,只要知道它的功能是什么就可以,然后知道我们要对其辅加的额外功能是什么就可以;

其他说明

装饰者模式,真正提现了面向对象方法的:对扩展开放,对修改关闭的原则;所有想要的功能方法,都是在没有修改[被装饰类Wear]在扩展[装饰者这个类Decorator]的情况下进行的;

装饰者模式的一个主要特点,就是装饰者对被装饰者的引用,以实现对被装饰者的无修改装饰;

模拟下:先穿衬衫,再穿领带,再穿西装的场景: 上面的被装饰者不变了:

2. 装饰者类:

function Decorator(wear) {

    this.wear = wear;

}

Decorator.prototype.Shirt = function() {

    this.wear.Shirt(); //这里只穿衬衫;

}

3. 创建类似继承 Decorator 子类的 穿领带类与穿西装类

function Decorator_Tie(decorator) {

    this.decorator = decorator;

}    

Decorator_Tie.prototype.Shirt = function() {

    this.decorator.Shirt(); //穿上衬衫

    console.log('再戴上领带');

}
function Decorator_Western (decorator) {

    this.decorator =  decorator;

}

Decorator_Western.prototype.Shirt = function() {

    this.decorator.Shirt();

    console.log('再穿上西装');

}

使用方法:

//先穿上衬衫

var wear = new Wear();

var decorator = new Decorator(wear);

//decorator.Shirt();

//再戴上领带

var tie = new Decorator_Tie(decorator);

//tie.Shirt();

//再穿上西装

var western = new Decorator_Western(tie);

western.Shirt();

这就是一个穿衣服装饰的模拟例子;

Javascript 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
javascript填充默认头像方法
Feb 22 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
浅谈Javascript Base64 加密解密
Dec 28 #Javascript
JavaScript设计模式之代理模式介绍
Dec 28 #Javascript
JavaScript设计模式之外观模式介绍
Dec 28 #Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 #Javascript
jQuery中removeData()方法用法实例
Dec 27 #Javascript
jQuery中data()方法用法实例
Dec 27 #Javascript
jQuery中index()方法用法实例
Dec 27 #Javascript
You might like
php中的一个中文字符串截取函数
2007/02/14 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
Python ZipFile模块详解
2013/11/01 Python
详解Python中DOM方法的动态性
2015/04/11 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
简述数组与指针的区别
2014/01/02 面试题
个人授权委托书范本
2014/09/14 职场文书
教师病假条范文
2015/08/17 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技