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 相关文章推荐
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
初识Node.js
Sep 03 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
jquery图片切换插件
Mar 16 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
javascript入门教程基础篇
Nov 16 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
Aug 14 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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-fpm的两种进程管理模式详解
2013/06/03 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
json 实例详细说明教程
2009/10/31 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python实现解数独程序代码
2017/04/12 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
项目合作计划书
2014/01/09 职场文书
护理专业求职信
2014/06/15 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2015年春节标语口号
2014/12/09 职场文书
文明单位申报材料
2014/12/23 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
个人维稳承诺书
2015/05/04 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python