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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
JavaScript Tab菜单实现过程解析
May 13 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
Cygwin中安装PHP方法步骤
2015/07/04 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
python文件操作之目录遍历实例分析
2015/05/20 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
中专毕业个人的自荐信格式
2013/09/21 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
ElementUI实现el-form表单重置功能按钮
2021/07/21 Javascript