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中的变量声明早于赋值分析
Mar 01 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
Angular实现表单验证功能
Nov 13 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
2014年五一劳动节社区活动总结
2014/04/14 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
国庆节新闻稿
2015/07/17 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
python OpenCV学习笔记
2021/03/31 Python
python三子棋游戏
2022/05/04 Python
Java线程的6种状态与生命周期
2022/05/11 Java/Android