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

示例代码如下:

       //装饰者
/*
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. 工厂模式-CaffeNet训练

    参考链接:http://blog.csdn.net/lingerlanlan/article/details/32329761 RNN神经网络:http://nbviewer.ipython.org/ ...

  2. Linux 内核剖解(转)

    Linux 内核剖析(转)  linux内核是一个庞大而复杂的操作系统的核心,不过尽管庞大,但是却采用子系统和分层的概念很好地进行了组织.在本文中,您将探索 Linux 内核的总体结构,并学习一些主要 ...

  3. Vue2:实例生命周期、js生命周期

    1.vue2生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM ...

  4. centos7常见的操作01 UTC CST

      CentOS系统将UTC时间修改为CST时间方法 2018-10-31 07:51 世界协调时间(Universal Time Coordinated,UTC): GPS 系统中有两种时间区分,一 ...

  5. Linux常用命令学习随笔

    1.ls命令 就是list的缩写,通过ls 命令不仅可以查看linux文件夹包含的文件,而且可以查看文件权限(包括目录.文件夹.文件权限)查看目录信息等等 常用参数搭配: ls -a 列出目录所有文 ...

  6. PHP如何判断一个数组是一维的还是二维的

    1.首先我们有一个PHP内置函数 count(); count(array,mode); array是数组,mode默认为0,1是递归的计数 <?php if(count($arr) == co ...

  7. 封装基于jq弹窗插件

    相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和$.custom的理解.有理解错误 ...

  8. -2 caffe数据结构

    一.Blob 使用: 访问数据元素: 计算diff: 保存数据与读取数据: 二.Layer 三.Net

  9. BZOJ 3144 [HNOI2013]切糕 (最大流+巧妙的建图)

    题面:洛谷传送门 BZOJ传送门 最大流神题 把点权转化为边权,切糕里每个点$(i,j,k)$向$(i,j,k+1)$连一条流量为$v(i,j,k)$的边 源点$S$向第$1$层的点连边,第$R+1$ ...

  10. 【Tool】Mac环境维护

    1. 安装编译opencv https://blog.csdn.net/lijiang1991/article/details/50756065 /Users/yuhua.cheng/Opt/open ...