[设计模式] javascript 之 装饰者模式
装饰者模式说明
说明:通一个类来动态的对另一个类的功能对象进行前或后的修饰,给它辅加一些额外的功能; 这是对一个类对象功能的装饰,装饰的类跟被装饰的类,要求拥有相同的访问接口方法(功能),这在动态面向对象类里,一般以实现同一个接口(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 之 装饰者模式的更多相关文章
- JAVA设计模式之【装饰者模式】
JAVA设计模式之[装饰者模式] 装饰模式 对新房进行装修并没有改变房屋的本质,但它可以让房子变得更漂亮.更温馨.更实用. 在软件设计中,对已有对象(新房)的功能进行扩展(装修). 把通用功能封装在装 ...
- javascript的装饰者模式Decorator
刚开始看这段代码有点绕,现在回过头来看,so easy! Function.prototype.before = function(beforefn){ var _self = this; retur ...
- 【读书笔记】读《JavaScript设计模式》之装饰者模式
一.定义 装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中.这样一来,你可以给一个方法添加一些行为,然后将方法调用传递给原始对象.相对于创建子类来说,使用装饰者对象是一种更灵活的选择(装 ...
- JavaScript高级---装饰者模式设计
一.设计模式 javascript里面给我们提供了很多种设计模式: 工厂.桥.组合.门面.适配器.装饰者.享元.代理.观察者.命令.责任链 在前面我们实现了工厂模式和桥模式 工厂模式 : 核心:为了生 ...
- Java设计模式12:装饰器模式
装饰器模式 装饰器模式又称为包装(Wrapper)模式.装饰器模式以多客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰器模式的结构 通常给对象添加功能,要么直接修改对象添加相应的功能, ...
- 设计模式学习心得<装饰器模式 Decorator>
装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构.这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰类,用来包装 ...
- 设计模式のDecoratorPattern(装饰器模式)----结构模式
一.产生背景 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构.这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装 ...
- 设计模式C++实现——装饰者模式
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/walkerkalr/article/details/28633123 模式定义: 装 ...
- 重学 Java 设计模式:实战装饰器模式(SSO单点登录功能扩展,增加拦截用户访问方法范围场景)
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 对于代码你有编程感觉吗 很多人写代码往往是没有编程感觉的,也就是除了可以把功能按照固 ...
随机推荐
- SCAU巡逻的士兵
1142 巡逻的士兵 Description 有N个士兵站成一队列, 现在需要选择几个士兵派去侦察. 为了选择合适的士兵, 多次进行如下操作: 如果队列超过三个士兵, 那么去除掉所有站立位置为奇数的士 ...
- Class to connect postgres with python in psycopg2
For we need to connect the postgres db in project very frequently, so write the follows class: impor ...
- 数据持久化之sqlite基本用法
一.ACID 即原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability). 原子性:整个事务中的所有操作,要么全部完成,要么全部不完 ...
- 【ASP.NET 进阶】根据IP地址进行百度地图定位
昨天有完成一个[ASP.NET 进阶]根据IP返回对应位置信息 的小Demo,既然可以通过IP获得位置信息,那当然可以通过位置信息的经纬度获取IP的当前定位了,虽然与实际地址偏移较大,毕竟不是GPRS ...
- HDU 5033 Building --离线+单调栈
题意:给一些建筑物,x表示横坐标,h表示高度,然后查询某些坐标x,问从该点看向天空的最大张角是多大. 解法:离线操作,读入所有数据,然后按x升序排序,对每一个查询的x,先从左到右,依次添加x坐标小于x ...
- this关键字的使用
一,表示类中属性 1,没有使用this的情况 class Person{ // 定义Person类 private String name ; // 姓名 private int age ; // 年 ...
- TP快捷函数
U();创建URL地址 C();获取或设置系统变量信息 A();实例化控制器对象 R():实例化控制器对象且同时调用控制器里的某个方法 I();过滤表单提交的数据,代替$_POST
- f2fs解析(五)什么叫做compacted summary
f2fs中普通的summary是长这样的:每一个段的SSA block中,前半部分是这个段的SSA,然后对于HOT_DATA以及COLD_DATA段,存放是的是nat journal 和 sit jo ...
- U3D 扩展方法 & Dotween & tolua
using UnityEngine; using System.Collections; using LuaInterface;//tolua 空间引用 using DG.Tweening;//DOT ...
- JS调试加断点
js在回调函数执行时直接就跳过了,想看下回调函数也看不了,调试的debug代码一时半会儿想不起来,找了几分钟找到了,还是记一下好. 1 debugger;