JS设计模式之装饰者模式

原创 2016年05月31日 12:03:51

介绍

装饰者模式用于包装同接口的对象,不仅允许你向方法添加行为,而且还可以将方法设置成原始对象调用(例如装饰者的构造函数)。

装饰者模式通过重载方法的形式添加新功能,该模式可以在被装饰者前面或者后面加上自己的行为以达到特定的目的。

装饰者模式是比继承更有弹性的替代方案。

正文

装饰者模式究竟是个什么样子,还是代码中见:

//需要装饰的类(函数)
var tree = {};

//原始装饰
tree.decorate = function () {
    console.log('Make sure the tree won\'t fall');
};

//装饰方法
tree.getDecorator = function (deco) {
    tree[deco].prototype = this;
    return new tree[deco];
};

//装饰模式1
tree.RedBalls = function () {
    this.decorate = function () {
        this.RedBalls.prototype.decorate(); // 第7步:先执行原型(这时候是Angel了)的decorate方法
        console.log('Put on some red balls'); // 第8步 再输出 red
        // 将这2步作为RedBalls的decorate方法
    }
};

//装饰模式2
tree.BlueBalls = function () {
    this.decorate = function () {
        this.BlueBalls.prototype.decorate(); // 第1步:先执行原型的decorate方法,也就是tree.decorate()
        console.log('Add blue balls'); // 第2步 再输出blue
        // 将这2步作为BlueBalls的decorate方法
    }
};

//装饰模式3
tree.Angel = function () {
    this.decorate = function () {
        this.Angel.prototype.decorate(); // 第4步:先执行原型(这时候是BlueBalls了)的decorate方法
        console.log('An angel on the top'); // 第5步 再输出angel
        // 将这2步作为Angel的decorate方法
    }
};

//执行装饰
tree = tree.getDecorator('BlueBalls'); // 第3步:将BlueBalls对象赋给tree,这时候父原型里的getDecorator依然可用
tree = tree.getDecorator('Angel'); // 第6步:将Angel对象赋给tree,这时候父原型的父原型里的getDecorator依然可用
tree = tree.getDecorator('RedBalls'); // 第9步:将RedBalls对象赋给tree

tree.decorate(); // 第10步:执行RedBalls对象的decorate方法

总结

装饰者模式是为已有功能动态地添加更多功能的一种方式,把每个要装饰的功能放在单独的函数里,然后用该函数包装所要装饰的已有函数对象,因此,当需要执行特殊行为的时候,调用代码就可以根据需要有选择地、按顺序地使用装饰功能来包装对象。优点是把类(函数)的核心职责和装饰功能区分开了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript设计模式----装饰者模式

装饰者模式的定义:装饰者(decorator)模式能够在不改变对象自身的基础上,在程序运行期间给对像动态的添加职责。与继承相比,装饰者是一种更轻便灵活的做法。装饰者模式的特点:可以动态的给某个对象添加...
  • yisuowushinian
  • yisuowushinian
  • 2016年07月17日 20:00
  • 3395

JAVA设计模式初探之装饰者模式

这个模式花费了挺长时间,开始有点难理解,其实就是 定义:动态给一个对象添加一些额外的职责,就象在墙上刷油漆.使用Decorator模式相比用生成子类方式达到功能的扩充显得更为灵活。 设计初衷:通常...
  • jason0539
  • jason0539
  • 2014年04月01日 09:07
  • 74793

《java与设计模式》之装饰模式详解&Java IO中的装饰器模式

1 概述 在一个项目中,你会有非常多的因素考虑不到,特别是业务的变更,不时的冒出一个需求是很正常的情况。有三个继承关系的类:Father、Son、GrandSon,我们要在Son类上增强一些功能怎么办...
  • chs0113
  • chs0113
  • 2016年05月06日 19:42
  • 7354

【js设计模式笔记---装饰者模式】

装饰者模式 本节讨论的是一种为对象增添特性的技术,它并不使用创建新子类的手段。装饰者模式可以用来透明地把对象包装在具有同样接口的另一对象之中。这样一来,你可以给一个方法添加一些行为,然后将方法调用传递...
  • pigpigpig4587
  • pigpigpig4587
  • 2014年05月21日 11:19
  • 1661

【JS设计模式】装饰者模式

装饰模式的特点 (1) 装饰对象和真实对象有相同的接口。这样客户端对象就能以和真实对象相同的方式和装饰对象交互。 (2) 装饰对象包含一个真实对象的引用(reference) (3) 装饰对象接受所有...
  • itpinpai
  • itpinpai
  • 2015年08月08日 20:42
  • 1404

设计模式-装饰者

  • 2015年11月07日 10:44
  • 4.44MB
  • 下载

设计模式之装饰者(Decorator)

  • 2007年09月27日 14:38
  • 316KB
  • 下载

c# ,设计模式,装饰者模式,星巴兹咖啡

  • 2011年01月01日 00:31
  • 195KB
  • 下载

设计模式的装饰者模式的例子

  • 2011年12月21日 10:58
  • 3KB
  • 下载

云南大学设计模式装饰者模式

  • 2017年11月13日 14:32
  • 6KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS设计模式之装饰者模式
举报原因:
原因补充:

(最多只允许输入30个字)