可以动态给某个对象添加额外的职责。
- 传统面向对象的装饰者模式
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()
存在的问题：
- _a 中间变量的维护
- 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();
}
