JavaScript设计模式 | 09-外观模式

1、模式定义

外观模式，为一组复杂的子系统接口提供一个更加高级的统一接口。通过这个高级的接口，使得对子系统接口的访问更加容易。在JavaScript中，该模式有时也会用于对底层结构兼容性做统一的封装，以简化用户对复杂子接口的使用。

2、外观模式 举例

外观模式，可以简化底层子接口的复杂性，也是解决兼容性问题的重要思想。

// 外观模式
function addEvent(dom,type,fn){
    if(dom.addEventListener){
        dom.addEventListener(type,fn,false);
    }else if(dom.attachEvent){
        dom.attachEvent('on'+type,fn);
    }else{
        dom['on'+type] = fn;
    }
}

// 测试
addEvent(document, 'click', function(){
    console.log('11');
});
addEvent(document, 'click', function(){
    console.log('22');
});

3、使用 外观模式 解决浏览器的兼容性问题

// 外观模式：获取事件对象
var getEvent = function(event){
    return event || window.event;
}

// 外观模式：获取事件目标
var getTarget = function(event){
    var event = getEvent(event);
    return event.target || event.srcElement;
}

// 外观模式：阻止浏览器事件的默认行为
var preventDefault = function(event){
    var event = getEvent(event);
    if(event.preventDefault){
        event.preventDefault();
    }else {
        event.returnValue = false;  // 兼容IE
    }
}

4、外观模式 再举例

很多代码库，都是通过外观模式来封装多个功能的，以简化底层操作方法的复杂度。如下示例，我们使用外观模式来简化获取元素样式属性的方法库。

// 使用外观模式封装小型代码库
var A = {
    g: function(id){
        return document.getElementById(id);
    },
    css: function(id,key,val){
        document.getElementById(id).style[key] = val;
    },
    attr: function(id,key,val){
        document.getElementById(id)[key] = val;
    },
    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');
A.html('box', '设置新内容');

5、小结

当一个复杂的系统提供一系列复杂的接口方法时，为系统的管理带来了诸多不便。使用外观模式，可以对接口进行二次封装，以隐藏其复杂性。

外观模式是对接口方法的外层包装，以供上层代码调用。这是系统和用户之间的一种松散耦合，避免底层系统结构变化对上层使用者的影响。

---

完！！！