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获取IE9下拉框默认值问题探讨
Jul 22 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
测试php函数的方法
2013/11/13 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php查看网页源代码的方法
2015/03/13 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
Node.js实现文件上传
2016/07/05 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
express启用https使用小记
2019/05/21 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
会计学自我鉴定
2014/02/06 职场文书
公司节能减排倡议书
2014/05/14 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python