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>

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

  1. JS设计模式——12.装饰者模式

    装饰者模式概述 本章讨论的是一种为对象添加特性的技术,她并不使用创建新子类这种手段. 装饰者模式可以用来透明的把对象包装在具有同样接口的另一个对象中.这样一来,就可以给一个方法添加一些行为,然后将方法 ...

  2. js原生设计模式——3简单工厂模式\简单工厂模式封装简单对象

    1.Factory基本写法 <!DOCTYPE html><html lang="en"><head>    <meta charset= ...

  3. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 实践GoF的23种设计模式：装饰者模式

    摘要:装饰者模式通过组合的方式,提供了能够动态地给对象/模块扩展新功能的能力.理论上,只要没有限制,它可以一直把功能叠加下去,具有很高的灵活性. 本文分享自华为云社区<[Go实现]实践GoF的2 ...

  5. Java 设计模式泛谈&装饰者模式和单例模式

    设计模式(Design Pattern) 1.是一套被反复使用.多人知晓的,经过分类编目 的 代码设计经验总结.使用设计模式是为了可重用代码,让代码更容易维护以及扩展. 2.简单的讲:所谓模式就是得到 ...

  6. C#设计模式(9)——装饰者模式（Decorator Pattern）

    一.引言 在软件开发中,我们经常想要对一类对象添加不同的功能,例如要给手机添加贴膜,手机挂件,手机外壳等,如果此时利用继承来实现的话,就需要定义无数的类,如StickerPhone(贴膜是手机类).A ...

  7. 设计模式之装饰者模式-java实例

    设计模式之装饰者模式 需求场景 我们有了别人提供的产品,但是别人提供的产品对我们来说还不够完善,我们需要对这个产品的功能进行补强,此时可以考虑使用装饰者模式. 我们已经有了产品,而且这个产品的功能非常 ...

  8. Java设计模式 - - 单例模式 装饰者模式

    Java设计模式 单例模式 装饰者模式 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 静态代理模式:https://www.cnblogs.com/StanleyBlogs/p/1 ...

  9. python 设计模式之装饰器模式 Decorator Pattern

    #写在前面 已经有一个礼拜多没写博客了,因为沉醉在了<妙味>这部小说里,里面讲的是一个厨师苏秒的故事.现实中大部分人不会有她的天分.我喜欢她的性格:总是想着去解决问题,好像从来没有怨天尤人 ...

随机推荐

  1. ARM汇编指令集

    一.跳转指令.跳转指令用于实现程序流程的跳转,在ARM程序中有以下两种方法可以实现程序流程的跳转. Ⅰ.使用专门的跳转指令.Ⅱ.直接向程序计数器PC写入跳转地址值. 通过向程序计数器PC写入跳转地址值 ...

  2. docker k8s 1.3.8 + flannel

    docker k8s + flannel kubernetes 是谷歌开源的 docker 集群管理解决方案. 项目地址: http://kubernetes.io/ 测试环境: node-1: 10 ...

  3. opencart 图片管理器 500错误

    网站点击文件夹打不开返回500错误,通过ftp删除大于1M的图片文件即可

  4. Enterprise Architect与startUML表示UML常用图

    转自:http://www.cnblogs.com/alexlee73/archive/2011/11/05/2237294.html 附下载地址:http://download.csdn.net/d ...

  5. mysql 索引对于select速度提升作用实验

    说明:News2在News的基础上把is_active加上索引. mysql> select count(*) from News2 where is_active=1; +---------- ...

  6. C++ Builder多线程编程技术经验谈（转）

    源:C++ Builder多线程编程技术经验谈 线程之可行性   在很多情况下,可能需要为程序创建线程.这里给出其中一些可能性: (1)如果创建的是一个多文档接口(Multiple Document ...

  7. CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

    1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...

  8. MySql绿色版安装过程记录

    作为程序猿,要多动手,周末趁着有空且笔记本刚刚装了系统,所以就配置了下绿色版的MySQL. 多动手,多动手,多动手. 多总结,多总结,多总结. 以下为正文: 一.下载MySQL绿色版: 1.这个地址: ...

  9. zookeoper在root下设置开机启动

    1 准备工作 1) 切换到/etc/rc.d/init.d/目录下 2) 创建zookeeper文件:touch zookeeper 3)更新权限:chmod +777 zookeeper 4)编辑文 ...

  10. kafka第三篇--安装使用

    说明:直接下载二进制包可省略安装过程,省略很多麻烦. 1单机 安装 安装过程,参考官网: > tar xzf kafka-<VERSION>.tgz > cd kafka-&l ...