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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
js Math 对象的方法
Sep 01 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
详解Javascript实践中的命令模式
May 05 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 !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
解析php5配置使用pdo
2013/07/03 PHP
PHP文件上传类实例详解
2016/04/08 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
ie 调试javascript的工具
2009/04/29 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
书法比赛获奖感言
2014/02/10 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
授权委托书协议书
2014/10/16 职场文书
导游词之西安骊山
2019/12/20 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL