js 设计模式 第十章 Facade Pattern

顾名思义，外观，就是套上华丽的外衣，实际上，没有这个外衣，也是没有问题的。

why？

如果直接使用第三方的接口，一方面，接口名字可能不符合应用的业务性质，另一方面，完成一个功能，可能需要复杂的多步操作。这些都给程序的可阅读性、可维护性带来不便。

有了外观模式，我们给实现外观模式的类起个更符合业务的名字，封装复杂的操作，这样，程序就变华丽了，是不？

how？

从形式上看，facade pattern 就是一个函数，封装了复杂的操作。但是从目的上看，有外观模式的形式

what？

1 添加事件处理的函数

function addEvent(el,type,fn){    if(window.addEventListener){        el.addEventListener(type,fn,false);}else if(window.attachEvent){        el.attachEvent(type,fn,false);}else{        el['on'+type] = fn;}}

addEvent 是一个基础的外观模式。正是通过这个函数，使得在实现了绑定事件的功能的时候，调用方可以不用考虑浏览器兼容问题。（外观模式封装了复杂的操作）

2 组合相关操作

var event = {   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){       event.stopPropagation();   event.preventDefault();   }};

stopPropagation 和 preventDefault 往往是一起使用的，我们通过将这两个函数放在stopEvent中，这个函数具有高内聚的特点，实现统一调用。

3 修改dom 的style 属性

修改一个元素

var element = document.getElementById('content');element.style.color = 'red';

修改3个元素

var element1 = document.getElementById('foo');element1.style.color = 'red';var element2 = document.getElementById('bar');element2.style.color = 'red';var element3 = document.getElementById('baz');element3.style.color = 'red';

当元素多时，重复写getElementById 等，很繁琐。我们希望能像下面这样修改样式

setStyle(['foo', 'bar', 'baz'], 'color', 'red');

ok，我们实现它

function setStyle(elements, prop, val) {    for (var i = 0, len = elements.length-1; i < len; ++i) {        document.getElementById(elements[i]).style[prop] = val;    }}

需求又发生变化，我们需要修改某个元素，3个不同的样式，怎么办？

setStyle(['foo'], 'position', 'absolute');setStyle(['foo'], 'top', '50px');setStyle(['foo'], 'left', '300px');

避免重复，显然我们需要再优化下外观

setCSS(['foo'], {   position: 'absolute',   top: '50px',   left: '300px'});

function setCSS(el, styles) {    for ( var prop in styles ) {    if (!styles.hasOwnProperty(prop)) continue;        setStyle(el, prop, styles[prop]);    }}

意识到，有重复的地方，时决定使用facade pattern 的关键。如果你经常在调用b函数后，调用a函数，这是用facade pattern ，将b和a封装起来，是个不错的注意