12.第三篇:装饰者模式

本文摘自 《JavaScript 设计模式》张容铭 著 版权归原作者所有

  • 装饰旧方法(已有的功能对象)。修改历史代码的时候,可以用装饰者模式,在不修改原有代码的基础上,对旧代码的事件进行修改。
var con = document.getElmentById('con');
con.onclick = function(){
  console.log("old fn");
}
var decorator = function(id,fn){
  var con = document.getElmentById('con');
  // 如果该DOM已有绑定事件
  if(typeof dom.onclick === 'function'){
    var oldFun = dom.onclick;
    // 绑定新事件
    dom.onclick = function(){
      // 执行老事件
      oldFun();
      //执行新绑定的事件
      fn();
    }
  }else{
    // 如果该DOM没有绑定事件,则为DOM添加事件
    dom.onclick = fn;
  }
}
decorator('con',function(){
  console.log('new function')
})

你可能感兴趣的:(12.第三篇:装饰者模式)