JS門面模式

標籤：咖啡   ack   元素   感受   rom   工具   資訊   document   相容性   

門面模式

前言

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

 

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

 

 

 

本文

 

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

 

看:

 

 

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

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';//如還想設定字型大小為20pxcontent.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門面模式