<!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. java并发编程实战：第六章----任务执行

    任务:通常是一些抽象的且离散的工作单元.大多数并发应用程序都是围绕"任务执行"来构造的,把程序的工作分给多个任务,可以简化程序的组织结构便于维护 一.在线程中执行任务 任务的独立性 ...

  2. C#使用LitJson对Json数据解析

    JSON 介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript(Standard ECMA-262 3rd Edition - ...

  3. SQL 增加列

    -- 判断是否存在该列 if exists(SELECT * FROM syscolumns WHERE id=object_id('@Table') and name='@COLUMN') ALTE ...

  4. 【转】Sql Server去除所有空格

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak 1.普通空格: 前后的空格,使用LT ...

  5. JS-获取任意html节点属性

    获取节点属性:   确定获取

  6. 【OCP题库-12c】最新CUUG OCP 071考试题库（70题）

    70.(31-2)choose the best answer: View the Exhibit and examine the structure of the Book table. The B ...

  7. IntelliJ IDEA 配置JSP & Servlet开发环境

    首先我们要安装和配置好JAVA和TOMCAT,这里不再详细描述 下载地址: JAVA:https://www.oracle.com/technetwork/java/javase/downloads/ ...

  8. Linux 历史信息history显示执行时间

    fc命令 fc命令自动掉用vi编辑器修改已有历史命令,当保存时立即执行修改后的命令,也可以用来显示历史命令.fc命令编辑历史命令时,会自动调用vi编辑器.fc保存文件后,会自动执行所编辑过的命令. 测 ...

  9. 爬虫实战3：使用request,bs4爬动态加载图片

    参考网站:https://blog.csdn.net/Young_Child/article/details/78571422 在爬的过程中遇到的问题: 1.被ban:更改header的User-Ag ...

  10. Python内置函数查询表——总结篇

    Python3.5版本中的68个内置函数,按顺序逐个进行了自认为详细的解析,现在是时候进行个总结了.为了方便记忆,将这些内置函数进行了如下分类:     数学运算(7个)     类型转换(24个) ...