设计模式-装饰器模式

简介

装饰器模式是不改变原对象的前提下动态的改变或者为对象添加职责的一种模式，这在JavaScript这种语言中其实是非常容易的。

const obj = {
  name:"stev"
}
obj.name += "en"

Javascript中的装饰器模式

Javascript中采用保存引用的方式可以简单的实现为函数添加功能，比如常见的添加监听器，我们不知道是否已经存在的情况下，防止对其覆盖，我们可以采用装饰器进行添加功能

const _onload = window.onload || function(){}
window.onload = function(){
  _onload();
  console.log("这是添加的功能");
}

使用AOP进行进行装饰

回顾AOP的before或者after函数

Function.prototype.before = function(beforeFn){
  const _self = this;
  return function(){
    beforeFn.apply(this,arguments);
    _self.apply(this,arguments);
  }
}
Function.prototype.after = function(afterFn){
  const _self = this;
  const ret = null;
  return function(){
    _self.apply(this,arguments);
    ret = afterFn.apply(this,arguments);
    return ret
  }
}

得益于传递arguments，我们可以轻松的在函数执行前或者执行后做一些事

function fn(){
  console.log("function执行");
}
fn = fn.before(function(){
  console.log("function执行前做一些事");
}).after(function(){
  console.log("function执行后做一些事");
})

fn()
//function执行前做一些事
//function执行
//function执行后做一些事

可以在ajax请求前进行表单验证等，非常的有用

总结

装饰器模式非常类似与代理模式，代理模式更偏向于不方便直接访问某对象，而引入代理。装饰器模式在于动态的添加行为