JavaScript 设计模式 门面模式

Question

门面模式的目的：为了让开发人员用更简单的方法调用一些相对复杂或组合的方法，主要是简化开发的复杂性，提供一个相对容易的 API 去调用内部的方法供外界去使用，并不提供额外的选择，这样程序员开发会变得容易些，编写一次组合代码后可以反复的去使用它，有助于节省时间和精力。几乎是所有 JavaScript 库的核心原则。

门面模式作用：

1. 简化类的接口
2. 消除类与使用它的客户代码之间的耦合

/**
 * 门面模式的概念:简化 API 接口。最经典的就是事件
 */

// 做一件事情： 必须要调用 2 个函数分别是 a , b  

function a(x){
  // do something
}

function b(y){
  // do something
}

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


// 现在有一个简单的需求： 获得页面上的元素 给得到的元素设置 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]);
  }
}