再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)
装饰者模式
装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求。
如果现在我们有个需求,需要做一个提交表单,当我们选中输入框的时候,输入框旁会显示相应提示,或许我们会这样做:
html中我们会添加一个输入框,后面放一个隐藏的提示信息
<input type="text" id="tel" />
<span id="tel_text" style="display: none;">请输入手机号</span>
然后在js里
var tel=document.getElementById('tel');var teltext=document.getElementById('tel_text');tel.onclick=function(){teltext.style.display='inline-block';}
当输入框被点击选中时,我们显示之前隐藏的提示信息。
但是如果这个时候我们的需求改变,正常的时候显示必填的提示信息,当用户点击输入框时隐藏必填的输入提示,显示所填字段验证格式的提示。那么我们可能会这么修改:
<input type="text" id="tel" />
<span id="tel_text">请输入手机号</span>
<span id="tel_validation" style="display: none;">手机号必须是11位数</span>
然后我们会在js中做相应的调整,我们会隐藏必填提示,显示验证提示
var tel=document.getElementById('tel');var teltext=document.getElementById('tel_text');var telvalidation=document.getElementById('tel_validation');tel.onclick=function(){teltext.style.display='none';telvalidation.style.display='inline-block';}
但是现在有个问题,我们表单一定会有很多数据项,那么用这种方式,我们必须一个个去找之前写的方法代码在去里面一个个修改,很麻烦。
使用装饰者模式装饰已有功能
这个时候我们就可以用到装饰者模式
var garnish=function(input,fn){//获取事件源var input=document.getElementById(input);//判断事件源是否绑定事件if(typeof input.onclick==='function'){//缓存事件源原有回调函数var oldClickFn=input.onclick;//为事件源定义新的事件input.onclick=function(){//事件源原有回调函数oldClickFn();//新增的回调函数fn();}}else{//如果事件源未绑定,直接为事件源添加新增回调函数input.onclick=fn;}
}
现在我们通过装饰者模式就不用一个个去找之前的逻辑在去修改了,我们通过装饰者模式调用试一下吧。
garnish('tel',function(){var telvalidation=document.getElementById('tel_validation');teltext.style.display='none';telvalidation.style.display='inline-block';
});
通过使用装饰者模式我们发现无论输入框是否绑定过事件,都可以轻松完成我们的需求,装饰者模式很简单,就是对原有对象的属性与方法的添加
总结
在我们对原有功能不了解的情况下如果要对功能进行扩展装饰者模式可能是不错的选择,当然同样对原有对象进行扩展的模式还有我们之前讲到的适配器模式,但是两者不同的是,适配器模式对对象进行扩展时,很多时候时对对象内部结构的重构,因此必须要了解其自身的结构,而装饰者模式对对象的扩展是一种良性扩展,不用了解其具体实现,只是在外部进行了一次封装扩展,这又是对原有功能完整性的一种保护。
也谢谢大家看到这里:)如果你觉得我的分享还可以请点击推荐,分享给你的朋友让我们一起进步~
好了以上就是本次分享的全部内容,本次示例参考自JavaScript设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。
欢迎转载,转载请注明作者,原文出处。
转载于:https://www.cnblogs.com/chen-jie/p/JavaScript-Decorator.html
再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)相关推荐
- 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)
中介者模式 概念介绍 中介者模式(Mediator):通过中介者对象封装一系列对象之间的交互,使对象之间不再相互引用降低他们之间的耦合,有时中介者对象也可以改变对象之间的交互. 创建一个中介 中介者模 ...
- Spring源码学习笔记:经典设计模式之装饰者模式
1.博客内容均出自于咕泡学院架构师第三期 2.架构师系列内容:架构师学习笔记(持续更新) 0.装饰者模式(Decorator Pattern) 指在不改变原有对象的基础之上,将功能附加到对象上,提供了 ...
- javascript设计模式之装饰器模式(结构型模式)
javascript设计模式之装饰器模式 js的设计模式分为创建型模式,结构型模式和行为模式 结构模式描述了如何组合对象以提供新的功能. 装饰器模式是一种常见的结构型模式,我们可以以一个基础对象为基础 ...
- GEE(Google Earth Engine) 最基础代码学习笔记二 —— JavaScript 语言
GEE(Google Earth Engine) 学习笔记二 Javascript 语言 1. 注释 print('Hello World!'); 如果要注释,则在代码前面加//,比如: // pri ...
- 中国大学MOOC实用Python程序设计学习笔记和课后测试1-3周(北京大学)
中国大学MOOC实用Python程序设计学习笔记和课后测试1-3周(北京大学) 第1周 Python初探 为project设置解释器 保留字 第1周课后测试题 第2周 基本运算.条件分支和输出格式控制 ...
- 【学习笔记】软件设计模式(一)基本概念与归纳总结
软件设计模式之基本概念与归纳总结 本人学习笔记.内容参考<Java设计模式>刘伟 教程配套PPT.仅供学习参考使用. 文章目录 软件设计模式概述 模式的分类 模式定义和特点的归纳总结 1. ...
- 编程学习笔记之python深入之装饰器案例及说明文档[图]
编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰,所以称为装饰 ...
- JavaScript设计模式之发布-订阅模式(观察者模式)-Part1
<JavaScript设计模式与开发实践>读书笔记. 发布-订阅模式又叫观察者模式,它定义了对象之间的一种一对多的依赖关系.当一个对象的状态发生改变时,所有依赖它的对象都将得到通知. 例如 ...
- 零基础学习设计模式之装饰器模式(配套视频)
零基础学习设计模式之装饰器模式 定义 在不改变目标结构的情况下,动态的给对象增加功能 举例 如房子装修.相片加相框等,都是装饰器模式. 基本组件 抽象构件(Component)角色:定义一个抽象接口以 ...
- 前端学习笔记之 JavaScript WebAPIs(整理)
目录 篇一 一.鼠标事件 二.获取元素的属性值 三.设置元素的属性值 四.移除属性 五.H5自定义属性 1. 设置自定义属性 2. 获取自定义属性 六.节点操作 1.两种方法的区别 2.节点概述 3 ...
最新文章
- 千万级并发HAproxy均衡负载系统介绍
- 转义符,re模块,rangdom随机数模块,
- 中国涂料树脂行业投资盈利预测及发展规模展望报告2021-2027年版
- 引入 JPEGCodec;JPEGImageEncoder; 图片处理(有的时候会报错)
- 开发文件服务器,易语言开发文件服务器
- 一次违反常规的Java大厂面试经历,重难点整理
- pytorch之trainer.zero_grad()
- 拦截游戏窗口被移动_「维维足球pro-教案」50个传控踢法练习之(一、二)追球游戏...
- 5003.c++定义hpp文件
- Spring-core-SpringFactoriesLoader类
- 面向对象编程(Object-Oriented Programming)
- php 日期相减 时分秒,PHP计算两个时间戳间隔的日时分秒的代码实例
- swing怎么监听其他类的按钮_Swing舞出我人生 Vol.05 / 我想通过跳舞去寻找自己
- EasyUI 1.5.1 美化主题大包 Insdep Theme 1.0.3 正式版已发布,开源下载
- Asterisk G729编码支持
- windows系统redis部署配置(IP端口服务)配置
- FOne HCI超融合系统
- html表单直接发送邮件,html表单匿名发送电子邮件
- 【车道线检测论文】 LaneNet
- GRE配置详解和路由黑洞及检测机制
热门文章
- LINUX下载编译ass
- python 写配置文件,python配置文件写入过程详解
- java socket第三方库_Java基于Socket实现HTTP下载客户端
- mysql commit undo_详细分析MySQL事务日志(redo log和undo log)
- c语言在s之后可以直接跟条件,2018C语言第二次作业
- java判断语句总结,JAVA常用操作语句 项目中的总结六
- 如何强制卸载edge_如何卸载微软Windows10自带的Edge浏览器?试试这个方法
- python julia go_Python的四个挑战者:Swift、Go、Julia、R
- mysql数据结构_MySQL索引深入理解底层数据结构
- 前端架构设计的方法论