js设计模式【详解】—— 外观模式

外观模式的定义

外观模式（Facade）为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。

用途：将一些复杂操作封装起来，并创建一个简单的接口用于调用。

使用场景：

• 常被用于JavaScript类库里，通过它封装一些接口用于兼容多浏览器
• 在设计初期，应该要有意识地将不同的两个层分离，比如经典的三层结构，在数据访问层和业务逻辑层、业务逻辑层和表示层之间建立外观Facade。
• 在开发阶段，子系统往往因为不断的重构演化而变得越来越复杂，增加外观Facade可以提供一个简单的接口，减少他们之间的依赖。
• 在维护一个遗留的大型系统时，可能这个系统已经很难维护了，这时候使用外观Facade也是非常合适的，为系系统开发一个外观Facade类，为设计粗糙和高度复杂的遗留代码提供比较清晰的接口，让新系统和Facade对象交互，Facade与遗留代码交互所有的复杂工作。

优点：易于使用，而且本身也比较轻量级

缺点：外观模式被开发者连续使用时会产生一定的性能问题，因为在每次调用时都要检测功能的可用性。

演示范例——外观模式

假如html中有一个div，很多地方都要控制它的显示隐藏，但是每次都写是比较累赘也无味的，所以我们提供一个函数来实现，代码如下：

function setBox(){
  var getId = document.getElementById('isShow');
  return {
    show : function(){
      getId.style.display = 'block';
    },
    hide : function(){
      getId.style.display = 'none';
    }
  }
}

这样操作这个div是否显示的时候就不需要关系太多东西，直接通过setBox().show();来显示，通过hide来隐藏，这就是一个简单的外观模式，提供一个更高级的统一接口。

更多设计模式详见——js设计模式【详解】总目录

https://blog.csdn.net/weixin_41192489/article/details/116154815