学习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;

      打开登录浮动层

      上报标签showlog