javascript的装饰者模式Decorator

刚开始看这段代码有点绕,现在回过头来看,so easy! 

Function.prototype.before = function(beforefn){
    var _self = this;
    return function(){
        beforefn.apply(this,arguments);  //this指向beforefn
        return _self.apply(this,arguments);
    }
}

Function.prototype.after = function(afterfn){
    var _self = this;
    return function(){
        var ret = _self.apply(this,arguments);
        afterfn.apply(this,arguments);//this指向afterfn
        return ret;
    }
}

 对于上面的代码我不想多说,都很简单,但是将before和after定义在原型上面,有点污染原型的意思,所以再次进行变通:

var before = function(fn,beforefn){
    return function(){
        beforefn.apply(this,arguments);
        return fn.apply(this,arguments);
    }
}
var a = before(function(){console.log(1)},function(){console.log(2)});
a = before(a,function(){console.log(3)})
a()
//3 2 1

before函数传入两个函数,一个是原来函数,另外是要提前执行的函数,方法体内部先执行beforefn,后执行原函数,this指向不被劫持,仍然保持各自函数的this环境。

其实这是AOP(Aspect Oriented Programming)"面向切面编程"的一种思想,对业务逻辑的各个部门进行隔离,从而使得业务逻辑各部分之间耦合度降低,提高程序的可重用性。

AOP说白了就是在不修改源代码的情况下给程序动态统一添加功能的一种技术,javascript的装饰者模式就是AOP编程的一种编程思想体现。

装饰者模式的应用场景很多:比如,分离业务代码,数据统计,还可以动态改变函数参数,插件式的表单验证等。

可以看出装饰者模式的特点:

1,在不改变原对象的代码结构下进行功能的添加;

2,装饰对象和原对象具有相同的接口,也就是说,可以以原对象的相同使用方式来使用装饰对象。

3,装饰对象中包含原对象的引用,就是说装饰对象是原对象经过包装后的对象

【完】

 

posted @ 2018-12-12 14:54  tangjiao_Miya  阅读(205)  评论(0编辑  收藏  举报