# 外观模式

外观模式（Facade）：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。

类比的话, 就像去餐厅点套餐, 为了节约时间, 我们可以选择点套餐. 比如鱼香肉丝饭套餐，会为我们提供米饭、菜，甚至饮料等。这样我们就不用再浏览遍历每一种菜，主食要点什么，饮料要买哪种等，因为套餐已经为我们定制好了，那么在JavaScript中也可以通过一个‘套餐’来简化复杂的需求。

🌰 就拿为一个 DOM 元素添加事件举例:

// 外观模式实现
function addEvent(dom, type, fn){
    // 对于支持DOM2级事件处理程序addEventListener方法的浏览器
    if(dom.addEventListener){
        dom.addEventListener(type, fn, false);
    // 对于不支持addEventListener方法但支持attachEvent方法的浏览器
    }else if(dom.attachEvent){
        dom.attachEvent('on' + type, fn);
    // 对于不支持addEventListener方法也不支持attachEvent方法，但支持on+'事件名'的浏览器
    }else{
        dom['on' + type] = fn;
    }
}

var myInput = document.getElementById('myinput');
addEvent(myInput, 'click', function(){
    console.log("绑定第一个事件")
})
addEvent(myInput, 'click', function(){
    console.log("绑定第二个事件")
})
addEvent(myInput, 'click', function(){
    console.log("绑定第三个事件")
})

使用『外观模式』我们可以通过一个接口去兼顾多种情况.

🌰 比如将多个功能封装到一个对象中去:

// 简约版属性样式方法库
var A = {
    // 通过id获取元素
    g : function(id){
        return document.getElementById(id);
    },
    // 设置元素css属性
    css : function(id, key, value){
        document.getElementById(id).style[key] = value;
    },
    // 设置元素的属性
    attr : function(id, key, value){
        document.getElementById(id)[key] = value;
    },
    html : function(id, html){
        document.getElementById(id).innerHTML = html;
    },
    // 为元素绑定事件
    on : function(id, type, fn){
        document.getElementById(id)['on' + type] = fn;
    }
};

A.css('box', 'background', 'red'); // 设置css样式
A.attr('box', 'className', 'box'); // 设置class
A.html('box', '这是新添加的内容');  // 设置内容
A.on('box', 'click', function(){  // 绑定事件
    A.css('box', 'width', '500px');
});