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 比较时间大小的代码
Apr 24 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python del()函数用法
2013/03/24 Python
python实现数独算法实例
2015/06/09 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python实现爬山算法的思路详解
2019/04/09 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
仓管岗位职责范本
2014/02/08 职场文书
学校对教师的评语
2014/04/28 职场文书
人事经理岗位职责
2014/04/28 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
材料物理专业求职信
2014/09/01 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书