JavaScript设计模式之装饰者模式定义与应用示例


Posted in Javascript onJuly 25, 2018

本文实例讲述了JavaScript设计模式之装饰者模式定义与应用。分享给大家供大家参考,具体如下:

在不改变原对象的基础上,通过对其进行包装扩展(添加属性或方法),使原有对象可以满足用户的更复杂需求,满足开闭原则,也不会破坏现有的操作。

适用场景:当遇到新的功能或需求需要对原来的操作做出更改时,若原来的操作比较复杂,可以把原来的操作原封不动地放在装饰者中,然后再添加新功能。

eg1:

function Person() {
}
Person.prototype.sayHello = function() {
  console.log('Hello, Alice!');
};
function Decorator(param) {
  this.person = param;
}
Decorator.prototype.sayHello = function() {
  this.person.sayHello();
  console.log('Hello, Bruce!');
};
Decorator.prototype.sayGoodbye = function() {
  console.log('Bye, everyone!');
};
new Decorator(new Person()).sayHello();
/*
输出:
Hello, Alice!
Hello, Bruce!
*/
new Decorator(new Person()).sayGoodbye();
/*
输出:
Bye, everyone!
*/

没有改变原有的构造函数对象,而是原封不动地拿过来,再添加新的方法。

eg2:

var div = document.getElementById('div');
div.onclick = function() {
  console.log('First click!');
}
var decorator = function() {
  var args = arguments;
  var element = document.getElementById(args[0]);
  if (typeof element.onclick === 'function') {
    var firstClick = element.onclick;
    element.onclick = function() {
      firstClick();
      args[1]();
    }
  }
  else
    element.onclick = args[1];
}
decorator('div', function() {
  console.log('Second click!');
});
/*
输出:
First click!
Second click!
*/

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 #Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 #Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 #Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 #Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 #Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 #Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
phpinfo的知识点总结
2019/10/10 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python基础教程项目二之画幅好画
2018/04/02 Python
python 将md5转为16字节的方法
2018/05/29 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python中有函数重载吗
2020/05/28 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
学生自我鉴定模板
2013/12/30 职场文书
小学教师培训感言
2014/02/11 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Win2008系统搭建DHCP服务器
2022/06/25 Servers