外观模式

就是为子系统中的一组接口提供一个公共出口，定义个一高层接口

外观模式的设计就是可以通过请求外观接口来达到请求访问子系统的目的，也可以选择跳过外观接口而访问子系统

我们来看一个最直观的外观模式的设计

<script>
     function start() {
        console.log("开始")
    };

    function doing() {
        console.log("工作中")
    }

    function end() {
        console.log("工作结束")
    }
    // 外观模式的封装
    function execute() {
        start()
        doing()
        end()
    }
execute()
</script>

 

 

 

比如我们有一个div，很多地方都会控制这个div 的显示和隐藏，但是每次进行手写代码冗余特别严重，所以我们可以使用外观模式进行封装

<script>
    var box = document.getElementById("box");
    function setState() {
        // 外观模式的封装，将显示和隐藏的方法封装了起来
        return {
            show: function() {
                box.style.display = 'block'
            },
            hide: function() {
                box.style.display = 'none';
            }
        }
    }
    var changeState = setState();
    changeState.show();//显示
  //  changeState.hide();//隐藏
</script>

此时就可以控制div的显示和隐藏