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. 热门IOS 第三方库

    综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型,看完,还敢自称”精通iOS开发”吗? https://github.com/syedhali/EZ ...

  2. 解决Ubuntu系统中文乱码显示问题,终端打开文件及查看目录

    解决Ubuntu系统中文乱码显示问题 [日期:2014-02-20] 来源:Linux社区  作者:njchenyi [字体:大 中 小]   我是先安装了Ubuntu 12.04 Server,然后 ...

  3. Android网络开发之OkHttp--基本用法实例化各个对象

    1.实例化OkHttpClient对象,OkHttpClient包含了以下属性,以及set()和get()方法.但并没有包含具体的执行方法,详情见源码. //实例化OkHttpClent对象 priv ...

  4. higncharts 编辑Highcharts.com链接

    credits: {             text: 'Example.com',             href: 'http://www.example.com'          }, 只 ...

  5. jquery全选框的实现

    函数实现的话: head里加入函数实现 <script language="javascript" type="text/javascript"> ...

  6. Quick Cocos2dx 与 DragonBones

    照着官方的例子试验了一下DragonBone的使用,代码如下: local AnotherScene = class("AnotherScene", function() retu ...

  7. [Cocos2d-x]Lua 资源热更新

    什么是热更新 所谓的热更新,指的是客户端的更新. 大致的流程是,客户端在启动后访问更新的URL接口,根据更新接口的反馈,下载更新资源,然后使用新的资源启动客户端,或者直接使用新资源不重启客户端. 热更 ...

  8. Java 的Object类

    1.toString()是Objectde的方法,如果不重写,直接输出对象或者用对象调用toString()输出是会输出包名.类名@对象哈希码的无符号十六进制表示 子类如果重写了这个方法,可以隐式调用 ...

  9. Mac上ssh无法登录的问题

    今天起来发现阿里云ssh无法登录了 出现一条警告: WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 开始打算清理know_hosts发现失败,清了根本 ...

  10. PHPCMS快速建站系列之搜索功能

    默认模板的搜索功能代码 <div class="bd"> <form action="{APP_PATH}index.php" method= ...