js装饰设计模式学习心得


Posted in Javascript onFebruary 17, 2018

装饰设计模式

每种设都有其独特的应用场景和解决问题的方式, 装饰设计模式是动态的为对象添加新的功能, 是一种用于代替继承的技术,无需通过继承增加子类就能扩展对象的新功能。使用对象的关联关系代替继承关系,更加灵活,同时避免类型体系的快速膨胀, 这种模式适合新添加的功能不足以用继承为代价解决问题的情况时使用 - 杀鸡焉用宰牛刀 ^_^
装饰设计模式: 动态地为一个对象添加一些额外的职责,若要扩展一个对象的功能,装饰者提供了比继承更有弹性的替代方案。

结构图:

js装饰设计模式学习心得

接口

var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'repair', 'getPrice']);

对象类

var AcmeComfortCuiser = function(){
  
};
AcmeComfortCuiser.prototype = {
  assemble: function(){
    
  },
  wash: function(){
    
  },
  repair: function(){
    
  },
  getPrice: function(){
    
  }
}

装饰类

var BicycleDecorator = function(bicycle){
  Interface.ensureImplements(bicycle, Bicycle);
  this.bicycle = bicycle;
};
BicycleDecorator.prototype = {
  assemble: function(){
    return this.bicycle.assemble();
  },
  wash: function(){
    return this.bicycle.wash();
  },
  repair: function(){
    return this.bicycle.repair();
  },
  getPrice: function(){
    return this.bicycle.getPrice();
  }
}

拓展类

var HeadlightDecorator = function(bicycle){
    BicycleDecorator.call(this, bicycle);
  };
  extend(HeadlightDecorator, BicycleDecorator);
  HeadlightDecorator.prototype.getPrice = function(){
    return this.bicycle.getPrice() + 15.00;
  }
Javascript 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
jqgrid 简单学习笔记
May 03 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
Vue组件库发布到npm详解
Feb 17 #Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 #Javascript
JavaScript中严格判断NaN的方法
Feb 16 #Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 #Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
You might like
基于mysql的bbs设计(三)
2006/10/09 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
ucenter通信原理分析
2015/01/09 PHP
php比较相似字符串的方法
2015/06/05 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Python爬取读者并制作成PDF
2015/03/10 Python
python遍历类中所有成员的方法
2015/03/18 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
高中毕业生自我鉴定范文
2013/09/26 职场文书
金融专业个人的自我评价
2013/10/18 职场文书
写求职信有什么意义
2014/02/17 职场文书
小学生优秀评语大全
2014/04/22 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
spring 项目实现限流方法示例
2022/07/15 Java/Android