设计模式-装饰者模式

装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责

示例一：页面中有一个登录 button，点击这个 button会弹出登录浮层，与此同时要进行数据上报，
来统计有多少用户点击了这个登录 button

<button id="button" tag="loginBtn">点击</button>

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('打开登录浮层');
}

var log = function() {
  console.log('上报标签为: ' + this.getAttribute('tag'));
}

showLogin = showLogin.after(log); // 打开登录浮层之后上报数据

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

示例二：在使用AJAX请求数据时，经常遇到部分接口需要Token的情况，这种情况也可以用装饰者模式

// aiax
var ajax = function(type, url, param) {
  console.log(param); // 发送 ajax 请求的代码略
};

var getToken = function() {
  return 'Token';
}

// 动态添加token
ajax = ajax.before(function(type, url, param) {
  param.Token = getToken();
});

ajax('get', 'http:// xxx.com/userinfo', { name: 'sven' });