javascript设计模式-门面模式（7）

门面模式（facade）一般有两个作用：简化类的接口；消除类与使用它的客户代码之间的耦合。门面模式的目的是为了让开发人员用更简单的方法调用一些相对复杂或组合的方法，主要就是简化开发的复杂性，调用一个相对容易的API去调用内部的方法供外界去使用，并且编写一次组合代码后可以反复去使用它

// 现在有一个简单的需求： 获得页面上的元素 给得到的元素设置css样式           
// 需求发生变化：同时设置几个元素的css样式
window.onload= function(){
    // 给一个元素设置一个样式
    //var element = document.getElementById('div1');
    //element.style.color = 'red';

    // 给多个元素设置同样的样式
    //setStyle(['div1','div2','div3'],'color' , 'blue');

    // 给多个元素设置多种样式
    setCss(['div1','div2','div3'],{
        position:'absolute' ,
        background:'green' ,
        fontSize: '18px' ,
        left:'100px'
    });

};


//简单的门面模式
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]);
    }
}
<div id="div1" >我是div1</div>
<div id="div2" >我是div2</div>    
<div id="div3" >我是div3</div>