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 相关文章推荐
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
Oct 26 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
解析原生JS getComputedStyle
May 25 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
Javascript 二维数组
2009/11/26 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
python快速查找算法应用实例
2014/09/26 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
公务员培训自我鉴定
2013/09/19 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2014年度个人工作总结
2014/11/07 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript
Android中的Launch Mode详情
2022/06/05 Java/Android
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS