JS设计模式——10.门面模式

浏览数：14 / 时间：2015年06月09日

门面模式

这是一种组织性的模式，它可以用来修改类和对象的接口，使其更便于使用。它可以让程序员过得更轻松，使他们的代码变得更容易管理。

门面模式有两个作用：

简化类的接口
消除与使用她的客户代码之间的耦合

一个简单的门面模式

var addEvent = function(el, ty, fn){
    var cases = [
        function(el, ty, fn) { el.addEventListener(ty, fn, false); },
        function(el, ty, fn) { el.attachEvent(‘on‘+ty, fn); },
        function(el, ty, fn) { el[‘on‘+ty] = fn; }
    ];
    if(el.addEventListener){
        $.addEvent = cases[0];
    }else if(el.attachEvent){
        $.addEvent = cases[1];
    }else{
        $.addEvent = cases[2];
    }
    $.addEvent(el, ty, fn);
},

addEvent函数就是一个基本的门面，有了它，就可以把检查代码封装在一个地方，这可以让代码变得更简洁。这是一个应用门面模式对付一组设计得比较糟糕的API的案例，其具体做法就是用一个精心设计的API来包装她们。

用作便利函数的门面模式

function a(x){
    return x;
}
function b(x){
    return y;
}
function ab(x, y){
    a(x);
    b(y);
}

门面模式的另一个好处表现在对函数的组合上。这些组合而得的函数又叫便利函数。

其实我们完全可以将a,b两个函数在一开始的时候就放入到ab函数中，那么门面模式在这里有什么好处呢？

答案是分别提供a、b和ab这几个函数可以获得更多力度控制和灵活性。组合a和b可能会对应用程序造成破坏或者意想不到的结果。

下面就是一个常见的门面模式：

var JChen = window.JChen || {};
JChen.util = {
    stopPropragation: function(e){
        if(e.stopPropragation){
            e.stopPropragation();
        }else{
            e.cancelBubble = true;
        }
    },
    preventEvent: function(e){
        if(e.preventEvent){
            e.preventEvent();
        }else{
            e.returnValue = false;
        }
    },
    stopEvent: function(e){ //这个就是便利函数
        JChen.util.stopPropragation(e);
        JChen.util.preventEvent(e);
    }
};

设置HTML样式

基本做法

设置HTML的样式，只要对样式对象的特定属性赋值即可，例如：

var el = document.getElementById(‘content‘);
el.style.color = ‘red‘;

门面模式

现在假设我们要一次设置几个元素的某个样式。如果分别设置显然是有些笨拙的，这个时候我们就可以使用门面模式了。

function setStyle(el, prop, val){
    for(var i= 0, len=el.length; i<len; i++){
        document.getElementById(el[i]).style[prop] = val;
    }
}
setStyle([‘foo‘, ‘bar‘], ‘color‘, ‘red‘);

稍加改进

要是我们还可以一次设置多个元素的多个样式就更好了，那样的话就不必反复使用setStyle方法了。

function setCSS(el, styles){
    for( var prop in styles){
        if(!styles.hasOwnProperty(prop)){ //必须不能是原型上的属性才是应该被设置的样式
            continue;
        }
        styles(el, prop, styles[prop]);
    }
}
setCSS([‘foo‘, ‘bar‘], {
    color: ‘white‘,
    background: ‘black‘,
    fontSize: ‘16px‘
});