JS门面模式

门面模式

前言

门面模式的本质是实现一个简单的同一接口来处理对各个子系统接口的处理和调用.和桥接模式不同的是:桥接模式中的各个类是完全独立的,桥接模式只在必要的时候将这些类关联起来.

 

门面模式则有点不同.门面模式其实可以很形象的比作是一家咖啡店的店面窗口,客户只需要说明自己是需要哪种咖啡,也就是说咖啡店提供给客户的只是各类咖啡的选择接口,而将内部的各个子类行为封装起来,比如加水啊,拆包装啊啥的,咱也不懂,就瞎说呗,反正就是把制作咖啡的过程封装起来,不用你知道,只把最后你想要的咖啡给你.

 

 

 

正文

 

门面模式的优点在于我们将客户与较为复杂的子系统方法和接口分离开来,降低用户与各个子系统间耦合度来提高代码指令.

 

看下图:

 

 

下面是一个纯粹形式化案例:

function a(x){
    // do something
}
function b(y){
    // do something
}
function ab( x, y ){
    a(x);
    b(y);
}   

 

当然形式上与桥接模式有很大程度上类似,下面的小例子可以感受下其和桥接模式不同

var N = window.N || {};
N.tools = {
    stopPropagation : function( e ){
        if( e.stopPropagation ){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    },
 
    preventDefault : function( e ){
        if( e.preventDefault ){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
    },
    
    stopEvent : function( e ){
        N.tools.stopPropagation( e );
        N.tools.preventDefault( e );
    }
}

 

一个小的阻止事件冒泡一级组织默认事件工具方法,从其代表性的stopEvent不难看出其实质与桥接模式的区别.其上面两个方法stopPropagetion和preventDefault很会令人觉得类似于适配器模式,的确是很类似于适配器模式,不过适配器模式的主要针对于将接口进行适配包装,时期适用于各种不同兼容性的环境.意思差不多就是说,如果提供兼容性的信息使其方法在不同环境下生成不同的方法,比如一些匿名自调用函数根据判断返回不同函数的类似形式,而不是说每次运行再在函数内部进行判断运行,则称其为适配器模式更为适合一点.

 

对于门面模式的一大好处就是对函数的组合上,犹如上面纯粹模式的例子,门面模式形式的组合函数又称为便利函数,看案例:我们需要将id为content的div元素设置为文本颜色red,那么简单的代码:

var element = document.getElementById('content');
content.style.color = 'red';
//如还想设置字体大小为20px
content.style.fontSize = '20px';

 

那么当一个元素需要设置多种属性时:

function setStyle(id,styles){
var element=document.getElementById(id);
for(var key in styles){
if(styles.hasOwnProperty(key)){
element.style[key]=styles[key];
}
}
}
setStyles('content',{
color:'red',
fontSize:'20px'}
);

 

setStyles就相当于一个便利函数,也可以视作门面元素,不过是相对于最简单的一类.

 

如果说是具有好几个元素,均需要设置相同的一批属性,那么将setStyles包装一下,将其嵌入在另一个门面元素之中,组合成为一个结构相对复杂的门面模式实例:

 

function setCSS( ids, styles ){
    for( var i = 0,len = ids.length; i<len; i++ ){
         setStyles( ids[i], styles );
    }
}
 

从setCSS中可以看出,对于使用setCSS的用户来收,根本不知道其内部的setStyles代码形式.可想而知,当一块逻辑代码较为复杂,调用许多各个接口等的时候,我们使用门面模式将其封装,可以带来很大的便利性.

 

 

总结

 

门面模式大致上可以分为两个小类,某块代码反复出现,比如函数a的调用基本都出现在函数b的调用之前(虽然基本上没有那么简单的形式),那么你可以考虑将这块代码使用门面示例包装起来,来优化结构.还有一种即是对于一些浏览器不兼容的API,放置在门面模式内部进行判断,处理这些问题最好的方式便是将跨浏览器差异全部集中放置到一个门面模式实例中来提供一个对外接口.

 

当然也需要注意的是,对于门面模式的滥用所产生的后果也是很严重的,不但使代码整体结构较为松散,还使代码可读性严重降低,寻找一处BUG可能需要从一个门面实例中找到另一个,再联系到第三个第四个,会使代码的维护性较差.