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. js 鼠标事件

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  2. c# toolstrip控件怎么把左边的几个小点去掉？？

    选中你的toolstrip 然后属性属性中有个 GripStyle 设置Hidden

  3. 网页被卷去的高： document.body.scrollTop;

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  4. 计算机学院大学生程序设计竞赛（2015’12） 1009 The Magic Tower

    #include<cmath> #include<cstdio> #include<cstring> #include<algorithm> using ...

  5. js优化与注意点

    1.使用尽可能少的全局变量.尽量用var来声明变量,避免隐式使用全局变量. 隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力. 通过var创建的全局变量(任 ...

  6. 串口通信中ReadFile和WriteFile的超时详解！

    源:串口通信中ReadFile和WriteFile的超时详解! 在用ReadFile和WriteFile读写串行口时,需要考虑超时问题.如果在指定的时间内没有读出或写入指定数量的字符,那么ReadFi ...

  7. nginx 支持pathinfo

      location ~ \.php { #去掉$ root H:/PHPServer/WWW; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.ph ...

  8. 苹果应用商店AppStore审核中文指南

    目录 1. 条款与条件2. 功能3. 元数据.评级与排名4. 位置5. 推送通知6. 游戏中心7. 广告8. 商标与商业外观9. 媒体内容10. 用户界面11. 购买与货币12. 抓取与聚合13. 设 ...

  9. 《算法导论》插入排序----InsertSort

    算法导论,插入排序 public class InsertSort { public static double [] sort(double [] num) { for(int i =1; i< ...

  10. MIPI-3

    上一篇文章讲了以下D_PHY层,这只是最底层的,针对于显示,上层由分出了四种,由专门的工作组进行定义,显示器方面叫做display wrok group,主要分为 DSC(display comman ...