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 三种创建对象的方法
Oct 16 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
JavaScript中return false的用法
Mar 12 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
简单实现node.js图片上传
Dec 18 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
uni-app实现获取验证码倒计时功能
Nov 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预定义常量
2006/12/25 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Python常用模块用法分析
2014/09/08 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
公司授权委托书
2014/04/04 职场文书
银行内勤岗位职责
2014/04/09 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
小学校本教研总结
2015/08/13 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers