Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
微信公众号 前端自习课

六.外观模式(Facade Pattern)

1.概念介绍

**外观模式(Facade Pattern)**是一种简单又常见的模式，它为一些复杂的子系统接口提供一个更高级的统一接口，方便对这些子系统的接口访问。

它不仅简化类中的接口，还对接口和调用者进行解耦，外观模式也常被认为是开发者必备，它可以将一些复杂操作封装起来，并创建一个简单接口用于调用。

2.优缺点和应用场景

2.1优点

  • 轻量级，减少系统相互依赖。
  • 提高灵活性。
  • 提高了安全性。

2.2缺点

  • 不符合开闭原则，如果要改东西很麻烦，继承重写都不合适。

2.3应用场景

  • 为复杂的模块或子系统提供外界访问的模块。
  • 子系统相对独立。
  • 预防低水平人员带来的风险。
  • 项目重构。

3.基本案例

经常我们在处理一些特殊情况的时候，需要一起调用好几个方法，我们使用外观模式，就可以将多个方法包装成一个方法，哪里需要使用直接调用这个包装好的方法就可以。
比如我们经常处理浏览器事件，需要同时调用stopPropagation()和preventDefault()，于是我们就可以新建一个外观方法，实现这两个方法同时调用： 

1
2
3
4
5
6
7
let myEvent = {
    // ...
    stop: e => {
        e.stopPropagation();
        e.preventDefault();
    }
};

然后我们也可以使用外观模式，来做IE事件的兼容性： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let myEvent = {
    // ...
    stop: e => {
        // 其他 
        if(typeof e.preventDefault === 'function'){
            e.preventDefault();
        }
        if(typeof e.stopPropagation === 'function'){
            e.stopPropagation();
        }
        // IE
        if(typeof e.returnValue === 'boolean'){
            e.returnValue = false;
        }
        if(typeof e.cancelBubble === 'boolean'){
            e.cancelBubble = true;
        }
    }
};

参考资料

  1. 《JavaScript Patterns》

本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues
JS小册 js.pingan8787.com
微信公众号 前端自习课

bg