0
点赞
收藏
分享

微信扫一扫

【JS】169-JavaScript设计模式——外观模式

【JS】169-JavaScript设计模式——外观模式_外观模式

六、外观模式(Facade Pattern)

1.概念介绍

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

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

2.优缺点和应用场景

2.1优点

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

2.2缺点

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

2.3应用场景

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

3.基本案例

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

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

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

参考资料

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

  1. 《JavaScript Patterns》

【JS】169-JavaScript设计模式——外观模式_子系统接口_02

举报

相关推荐

0 条评论