門面模式
兩個作用：
1、簡化類的接口
2、消除類與使用它的客戶代碼之間的耦合
門面模式常常是開發人員最親密的朋友。它幾乎是所有javascript庫的核心原則
門面模式的目的是為了讓開發人員用更簡單的方法調用一些相對復雜或組合的方法，主要就是簡化開發的復雜性，提供一個相對容易的API去調用內部的方法供外界去使用，這樣程序員開發會變得輕松些，編寫一次組合代碼后可以反復的去使用它，有助于節省時間和精力
注意：
不要濫用門面模式，所以使用你心儀的門面之前一定要三思而定，搞不好你就會小題大做
引入概念：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>門面模式設計</title>
<!--
@theme: javascript高級 門面模式設計
@autor：EthanCoco
@date：2015-11-22
@email：lijianlin0204@163.com
-->
</head>
<body>
<script type=text/javascript charset=utf-8>
/*********************************************************/
//第一個示例引入
//首先，我們定義兩個函數 a,b 平常的話我們要調用這兩個函數，就會是分別調用函數a,然后調用b
//如果我需要做一件事 ：必須要同時調用a，b
//我就可以通過一個API來調用a和b函數就可以，這就是一個簡單的門面模式
/*
function a(x){
//do something
}
function b(y){
//do something
}
function ab(x,y){
a(x);
b(y);
}
*/
//我們只需要調用ab()函數就可以實現a，b的實現
/*********************************************************/
</script>
</body>
</html>
示例解說：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>門面模式設計</title>
</head>
<body>
<script type=text/javascript charset=utf-8>
/*********************************************************/
//現在有個需求：獲得頁面上的元素，并且給得到的樣式設置css樣式
//通常做法很簡單 如下：
//我在頁面上寫了三個div
window.onload = function(){
//如果需要三個div的顏色都變成紅色。我們需要些三個如下的類似代碼
var ele = document.getElementById("div1");
ele.style.color = 'red';
var ele = document.getElementById("div2");
ele.style.color = 'red';
var ele = document.getElementById("div2");
ele.style.color = 'red';
};
</script>
<div id="div1" >我是div1</div><br/>
<div id="div2" >我是div2</div><br/>
<div id="div3" >我是div3</div>
</body>
</html>
這樣做會方法代碼相似重復，非常不好，我們通過門面模式來設計就非常實用啦！
如下代碼：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>門面模式設計</title>
</head>
<body>
<script type=text/javascript charset=utf-8>
/*********************************************************/
//示例2
//現在有個需求：獲得頁面上的元素，并且給得到的樣式設置css樣式
//我在頁面上寫了三個div
window.onload = function(){
//使用門面模式設置多個元素多種樣式
//可以調用setStyle方法來設置多種樣式
setStyle(['div1','div2','div3'],'color','blue');
};
//簡單的門面模式
function setStyle(elementsId,prop,val){
for(var i=0;i<elementsId.length;i++){
document.getElementById(elementsId[i]).style[prop] = val ;
}
}
</script>
<div id="div1" >我是div1</div><br/>
<div id="div2" >我是div2</div><br/>
<div id="div3" >我是div3</div>
</body>
</html>
繼續深入：如果需求發生變更 ：“給多個元素設置多種樣式”
代碼如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>門面模式設計</title>
<!--
@theme: javascript高級 門面模式設計
@autor：EthanCoco
@date：2015-11-22
@email：lijianlin0204@163.com
-->
</head>
<body>
<script type=text/javascript charset=utf-8>
//門面模式設計
/*********************************************************/
//現在有個需求：獲得頁面上的元素，并且給得到的樣式設置css樣式
window.onload = function(){
setCss(['div1','div2','div3'],{
height : '200px',
width :'300px',
background:'green' ,
fontSize: '18px'
});
};
//簡單的門面模式
function setStyle(elementsId,prop,val){
for(var i=0;i<elementsId.length;i++){
document.getElementById(elementsId[i]).style[prop] = val ;
}
}
//如果需求方法變化 : 給多個元素設置多種樣式
//門面模式的CSS方法
function setCss(elementsId,options){
for(var prop in options){
if(!options.hasOwnProperty(prop)) continue;
setStyle(elementsId,prop,options[prop]);
}
}
</script>
<div id="div1" >我是div1</div><br/>
<div id="div2" >我是div2</div><br/>
<div id="div3" >我是div3</div>
</body>
</html>
門面模式的作用要記住，什么時候需要用，不可以亂用，否則就貽笑大方了！
附上整個源碼：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>門面模式設計</title>
<!--
@theme: javascript高級 組合模式設計
@autor：EthanCoco
@date：2015-11-22
@email：lijianlin0204@163.com
-->
</head>
<body>
<script type=text/javascript charset=utf-8>
//門面模式設計
//兩個作用：
//1 簡化類的接口
//2 消除類與使用它的客戶代碼之間的耦合
//門面模式常常是開發人員最親密的朋友。它幾乎是所有javascript庫的核心原則。
/*********************************************************/
//第一個示例引入
//首先，我們定義兩個函數 a,b 平常的話我們要調用這兩個函數，就會是分別調用函數a,然后調用b
//如果我需要做一件事 ：必須要同時調用a，b
//我就可以通過一個API來調用a和b函數就可以，這就是一個簡單的門面模式
/*
function a(x){
//do something
}
function b(y){
//do something
}
function ab(x,y){
a(x);
b(y);
}
*/
//我們只需要調用ab()函數就可以實現a，b的實現
/*********************************************************/
/*********************************************************/
//示例2
//現在有個需求：獲得頁面上的元素，并且給得到的樣式設置css樣式
//通常做法很簡單 如下：
//我在頁面上寫了三個div
window.onload = function(){
/*
//如果需要三個div的顏色都變成紅色。我們需要些三個如下的類似代碼
var ele = document.getElementById("div1");
ele.style.color = 'red';
var ele = document.getElementById("div2");
ele.style.color = 'red';
var ele = document.getElementById("div2");
ele.style.color = 'red';
*/
//使用門面模式設置多個元素多種樣式
//可以調用setStyle方法來設置多種樣式
//setStyle(['div1','div2','div3'],'color','blue');
// 給多個元素設置多種樣式
setCss(['div1','div2','div3'],{
height : '200px',
width :'300px',
background:'green' ,
fontSize: '18px'
});
};
//簡單的門面模式
function setStyle(elementsId,prop,val){
for(var i=0;i<elementsId.length;i++){
document.getElementById(elementsId[i]).style[prop] = val ;
}
}
//如果需求方法變化 : 給多個元素設置多種樣式
//門面模式的CSS方法
function setCss(elementsId,options){
for(var prop in options){
if(!options.hasOwnProperty(prop)) continue;
setStyle(elementsId,prop,options[prop]);
}
}
</script>
<div id="div1" >我是div1</div><br/>
<div id="div2" >我是div2</div><br/>
<div id="div3" >我是div3</div>
</body>
</html>
