裝飾者模式:給對(duì)象動(dòng)態(tài)添加職責(zé)的方式就是裝飾者模式采记,能夠在不改變?cè)瓕?duì)象的情況下套才,在運(yùn)行的時(shí)候給對(duì)象添加新的職責(zé)乎完。
參考《javascript設(shè)計(jì)模式與開發(fā)實(shí)踐》
裝飾函數(shù)
如果在給一個(gè)函數(shù)或?qū)ο筇砑庸δ艿臅r(shí)候不想動(dòng)原函數(shù)掰读,或者原函數(shù)是別的程序員寫的松逊,這時(shí)候可以通過引用來增加函數(shù)功能
var a=function(){ //構(gòu)造函數(shù)
alert(1);
};
var _a=a; //_a作為中間變量
a=function(){ //重新賦值a變量
_a(); //執(zhí)行a函數(shù)
alert(2); //添加的功能
}
下面重點(diǎn)是介紹一個(gè)AOP的例子躺屁,AOP是面向切面編程,在下面的函數(shù)運(yùn)行的時(shí)候经宏,可以給把函數(shù)看做有一個(gè)生命周期犀暑,分為 運(yùn)行前(before),運(yùn)行中烁兰,運(yùn)行后(after)耐亏。在運(yùn)行前,運(yùn)行后可以給函數(shù)對(duì)象添加不同的職責(zé)沪斟,這些添加的職責(zé)不會(huì)影響原函數(shù)對(duì)象的運(yùn)行广辰。
在javascript中幾乎一切都是對(duì)象,函數(shù)作為一等對(duì)象主之,可以作為函數(shù)的參數(shù)傳遞轨域,所以在js中使用裝飾者模式的時(shí)候后很大的便利性。
AOP的標(biāo)準(zhǔn)模型
//argument對(duì)象是函數(shù)調(diào)用時(shí)杀餐,隱式傳遞的函數(shù)參數(shù)
Function.prototype.before = function( beforefn ){
var __self = this; // 保存原函數(shù)的引用
return function(){ // 返回包含了原函數(shù)和新函數(shù)的"代理"函數(shù)
beforefn.apply( this, arguments ); // 執(zhí)行新函數(shù)干发,且保證this
// 不被劫持,新函數(shù)接受的參數(shù)也會(huì)被原封不動(dòng)地傳入原函數(shù)史翘,新函數(shù)在原函數(shù)之前執(zhí)行
return __self.apply( this, arguments ); // 執(zhí)行原函數(shù)并返
//回原函數(shù)的執(zhí)行結(jié)果枉长, 并且保證this 不被劫持
}
}
Function.prototype.after = function( afterfn ){
var __self = this;
return function(){
var ret = __self.apply( this, arguments );
afterfn.apply( this, arguments );
return ret;
}
};
實(shí)例:點(diǎn)擊按鈕時(shí)彈框之后統(tǒng)計(jì)彈框的參數(shù)
//log函數(shù)作為參數(shù)傳遞
Function.prototype.after = function( afterfn ){
var __self = this; //保存原函數(shù)的引用冀续,_在js中是可以使用的可以作為一個(gè)私有方法和變量的起始標(biāo)志
return function(){ //返回函數(shù)復(fù)合體
var ret = __self.apply( this, arguments );//原函數(shù)調(diào)用
afterfn.apply( this, arguments );//after函數(shù)調(diào)用
return ret; //返回原函數(shù)
}
};
var showLogin = function(){
console.log( '打開登錄浮層' );
}
var log = function(){
console.log( '上報(bào)標(biāo)簽為: ' + this.getAttribute( 'tag' ) );
}
showLogin = showLogin.after( log ); // 打開登錄浮層之后上報(bào)數(shù)據(jù)
document.getElementById( 'button' ).onclick = showLogin;
```
在javascript中。面向?qū)ο缶幊毯秃瘮?shù)式編程是不矛盾的必峰。兩者結(jié)合起來威力更大洪唐。隨著學(xué)習(xí)的深入,你會(huì)覺得滿滿的都是套路和模式吼蚁。到了這一步學(xué)習(xí)有點(diǎn)欲罷不能了凭需。學(xué)習(xí)javascript真是有意思。