<!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. Template Method Design Pattern in Java

    Template Method is a behavioral design pattern and it’s used to create a method stub and deferring s ...

  2. polymer技巧

    1.添加一个div元素 我们完全可以自己造一个这样的东西出来,比如下面例子我们给 div 元素添加一个 is="demo-test" <script> var Poly ...

  3. prog1，2，3

    1.第一版本程序Prog1:+ 给定一个数组,实现数组元素求和:具体要求:实现对一维数组(a[100])的所有元素相加运算.+ 数据准备:a)数组长度:100:b)数组数据来源:实验数据A列:1~10 ...

  4. 生成Webservice的两种方式(Axis2,CXf2.x)

    一天之中,用了各种方式生成webservice,就是为了node.js能和程序顺利通信.最终还是用axis2成功了.工作基本完成了,现在可以总结一下. 关于生成方式,推荐使用eclipse,比较方便, ...

  5. [转载]WCF系列_分布式事务(下)

    浏览到chnking的WCF的分布式事务处理不错,转载过来分享一下. 1. WCF分布式事务例子这里也用转账的例子说事.用户在系统A和系统B都有账户,账户间的资金可以互转,系统A的资金减少多少,系统B ...

  6. 安装git出现templates not found的问题

    背景 goods.api需要在新机器上部署,该机器上没有安装git,需要安装git,查询git版本为2.4.5-1.el6 ,使用yum 一顿安装后,执行git clone命令告知warning: t ...

  7. ASP.NET MVC5实现伪静态

    目录 1.什么是伪静态?为什么要实现伪静态? 2.实现APS.NET MVC伪静态的方式有哪些? 3.那么如何实现使用ASP.NET MVC5的伪静态呢? (1)在路由注册中启用特性路由 (2)为需要 ...

  8. asp.net 错误页面自定义

    在我们上网浏览信息的时候,总会有出现404页面的时候,在我们开发的时候也可以自定义这些页面.刚回这次项目中也使用到了,就在网上找到一些方法,今天就把这些方法重新写一遍加深记忆. 在项目的web.con ...

  9. 考取RHCE认证的历程，总结的经验

    昨天去考试的,今天下午结果出来了,达到了我的预期.成功的获取了RHCE认证,以后我也是有证的人咯~,开个玩笑. 其实去年的时候我就曾经想要去考取的,我原来一直以为考取RHCE认证时考题都是英文的呢?因 ...

  10. Aircrack-ng无线破解总结

    过年回来家,奈何没网,实属无奈,只好看破解教程,看能否破出来.于是总结如下 测试环境在linux平台下,我用的是ubuntu环境.ubuntu安装可以直接用sudo apt-get install a ...