9.第三篇：结构型设计模式

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

外观模式

• 在对页面dom绑定原生点击事件的时候，dom2级会覆盖dom0级的操作；IE9不兼容addEventListener,而不支持dom2级的浏览器，又只能用dom0级的onclick。外观模式可以把一些兼容方法或者复杂的方法简化。

function addEvent(dom,type,fn){
  // dom2
  if(dom.addEventListener){
    dom.addEventListener(type,fn,false);
    // 不支持dom2的浏览器
  }else if(dom.addEventListener){
    dom.addEventListener('on'+type,fn);
    // 都不支持的老浏览器
  }else{
    dom['on'+type] = fn;
  }
}

• 把复杂的方法简化

var A = {
  css:function(id,key,value){
    document.getElementById(id).style[key] = value;
  },
  attr:function(id,key,value){
    document.getElmentById(id)[key] = value;
  }
}
A.css('box','color','#fff')