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

示例代码如下:

       //装饰者
/*
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. Photoshop扣除特定颜色背景

    步骤:打开ps--打开图片---选择--选择色彩范围---取样颜色(用吸管选定颜色)-- ( )再按delete键删除--点击文件--点击储存为PSD. 这样就抠除了特定范围色彩内的背景.

  2. PCL:PCL与MFC 冲突总结

    (1):max,min问题 MFC程序过程中使用STL一些类编译出错,放到Console Application里一切正常.比如: void CMyDialog::OnBnClickedButton1 ...

  3. children ie8下获取错误

    ParentNode.children 是一个只读属性,返回 一个Node的子elements,是一个动态更新的 HTMLCollection. Internet Explorer 6 - 8 支持该 ...

  4. Zookeeper 使用

    转自:https://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解 本文介绍的 Zookeeper 是以 3.2. ...

  5. 莫烦大大TensorFlow学习笔记(9)----可视化

      一.Matplotlib[结果可视化] #import os #os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2' import tensorflow as tf i ...

  6. idea使用lombok

    1.这玩意可以帮助我们自动实现set.get方法,实现过程有两处,只要理解了这两处,对其实际工作如何使用就非常简单了 2.第一点就是编译过程,比如使用gradle build 等编译工具进行编译时,会 ...

  7. JavaScript正则表达式总结

    同学们,今天给大家带来一篇正则表达式的总结,老规矩,先说下我们为什么要用正则?正则要用在什么地方? (个人理解的,大神轻喷) 正则很多时候要用于字符串操作,比如我们要把一个字符串里面的空格删除啊,替换 ...

  8. MVC架构之delegate

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

  9. 汇编-理解call,ret

    ; 有意思的东西,主函数调用子函数用汇编来理解 assume cs:codeseg codeseg segment start: main: call sub1 ; 调用子函数1, push IP1 ...

  10. 服务器重启后启动Docker命令

    启动步骤: 1.启动Docker 守护进程 systemctl daemon-reload 2.Docker启动命令: systemctl start docker 3.查看docker服务是否启动 ...