門面模式

前言

門面模式的本質是實現一個簡單的同一接口來處理對各個子系統接口的處理和調用.和橋接模式不同的是:橋接模式中的各個類是全然獨立的,橋接模式僅僅在必要的時候將這些類關聯起來.

門面模式則有點不同.門面模式事實上能夠非常形象的比作是一家咖啡店的店面窗體,客戶僅僅須要說明自己是須要哪種咖啡,也就是說咖啡店提供給客戶的僅僅是各類咖啡的選擇接口,而將內部的各個子類行為封裝起來,比方加水啊,拆包裝啊啥的,咱也不懂,就瞎說唄,反正就是把制作咖啡的過程封裝起來,不用你知道,僅僅把最後你想要的咖啡給你.

正文

門面模式的長處在於我們將客戶與較為復雜的子系統方法和接口分離開來,減少用戶與各個子系統間耦合度來提高代碼指令.

看下圖:

以下是一個純粹形式化案例:

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可能須要從一個門面實例中找到還有一個,再聯系到第三個第四個,會使代碼的維護性較差.

JS門面模式