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系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
Jquery Fade用法详解
Nov 06 jQuery
JavaScript实现点击图片换背景
Nov 20 Javascript
原生js实现九宫格拖拽换位
Jan 26 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
JavaScript基本对象
2007/01/11 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
快速入门Vue
2016/12/19 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
python之wxPython应用实例
2014/09/28 Python
python3生成随机数实例
2014/10/20 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
关于Java finally的面试题
2016/04/27 面试题
会计应届生的自荐信
2013/12/13 职场文书
文秘专业个人求职信
2013/12/22 职场文书
市场营销求职信范文
2014/02/21 职场文书
人力资源作业细则
2014/03/03 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
财政局个人年终总结
2015/03/03 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
施工安全责任协议书
2016/03/23 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang