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设计模式 装饰器模式
装饰器模式,可以动态地添加修改类的功能. 一个类提供了一项功能,如果要修改并添加额外的功能,传统的编程模式需要写一个子类继承它,并重新实现类的方法.使用装饰器模式,仅需要在运行时添加一个装饰器对象即可 ...
随机推荐
- Java入门第一季——从此投身Java??
找工作告一段落. 最后的工作呢,和java紧密相关,也是阴差阳错,不过都是软件开发,都好了,不过以后侧重点肯定是在java这边,php有机会还是一直学下去的,那么美的说~ Java开发第一季 一.简 ...
- Binary Agents FreeCodeCamp
function binaryAgent(str) { var arr = str.split(" "); var newStr = ""; for(var i ...
- java中后端拼接字符串返回前台页面换行显示
后端拼接时用:"\n"分割,比如: String str = "白日依山尽,\n" + "黄河入海流:"; 返回前台页面时,放入 <p ...
- Linux下mysql 忘记密码的解决办法
>mysql -u root -p Enter password: ******** Welcome to the MySQL monitor. Commands end with ; or \ ...
- 第一章 JavaScript 简介
1.1 JavaScript 的简史 JavaScript 诞生于1995年 ,后由 欧洲计算机制造商协会( ECMA,European Computer Manufacturers Associ ...
- CentOS 笔记(二) 端口占用,进程查看
①查看当前端口情况 netstat -nultp ②查看当前进程情况 ps -ef ps -ef|grep dotnet ③强制kill 进程 kill -9 [PIN]
- Elasticsearch 入门 - 安装、启动和配置
安装 请参阅elastic官网 :Installing Elasticsearch 启动 使用 ./bin/elasticsearch 命令即可启动 使用 ./bin/elasticsearch -d ...
- jsp js action之间传值
1.struts2 action如何向JSP的JS函数传值 action中定义变量 public class TestAction extends ActionSupport implements S ...
- nmon和nmon analyser的下载和使用
nmon 工具可以为 AIX 和 Linux 性能专家提供监视和分析性能数据的功能,AIX是IBM的一个操作系统,相比于Linux,使用范围不算很广,因此我们重点讲下Linux下的nmon应 用.首先 ...
- Gradle:Gradle入门
一.安装Gradle 1.首先确保你安装的JDK1.5或以上版本号. C:\Users\chengxiang.peng.QUNARSERVERS>java -version java ver ...