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版DateAdd和DateDiff函数代码
Mar 01 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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初学者最感迷茫的问题小结
2010/03/27 PHP
php自动加载机制的深入分析
2013/06/08 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php实现评论回复删除功能
2017/05/23 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python 产生token及token验证的方法
2018/12/26 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
深入了解Python在HDA中的应用
2019/09/05 Python
解决python replace函数替换无效问题
2020/01/18 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
通信工程毕业生自荐信
2013/11/01 职场文书
《都江堰》教学反思
2014/02/07 职场文书
捐款倡议书
2014/04/14 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
演讲比赛主持词
2015/06/29 职场文书
财务管理制度范本
2015/08/04 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript