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 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
angular select 默认值设置方法
Jun 23 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
前端vue如何使用高德地图
Nov 05 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
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php发送post请求函数分享
2014/03/06 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
jQuery选择器全面总结
2014/01/06 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
通过源码分析Python中的切片赋值
2017/05/08 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python树的同构学习笔记
2019/09/14 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
Java程序员常见面试题
2015/07/16 面试题
运动会广播稿60字
2014/01/15 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
紧急迫降观后感
2015/06/15 职场文书
2019个人工作总结
2019/06/21 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL