JS装饰器模式
装饰器模式:在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法),保护原有功能的完整性
需要条件:原对象,新内容(属性/方法)
个人理解:重新实现一下,原对象的方法,在方法内容,先执行原对象的方法,再执行新内容
示例代码如下:
//装饰者
/*
input:原对象
fn:新内容(属性或方法)
*/
var decorator = function (input,fn) {
//获取事件源
var input = document.getElementById(input);
//判断事件源,是否绑定某一事件
if(typeof input.onclick === 'function'){
//缓存事件源的原有回调函数
var oldClick = input.onclick;
//为事件源定义新的回调函数
input.onclick = function () {
//事件源,原有回调函数
oldClick();
//执行事件源新增回调函数
fn();
}
}
}
JS装饰器模式的更多相关文章
- JS 设计模式九 -- 装饰器模式
概念 装饰者(decorator)模式能够在不改变对象自身的基础上,动态的给某个对象添加额外的职责,不会影响原有接口的功能. 模拟传统面向对象语言的装饰者模式 //原始的飞机类 var Plane = ...
- js设计模式——9.装饰器模式
装饰一个圣诞树 // 装饰器模式,让其依次执行 var tree = {}; tree.decorate = function() { console.log('Make sure the tree ...
- JS 装饰器解析
随着 ES6 和 TypeScript 中类的引入,在某些场景需要在不改变原有类和类属性的基础上扩展些功能,这也是装饰器出现的原因. 装饰器简介 作为一种可以动态增删功能模块的模式(比如 redux ...
- javascript装饰器模式
装饰器模式 什么是装饰器 原名decorator 被翻译为装饰器 可以理解为装饰 修饰 包装等意 现实中的作用 一间房子通过装饰可以变得更华丽,功能更多 类似一部手机可以单独使用 但是很多人都愿意家个 ...
- 装饰器模式&&ES7 Decorator 装饰器
装饰器模式(Decorator Pattern)允许向一个现有的对象动态添加新的功能,同时又不改变其结构.相比JavaScript中通过鸡肋的继承来给对象增加功能来说,装饰器模式相比生成子类更为灵活. ...
- 从ES6重新认识JavaScript设计模式: 装饰器模式
1 什么是装饰器模式 向一个现有的对象添加新的功能,同时又不改变其结构的设计模式被称为装饰器模式(Decorator Pattern),它是作为现有的类的一个包装(Wrapper). 可以将装饰器理解 ...
- PHP 装饰器模式
装饰器模式:是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能. [装饰器模式中主要角色] 抽象组件角色(Component):定义一个对象接口,以规范准备接受附加责任的对象,即可以给这 ...
- 设计模式-装饰器模式(Decrator Model)
文 / vincentzh 原文连接:http://www.cnblogs.com/vincentzh/p/6057666.html 目录 1.概述 2.目的 3.结构组成 4.实现 5.总结 1.概 ...
- php设计模式 装饰器模式
装饰器模式,可以动态地添加修改类的功能. 一个类提供了一项功能,如果要修改并添加额外的功能,传统的编程模式需要写一个子类继承它,并重新实现类的方法.使用装饰器模式,仅需要在运行时添加一个装饰器对象即可 ...
随机推荐
- OpenCV的Python接口
Python教程系列:http://blog.csdn.net/sunny2038/article/details/9057415 与C++的不同之处:http://developer.51cto.c ...
- php多线程操作数据库(转)
PHP用pcntl可以实现多线程操作数据库.直接上代码,逻辑自己研究喽. 示例代码为: /** * 并发多线程运行任务,把任务拆解成区块,用多线程去并发执行 * @param callable $ex ...
- otool -l 可执行文件结构
otool -l /Users/zzf073/Desktop/FqlMerchantX /Users/zzf073/Desktop/FqlMerchantX: Mach header magic cp ...
- bzoj 1293: [SCOI2009]生日礼物 问题转化 + 性质分析 + 滚动数组优化
Description 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可以没有彩珠,但多个彩 ...
- NGUI报错处理
Unity5.4.1与NGUI出现的问题Ignoring menu item NGUI because it is in no submenu! Ignoring menu item NGUI ...
- Bash中文速查表
最好用的中文速查表(Cheatsheet) 来源:https://github.com/skywind3000/awesome-cheatsheets 感谢网友们的贡献! ############## ...
- HDU1527 - 取石子游戏【威佐夫博弈】
有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子.最后把石子全部取完者为胜者. ...
- 01.Python基础-2.判断语句和循环语句
1判断语句 1.1判断语句介绍 满足条件才能做某件事 1.2 if语句 if 条件: 语句块 在if判断条件的时候 False:False, 0, '', None, [] True :基本除上面之外 ...
- php文件上传相关知识点回顾
近来正在回顾PHP的文件上传.在此做个记录. <?php date_default_timezone_set('PRC'); if(isset($_POST['submit'])) { echo ...
- Linux设备驱动--块设备(二)之相关结构体(转)
上回最后面介绍了相关数据结构,下面再详细介绍 块设备对象结构 block_device 内核用结构block_device实例代表一个块设备对象,如:整个硬盘或特定分区.如果该结构代表一个分区,则其成 ...