装饰者模式

可以动态给某个对象添加额外的职责。

• 传统面向对象的装饰者模式

var plane = new Plane();
plane = new MissileDecorator( plane );
plane = new AtomDecorator( plane );
plane.fire();

没有真正改变对象，只是将一个对象放到了另一个对象。另外接口必须一致：对于客户来说是透明的，只需要记住一个接口。对于开发者来说，可以任意的嵌套多个装饰对象。

• javaScript装饰者

var plane = {
    fire: function(){
        console.log( '发射普通子弹' );
    }
}
var missileDecorator = function(){
    console.log( '发射导弹' );
}
var atomDecorator = function(){
    console.log( '发射原子弹' );
}

var fire1 = plane.fire;
plane.fire = function(){
    fire1();
    missileDecorator();
}

var fire2 = plane.fire;
plane.fire = function(){
    fire2();
    atomDecorator();
}

plane.fire();

直接改写了对象的方法，根据需要添加响应的方法。并不需要先创建类。

• 装饰函数
  不想去碰原函数，在不改变函数源代码的情况下，添加新功能。
  保存原引用。

var a = function(){
    console.log(1);
}
// 保存原引用
var _a = a;

a = function(){
    _a();
    console.log(2);
}
a()

存在的问题：

1. _a 中间变量的维护
2. this 指向可能被劫持 p214

• 用AOP 装饰函数
  Funciton.prototype.before:
  接收一个函数作为参数；返回一个代理函数，代理将请求转发给新增加的函数和原函数，并且保证执行顺序。

Function.prototype.before = function( beforefn ){
    var __self = this; 
    return function(){
        beforefn.apply( this, arguments );
        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 );
        return ret;
    }
};

• 实例：数据统计上报
  场景：点击登录按钮，弹出浮层，上报统计多少个用户点击数据。
  常规方法：

var showLogin = function(){
    console.log( '打开登录浮层' );
    // 上报数据
    log( this.getAttribute( 'tag' ) );
}
var log = function( tag ){
    console.log( '上报标签为: ' + tag );
    // ...
}
document.getElementById( 'button' ).onclick = showLogin;

缺点：showLogin函数要负责两个功能：1.打开浮窗，2.上报数据。两个功能耦合在一起了。

优化方法：

var showLogin = function(){
    console.log( '打开登录浮层' );
}
var log = function(){
    console.log( '上报标签为: ' + this.getAttribute( 'tag' ) );
}

showLogin = showLogin.after( log ); 
document.getElementById( 'button' ).onclick = showLogin;

• 实例：改变函数参数
  利用arguments的动态性

var func = function(param){
    console.log(param)
}

func = func.before(function(param){
    param.b = 'b'  // 增加属性
})

func({a:'a'}) // 输出：{a:"a", b:"b"}

实际场景：
发送ajax请求时加上Token参数。

ajax = ajax.before(function(type,url,param){
    param.Token = getToken();
})

• 实例：表单验证

普通方法：
将验证函数和提交函数分离，如果验证通过，再提交。

var formSubmit = function(){
    if ( validata() === false ){ // 校验未通过
        return;
    }
    var param = {
        username: username.value,
        password: password.value
    }
    ajax( 'http:// xxx.com/login', param );
}

上面validata 和 formSubmit 没有完全分离。

优化方法：

改写Function.prototype.before

Function.prototype.before = function( beforefn ){
    var __self = this;
    return function(){
        if ( beforefn.apply( this, arguments ) === false ){
            return;
        }
        return __self.apply( this, arguments );
    }
}

formSubmit = formSubmit.before( validata );

submitBtn.onclick = function(){
    formSubmit();
}