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 相关文章推荐
jQuery1.6 正式版发布并提供下载
May 05 Javascript
json对象转字符串如何实现
Dec 02 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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
PHP4.04简明安装
2006/10/09 PHP
初级的用php写的采集程序
2007/03/16 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
html超链接打开窗口大小的方法
2013/03/05 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
Django入门使用示例
2017/12/12 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
大学军训感想
2014/02/12 职场文书
书香校园建设方案
2014/05/02 职场文书
英文慰问信
2015/02/14 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
简爱读书笔记
2015/06/26 职场文书
教师节晚会主持词
2015/06/30 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技