1、装饰者模式定义:给对象动态添加职责的方式称为装饰者(decorator)模式。

js如何实现装饰者模式

通过保存原函数引用方式改写某函数

window.onload = function(){alert(1);}
var _oldonload = window.onload || function(){};
window.onload = function(){
    _oldonload();
    alert(2);
}

缺点:1、_oldonload需维护。 2、this被劫持。如document.getElementById this会指向window。

AOP装饰函数:

Function.prototype.before = function(beforefn){
    var __self = this;//保存原函数的引用
    return function(){//返回了包含原函数和新函数的代理函数
        beforefn.apply(this,arguments);//执行新函数,且保证this不被劫持,新函数接受的参数也会原封不动被传入原函数,新函数和原函数之间执行
        return __self.apply(this,arguments);//执行原函数并返回原函数的执行结果,并且保证this不被劫持
    }
}
Function.prototype.after = function (afterfn){
    var __self = this;
    return function (){
        var ret = __self.apply(this,arguments);
        afterfn.apply(this,arguments);
        return ret;
    }
}

var t1 = function(param){
    //alert(111);
    console.log(param);//{a:"a",name:"sss"}
}

var t2 = t1.before(function(param){
    //alert(222);
    param.name = 'sss';
})
t2({a:'a'});

//实例一

      var showlogin = function(){
console.log("打开登录浮动层"); } var log = function(){
console.log('上报标签'+this.getAttribute("tag"));
} showlogin=showlogin.after(log);
document.getElementById("btn").onclick= showlogin;
      打开登录浮动层
      上报标签showlog

学习javascript设计模式之装饰者模式的更多相关文章

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

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

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

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

  3. JavaScript设计模式-17.装饰者模式(下)

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

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

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

  5. JavaScript设计模式(装饰者模式)

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

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

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

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

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

  8. 学习javascript设计模式之中介者模式

    1.中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象后,所有的相关对象都通过中介者来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介对象即可.中介者使各对象之间耦合 ...

  9. javascript设计模式学习之十五——装饰者模式

    一.装饰者模式定义 装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.这种为对象动态添加职责的方式就称为装饰者模式.装饰者对象和它所装饰的对象拥有一致的接口,对于用 ...

随机推荐

  1. *运算和&运算

    /* &:取地址运算符 *:指针运算符(或称为间接运算符),取指针所指向的对象的内容 */ int a,b; int *pointer_1, *pointer_2; pointer_1 = & ...

  2. C# 使用Epplus导出Excel [5]:样式

    C# 使用Epplus导出Excel [1]:导出固定列数据 C# 使用Epplus导出Excel [2]:导出动态列数据 C# 使用Epplus导出Excel [3]:合并列连续相同数据 C# 使用 ...

  3. 【转】Windows 邮件槽(MailSlot)

    Windows 邮件槽(MailSlot) 来自<Windows网络编程第二版 中文版> 优点:通过网络,将一条消息广播给一台或多台计算机.   缺点:只允许从客户机到服务器,建立一种不可 ...

  4. 【Mysql】Mysql主从库搭建过程(爬完坑后整理所得)

    Mysql主从数据库搭建流程 新手开始学习mysql主从库,遇到一些问题,总结后写出以下流程 下面以5.7.23版本为例介绍 第一步:去官网下载5.7.23版本的免安装压缩包形式的mysql文件,贴上 ...

  5. com.sun.org.apache.xerces.internal.impl.io.MalformedByteSequenceException: 3 字节的 UTF-8 序列的字节 x 无效

    在启动Tomcat项目时,控制台报错:nested exception is com.sun.org.apache.xerces.internal.impl.io.MalformedByteSeque ...

  6. IIS7.0/8.0的错误HTTP Error 500.19 - Internal Server Error ,错误代码为0x80070021

    最近在部署项目的时候,总是出现了这个问题. 大概原因为IIS7.0的安全设定相比前版本有很大的变更.IIS7.0的安全设置文件在%windir%\system32\inetsrv \config\ap ...

  7. laravel中redis各方法的使用

    在laravel中使用redis自带方法的时候会发现许多原生的方法都不存在了,laravel对其进行了重新的封装但是在文档中并没有找到相关的资料最后在 \vendor\predis\predis\sr ...

  8. 【mysql】mysql 备份脚本

    #! /bin/bash   HOST=localhost USER=root PASSWORD=password DATE_STR=$(date '+%F--%T') ERROR_LOG=/usr/ ...

  9. 12.Yii2.0框架视图模版继承与模版相互调用

    目录 模板渲染的两种方式 加载视图 index.php 和 about.php 页面 建立控制器HomeController php 新建模板 home\index.php 新建模板home\abou ...

  10. 01 Django基础知识

    相关概念 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模块都有特定的功能 ...