学习javascript设计模式之装饰者模式
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;
学习javascript设计模式之装饰者模式的更多相关文章
- 再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)
装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...
- Javascript设计模式之装饰者模式详解篇
一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改 ...
- JavaScript设计模式-17.装饰者模式(下)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript设计模式-16.装饰者模式(上)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript设计模式(装饰者模式)
一.模拟传统面向对象语言的装饰者模式: 假设我们在编写一个飞机大战的游戏,随着经验值的增加,我们操作的飞机对象可以升级成更厉害的飞机,一开始这些飞机只能发射普通的子弹,升到第二级时可以发射导弹,升到第 ...
- JavaScript设计模式(8)-装饰者模式
装饰者模式 1. 作用: 可用来透明地把对象包装在具有同样接口的另一对象之中,这样可以给一个方法添加一些行为,然后将方法调用传递给原始对象. 可用于为对象增加功能,用来代替大量子类. 装饰者对其组件进 ...
- javascript设计模式之装饰者模式
/* * 装饰者模式提供比继承更有弹性的替代方案 * 在不改变原构造函数的情况下,添加新的属性或功能 */ //需要装饰的类(函数) function Macbook() { this.cost = ...
- 学习javascript设计模式之中介者模式
1.中介者模式的作用就是解除对象与对象之间的紧耦合关系.增加一个中介者对象后,所有的相关对象都通过中介者来通信,而不是互相引用,所以当一个对象发生改变时,只需要通知中介对象即可.中介者使各对象之间耦合 ...
- javascript设计模式学习之十五——装饰者模式
一.装饰者模式定义 装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象.这种为对象动态添加职责的方式就称为装饰者模式.装饰者对象和它所装饰的对象拥有一致的接口,对于用 ...
随机推荐
- *运算和&运算
/* &:取地址运算符 *:指针运算符(或称为间接运算符),取指针所指向的对象的内容 */ int a,b; int *pointer_1, *pointer_2; pointer_1 = & ...
- C# 使用Epplus导出Excel [5]:样式
C# 使用Epplus导出Excel [1]:导出固定列数据 C# 使用Epplus导出Excel [2]:导出动态列数据 C# 使用Epplus导出Excel [3]:合并列连续相同数据 C# 使用 ...
- 【转】Windows 邮件槽(MailSlot)
Windows 邮件槽(MailSlot) 来自<Windows网络编程第二版 中文版> 优点:通过网络,将一条消息广播给一台或多台计算机. 缺点:只允许从客户机到服务器,建立一种不可 ...
- 【Mysql】Mysql主从库搭建过程(爬完坑后整理所得)
Mysql主从数据库搭建流程 新手开始学习mysql主从库,遇到一些问题,总结后写出以下流程 下面以5.7.23版本为例介绍 第一步:去官网下载5.7.23版本的免安装压缩包形式的mysql文件,贴上 ...
- 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 ...
- IIS7.0/8.0的错误HTTP Error 500.19 - Internal Server Error ,错误代码为0x80070021
最近在部署项目的时候,总是出现了这个问题. 大概原因为IIS7.0的安全设定相比前版本有很大的变更.IIS7.0的安全设置文件在%windir%\system32\inetsrv \config\ap ...
- laravel中redis各方法的使用
在laravel中使用redis自带方法的时候会发现许多原生的方法都不存在了,laravel对其进行了重新的封装但是在文档中并没有找到相关的资料最后在 \vendor\predis\predis\sr ...
- 【mysql】mysql 备份脚本
#! /bin/bash HOST=localhost USER=root PASSWORD=password DATE_STR=$(date '+%F--%T') ERROR_LOG=/usr/ ...
- 12.Yii2.0框架视图模版继承与模版相互调用
目录 模板渲染的两种方式 加载视图 index.php 和 about.php 页面 建立控制器HomeController php 新建模板 home\index.php 新建模板home\abou ...
- 01 Django基础知识
相关概念 软件框架 一个公司是由公司中的各部部门来组成的,每一个部门拥有特定的职能,部门与部门之间通过相互的配合来完成让公司运转起来. 一个软件框架是由其中各个软件模块组成的,每一个模块都有特定的功能 ...