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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
js实现购物车功能
Jun 12 Javascript
typescript编写微信小程序创建项目的方法
Jan 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中的string类型使用说明
2010/07/27 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
php和nginx交互实例讲解
2019/09/24 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python中文件的读取和写入操作
2018/04/27 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
通过实例解析Python return运行原理
2020/03/04 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
优秀应届生求职信
2014/06/16 职场文书
测绘工程专业求职信
2014/07/15 职场文书
签字仪式主持词
2015/07/03 职场文书
公司员工培训管理制度
2015/08/04 职场文书