JS设计模式---9.门面模式

门面模式是什么

外部与一个子系统的通信必须通过一个系统的一个门面对象进行，这就是门面模式。 它有两个作用，一是简化类的接口，二是消除类与使用它的客户代码的耦合

门面模式之利

  • 简化接口
  • 减少与子系统的耦合
  • 降低对外部代码的依赖

门面模式之弊

  • 不符合开闭原则，对扩展开发，对修改关闭

适用场合

  • 事件监听器
1
2
3
4
5
6
7
8
9
10
11
function addEvent(el,type,fn) {
     if (window.addEventListener) {
       el.addEventListener(type,fn,false)
     }
     else if (window.attachEvent) {
       el.attachEvent('on'+type , fn)
     }
     else{
       el['on'+type] = fn;
     }
   }
  • js 库

    JavaScript 库是人为设计的。设计它们的目的在于节省时间、简化常见任务和提供比每个浏览器都实现了的内置 JavaScript 函数更易于使用的接口。

  • 便利方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var DED = window.DED || {};
DED.util = {
   //阻止冒泡
  stopPropagation:function(e){
    if (e.stopPropagation) {
      e.stopPropagation
    }
    else{
      e.cancelBubble = true
    }
  },
   // 阻止默认行为
  preventDefault:function(e){
    if (e.preventDefault) {
      e.preventDefault()
    }
    else{
      e.returnValue = true;
    }
  },
  stopEvent:function(e){
    DED.util.stopPropagation(e);
    DED.util.preventDefault(e);
  }
}

一个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 例如想要将ID为content的div元素的文本颜色设置为红色，可以使用下面的代码
var element = document.getElementById('content');
element.style.color = 'red';
// 现在假设要一次设置几个元素的某个样式。如果有三个ID分别为foo、bar和baz的元素，并且想把它们的文本颜色设置为红色 可以这样做
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');
//  逆向思维  先写出怎么用  然后再来设计这个函数
function setStyle(elements,prop,val) {
  for (let i = 0; i < elements.length; i++) {
    document.getElementById(elements[i]).style[prop] = val;

  }
}
// 我们还可以设计一个更复杂的接口，把所有逻辑都组合在另一个门面元素中。以便一次调用就可以处理所有问题 我们把它命名为setCSS
setCSS(['foo'],{
  positon:"absolute",
  top:"50px",
  left:"300px"
})
function setCss(el,styles) {
  for (var prop in styles) {
    if (!styles.hasOwmProperty(prop)) continue;
    setStyle(el,prop,styles[prop])

  }
}
// 现在我们就可以像这样一次设置多个元素的多个样式
setCSS(['foo','bar','baz'],{
  color:"red",
  background:"black",
  fontSize:"16px",
})