装饰器模式:在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法),保护原有功能的完整性
需要条件:原对象,新内容(属性/方法)
个人理解:重新实现一下,原对象的方法,在方法内容,先执行原对象的方法,再执行新内容

示例代码如下:

       //装饰者
/*
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装饰器模式的更多相关文章

  1. JS 设计模式九 -- 装饰器模式

    概念 装饰者(decorator)模式能够在不改变对象自身的基础上,动态的给某个对象添加额外的职责,不会影响原有接口的功能. 模拟传统面向对象语言的装饰者模式 //原始的飞机类 var Plane = ...

  2. js设计模式——9.装饰器模式

    装饰一个圣诞树 // 装饰器模式,让其依次执行 var tree = {}; tree.decorate = function() { console.log('Make sure the tree ...

  3. JS 装饰器解析

    随着 ES6 和 TypeScript 中类的引入,在某些场景需要在不改变原有类和类属性的基础上扩展些功能,这也是装饰器出现的原因. 装饰器简介 作为一种可以动态增删功能模块的模式(比如 redux ...

  4. javascript装饰器模式

    装饰器模式 什么是装饰器 原名decorator 被翻译为装饰器 可以理解为装饰 修饰 包装等意 现实中的作用 一间房子通过装饰可以变得更华丽,功能更多 类似一部手机可以单独使用 但是很多人都愿意家个 ...

  5. 装饰器模式&&ES7 Decorator 装饰器

    装饰器模式(Decorator Pattern)允许向一个现有的对象动态添加新的功能,同时又不改变其结构.相比JavaScript中通过鸡肋的继承来给对象增加功能来说,装饰器模式相比生成子类更为灵活. ...

  6. 从ES6重新认识JavaScript设计模式: 装饰器模式

    1 什么是装饰器模式 向一个现有的对象添加新的功能,同时又不改变其结构的设计模式被称为装饰器模式(Decorator Pattern),它是作为现有的类的一个包装(Wrapper). 可以将装饰器理解 ...

  7. PHP 装饰器模式

    装饰器模式:是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能. [装饰器模式中主要角色] 抽象组件角色(Component):定义一个对象接口,以规范准备接受附加责任的对象,即可以给这 ...

  8. 设计模式-装饰器模式(Decrator Model)

    文 / vincentzh 原文连接:http://www.cnblogs.com/vincentzh/p/6057666.html 目录 1.概述 2.目的 3.结构组成 4.实现 5.总结 1.概 ...

  9. php设计模式 装饰器模式

    装饰器模式,可以动态地添加修改类的功能. 一个类提供了一项功能,如果要修改并添加额外的功能,传统的编程模式需要写一个子类继承它,并重新实现类的方法.使用装饰器模式,仅需要在运行时添加一个装饰器对象即可 ...

随机推荐

  1. eclipse离线安装pydev

    首先,下载去http://pydev.org/下载Python的Eclipse插件PyDev. 目前的最新版是PyDev 2.7.1.zip,将压缩文件解压出来.得到features和plugins两 ...

  2. cms初步构想

    一.cms系统的初步构想 公司正准备使用yii框架重新弄个类cms的系统: 初步的功能: 栏目文章的管理 SEO的优化功能 推荐位管理 一些思路和规则: 数据库表名的定义:通过"大模块名称+ ...

  3. 学了5天Arm,今天谈谈初学感受 (转)

    一.初探      4月1日入手友善mini2440.先看了下板子,感觉没什么稀奇的,s3c2440总线上外挂SDRAM(对这个不是很感冒,之前搞过一个FPGA的SDRAM控制器),NOR    .  ...

  4. C51端口结构和工作原理(转)

    一.P0端口的结构及工作原理 P0端口8位中的一位结构图见下图:   由上图可见,P0端口由锁存器.输入缓冲器.切换开关.一个与非门.一个与门及场效应管驱动电路构成.再看图的右边,标号为P0.X引脚的 ...

  5. MyBatis源码分析(各组件关系+底层原理

    MyBatis源码分析MyBatis流程图 下面将结合代码具体分析. MyBatis具体代码分析 SqlSessionFactoryBuilder根据XML文件流,或者Configuration类实例 ...

  6. DAO DTO VO BO

    DAO叫数据访问对象DTO是数据传输对象DAO通常是将非对象数据(如关系数据库中的数据)以对象的方式操纵.DTO通常用于不同层(UI层.服务层或者域模型层)直接的数据传输,以隔离不同层,降低层间耦合 ...

  7. js给文本添加行号

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 计蒜客 阿里天池的新任务—简单( KMP水 )

    链接:传送门 思路:KMP模板题,直接生成 S 串,然后匹配一下 P 串在 S 串出现的次数,注意处理嵌套的情况即可,嵌套的情况即 S = "aaaaaa" ,P = " ...

  9. 40 最小的K个数(时间效率)

    题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,.   测试用例: 功能测试(输入的数组中有相同的数字:输入的数组中 ...

  10. MVC架构之delegate

    Qt的MVC架构可以实现很多数据显示的功能,本次主要对代理进行一个总结: 重实现QStyledItemDelegate类,实现自定义类. (1)ComboxDelegate.h #ifndef COM ...