js原生设计模式——12装饰者模式

1、面向对象模式装饰者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象—Decorator装饰者模式</title>
    <script type="text/javascript">
    //给实例对象(注:不影响类)动态添加职责的方式叫做Decorator装饰者模式,较继承,此方法更为灵活。
    //先声明一个原始飞机类
    var Plane = function(){};
    Plane.prototype.fire = function(){
        console.log(‘发射子弹‘);
    }
    //接下来声明两个装饰类,他们之间靠this所指向的实例对象连接
    var MissleDecorator = function(plane){//发射导弹装饰类
        this.plane = plane;
    }
    MissleDecorator.prototype.fire = function(){
        this.plane.fire();
        console.log(‘发射导弹‘);
    }
    var AtomDecorator = function(plane){//发射原子弹装饰类
        this.plane = plane;
    }
    AtomDecorator.prototype.fire = function(){
        this.plane.fire();
        console.log(‘发射原子弹‘);
    }
    //测试用例
    var plane = new Plane();
    plane = new MissleDecorator(plane);//技巧在于这里的实例传参,起到纽带作用
    plane = new AtomDecorator(plane);
    plane.fire();
    //本例已经通过验证
    </script>
</head>
<body>
</body>
</html>

2、函数式编程实现装饰者效果——其实是职责链模式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>函数式编程实现装饰者效果——其实是职责链模式</title>
</head>
<body>

</body>
<script type="text/javascript">
    var plane = {   //声明单体对象plane
        fire:function(){
            console.log(‘发射子弹‘);
        }
    }
    var missleDecortor = function(){   //声明“发射导弹”功能函数
        console.log(‘发射导弹‘);
    }
    var atomDecortor = function(){   //声明“发射原子弹”功能函数
        console.log(‘发射原子弹‘);
    }
    //缓存原plane对象的fire模块
    var fire1 = plane.fire;
    //重写,拓展plane.fire
    plane.fire = function(){
        fire1();
        missleDecortor();   //拓展发射导弹功能
    }
    //再次缓存,再次重写
    var fire2 = plane.fire;
    plane.fire = function(){
        fire2();
        atomDecortor();
    }
    plane.fire();
</script>
</html>

时间: 2024-10-28 11:14:44

js原生设计模式——12装饰者模式的相关文章

设计模式 2 —— 装饰者模式

设计模式目录: 设计模式 1 ——观察者模式 设计模式 2 —— 装饰者模式

Design Pattern 设计模式 Decorator 装饰者模式

1 设计一个基类 2 继承这个基类,并包含这个基类的一个对象 3 创建继承类的时候,初始化这个基类,因为是基类指针,所以可以是所有基类的衍生类对象,那么就可以叠加任意多个衍生类对象了. 关键是在衍生类中包含一个基类对象,然后有了继承和包含两重关系,可以使得一个类一个类对象叠加,达到装饰目的. 等于是创建了一个对象指针链表,一个一个对象发挥其相应的作用. 下面程序装饰一个桌子,同时包含释放内存的处理. 关键要知道基类的析构函数必须使用虚函数,为什么? 1 如果基类不是析构函数,那么如果衍生类中包含

java设计模式之 装饰器模式

适AT java设计模式之 装饰器模式 装饰器模式 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构. 这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,动态给一个对象添提供了额外的功能. 我们通过下面的实例来演示装饰器模式的用法.模拟一个人从想吃饭.找饭店.享受美食.结束吃饭的过程 代码展示: 首先创建一个被修饰的接口 Eat package deco

设计模式之装饰者模式(Decorator)

1.定义 装饰者模式动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更有弹性的替代方案 2.类图 Component抽象构件:Component是一个接口或者是抽象类,就是定义我们最核心的对象,也就是最原始的对象.在装饰者模式中,必然有一个最基本.最核心.最原始的接口或抽象类充当Component抽象构件. ConcreteComponent具体构件:ConcreteComponent是最核心.最原始.最基本的接口或抽象类的实现,你要装饰的就是它. Decorator装饰角色:一般是一

设计模式之装饰者模式(三)

欢迎大家的持续关注.上一次,我们结合第一篇推导出来的类图,到第二篇根据类图进行实际代码的编写,对装饰者模式有了一个整体的概念以及实战.不知道对你帮助如何呢?小编已经有门道了,看完接下来的一部分,你会恍然大悟,原来实际编码中你一直在用装饰者模式. 真实世界的装饰者:Java I/O 看到标题,是不是就很想往下看,到底是I/O中的什么呢,让你早已经拥有了装饰者模式的实践?就如书上给的描述,你第一次(还有第二次和第三次)看到这些API发出"哇"的惊叹时,放心,你不是唯一收到惊吓的人.下面,我

掌握设计模式之装饰者模式

![](http://ww4.sinaimg.cn/large/006tNc79ly1g4ztauvhzej30p00dw45p.jpg) ## 前言 当应用开发中,我们要为一个对象在原有功能上进行扩展增强时,往往采用继承的方式,而继承过多时就会使得功能类更加复杂,不利于维护,而设计模式中装饰者模式可以帮助我们更好对应这种场景,装饰者模式可以做到让对象能够动态地进行功能扩展,而不影响其他对象. 那究竟它是如何实现的呢,又如何实际应用呢,就让我们一起来学习下这个模式吧. ## 模式定义 装饰者模式

JS设计模式之装饰者模式

装饰者模式概述 在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户更复杂的需求 实际需求 在已有的代码基础上,为每个表单中的input默认输入框上边显示一行提示文案,当用户点击输入框时文案消失 原有代码: var telInput = document.getElementById('tel_input'); var telWarnText = document.getElementById('tel_warn_text'); input.onclick =

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

装饰者模式:在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象 装饰模式的特点 (1) 装饰对象和真实对象有同样的接口.这样client对象就能以和真实对象同样的方式和装饰对象交互.(2) 装饰对象包括一个真实对象的引用(reference)(3) 装饰对象接受全部来自client的请求. 它把这些请求转发给真实的对象.(4) 装饰对象能够在转发这些请求曾经或以后添加一些附加功能.这样就确保了在执行时.不用改动给定对象的结构就能够

[设计模式] 9 装饰者模式 Decorator

转:http://www.jellythink.com/archives/171#prettyPhoto 什么是装饰模式? 在GOF的<设计模式:可复用面向对象软件的基础>一书中对装饰模式是这样说的:动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 装饰模式能够实现动态的为对象添加功能,是从一个对象外部来给对象添加功能.通常给对象添加功能,要么直接修改对象添加相应的功能,要么派生对应的子类来扩展,抑或是使用对象组合的方式.显然,直接修改对应的类这