<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>javascript高级语法17-装饰者模式下</title>

     </head>

     <body>

         <div id="demo2">

         </div>

         <script type="text/javascript">

             //装饰者可以用在类上，也可以用在函数上

             function demo1(){

                 //写一个装饰者函数，函数的目的是把目标函数的返回值变成大写

                 function upperCase(fun){

                     return function(){

                         return fun().toUpperCase();

                     }

                 }

                 //被封装的函数

                 function getDate(){

                     return new Date().toString();

                 }

                 //执行装饰

                 var getDateCaps = upperCase(getDate);

                 document.write(getDate());

                 document.write("<br>")

                 document.write(getDateCaps());

                 /*如果原有的功能不适合你的项目，需要大量扩充原油功能

                  * 并且不想改变原有的接口，那么可以用装饰者模式。

                  */

             }

             //demo1();

             function demo2(){

                 //装饰者完成对函数性能测试的任务

                 var listBuilder = function(el,listSize){

                     this.el = document.getElementById(el);

                     this.size = listSize;

                     //创建列表

                     this.Buildlist = function(){

                         var root = document.createElement("ol");

                         this.el.appendChild(root);

                         for(var i=0;i<this.size;i++){

                             var li = document.createElement("li");

                             root.appendChild(li);

                         }

                     }

                 };

                 var list = new listBuilder("demo2",8000);

                 //list.Buildlist();

                 //利用装饰者检测函数执行的时间

                 var simpleProfiler = function(component){

                     this.component = component;

                     this.ListBuilder = function(){

                         var startDate = new Date().getTime();

                         this.component.Buildlist()

                         var endDate = new Date().getTime();

                         alert(endDate - startDate);

                     }

                 }

                 //new simpleProfiler(list).ListBuilder();

                 //改造为通用的装饰者，可以完成所有函数的效率测试。

                 var simpleProfiler2 = function(component){

                     this.component = component;

                     this.action = function(methodName){

                         var self= this;

                         var method = component[methodName];

                         //如果是函数那就进行装饰

                         if(typeof method == "function"){

                             var startDate = new Date().getTime();

                             method.apply(self.component,arguments);

                             var endDate = new Date().getTime();

                             alert(endDate - startDate);

                         }

                     }

                 }

                 new simpleProfiler2(list).action("Buildlist");

             }

             demo2();

         </script>

     </body>

 </html>

JavaScript设计模式-17.装饰者模式（下）的更多相关文章

  1. 再起航，我的学习笔记之JavaScript设计模式13(装饰者模式)

    装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...

  2. Javascript设计模式之装饰者模式详解篇

    一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改 ...

  3. JavaScript设计模式（装饰者模式）

    一.模拟传统面向对象语言的装饰者模式: 假设我们在编写一个飞机大战的游戏,随着经验值的增加,我们操作的飞机对象可以升级成更厉害的飞机,一开始这些飞机只能发射普通的子弹,升到第二级时可以发射导弹,升到第 ...

  4. JavaScript设计模式(8)-装饰者模式

    装饰者模式 1. 作用: 可用来透明地把对象包装在具有同样接口的另一对象之中,这样可以给一个方法添加一些行为,然后将方法调用传递给原始对象. 可用于为对象增加功能,用来代替大量子类. 装饰者对其组件进 ...

  5. JavaScript设计模式-16.装饰者模式（上）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. javascript设计模式之装饰者模式

    /* * 装饰者模式提供比继承更有弹性的替代方案 * 在不改变原构造函数的情况下,添加新的属性或功能 */ //需要装饰的类(函数) function Macbook() { this.cost = ...

  7. 学习javascript设计模式之装饰者模式

    1.装饰者模式定义:给对象动态添加职责的方式称为装饰者(decorator)模式. js如何实现装饰者模式 通过保存原函数引用方式改写某函数 window.onload = function(){al ...

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

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

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

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

随机推荐

  1. CentOS 6.0下phpvod搭建教程(LAMP+phpvod)

    之所以安装CentOS是因为之前试过RedHat,但是发现RedHat在安装时,无法获取安装源,原因是RedHat系统没有在RHN注册. 网上的很多教程都说可以直接换用CentOS的源,可我小搞里一会 ...

  2. TortoiseSVN本地版本控制管理

    TortoiseSVN 是 Subversion 版本控制系统的一个免费开源客户端.下载地址:https://tortoisesvn.net/downloads.html. 安装好TortoiseSV ...

  3. nmon在secureCRT下显示乱码问题

    # 背景 下载安装了nmon,结果发现显示有问题,如下 # 解决 猜测应该是字体编码问题,查阅了解后,是因为CRT设置问题,需要修改下配置,(之前试用xshell比较棒,但公司禁止试用),如下修改 然 ...

  4. DotNetBar.MetroTilePanel 样式、加载数据、获取数据

    描述下:MetroTilePanel包含子集ItemContainer  子集下面又包含子集MetroTileItem  目前我用到的就是这三层 因为需求所以整个模块全部由代码实现 1.ItemCon ...

  5. 读取本地json文件,转出为指定格式json

    引用添加Json.Net 引用命名空间 using Newtonsoft.Json //读取自定目录下的json文件 StreamReader sr = new StreamReader(@" ...

  6. Asp.NetCore安全验证之JWT

    本文只是介绍了下基于AspNetCore自带的System.IdentityModel.Tokens.Jwt.dll工具在项目中Token的应用. 我这里谈到的很浅显就两点: 一,超时时间 二,数据的 ...

  7. Java多线程编程：Callable、Future和FutureTask浅析（多线程编程之四）

    java多线程-概念&创建启动&中断&守护线程&优先级&线程状态(多线程编程之一)java多线程同步以及线程间通信详解&消费者生产者模式&死锁& ...

  8. Android 多图，大图内存优化

    策略: 1. 图片压缩 如果所需尺寸大于图片原始尺寸,可以压缩图片节省内存. 2. 图片缓存 每个图片加载时都会生成一个 Bitmap.把这些 Bitmap 缓存起来以重用相同的图片,避免重复创建. ...

  9. Javascript中的名词

    BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (Document Object Model ...

  10. 打开win8及以上操作系统的系统已安装程序目录

    Windows 8 的“Metro 界面”里不能像XP和Win7那样,点击“开始”->“程序”,显示系统所有安装的程序,这个功能还是非常有用的,可以帮助我们快速查看系统已经安装的程序!我编写了这 ...