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高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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 SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP比你想象的好得多
2014/11/27 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
How TDD works
2012/09/30 面试题
陈欧的广告词
2014/03/18 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
个人先进事迹总结
2015/02/26 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
入党转正申请书范文
2019/05/20 职场文书