学习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;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步