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 相关文章推荐
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
Angular2的管道Pipe的使用方法
Nov 07 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
原生JavaScript实现随机点名表
Jan 14 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字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
python发布模块的步骤分享
2014/02/21 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
工程造价管理专业大专生求职信
2013/10/06 职场文书
历史系自荐信范文
2013/12/24 职场文书
医学生自我评价
2014/01/27 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
课例研修方案
2014/05/31 职场文书
学校四风对照检查材料
2014/08/28 职场文书
医药销售自我评价200字
2014/09/11 职场文书
成都人事代理协议书
2014/10/25 职场文书
2015年超市工作总结
2015/04/09 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js