JavaScript设计模式-外观模式（17）

外观设计模式可以使方法保持简洁而不繁重，不需要去处理过多的工作量。它在做一些重新设计和重构代码工作时十分受用，当你想使用一个不同的实现来替换掉某一个对象时，可能会需要很长时间去完成一个复杂的对象，同时之前使用该对象的方法也会被重新编写，此时我们可以先想好新的方法，旧对象结合外观设计模式使用，在完全替换掉旧对象的时候，我们只需要修改少量代码就可以进行使用了

外观设计模式在生活中的应用就是我们程序员启动电脑的操作，我们看到的是按下电脑电源开关电脑就启动了，实际上电脑内部做些很多事情来实现电脑的开机操作，我们能通过简洁的操作实现电脑开机，我们可以看做成电脑电源开关是电脑对外提供给我们的开机方法

外观设计模式在实际业务中也是十分常见的，例如：阻止默认事件，我们来实现一下

我们平常需要阻止的默认事件是阻止事件冒泡到父节点和阻止浏览器执行默认行为

//阻止事件冒泡到父节点
function stop1(event){
event.stopPropagation()
}
//阻止浏览器默认行为:a标签的跳转链接和from表单的默认提交行为
function stop2(event){
event.preventDefault()
}

这俩个阻止默认行为是相互独立的方法，但是也经常被一块调用，所以为了我们能够在不同的业务功能中重复调用阻止浏览器默认行为，我们可以对它使用外观设计模式

声明一个对象，该对象有一个stop方法，stop方法中接受event对象，在stop方法内部通过if语句的方式进行判断是否拥有默认事件方法，如果拥有则进行阻止

const STOPEVENT =  {
    stop(event) {
        //阻止浏览器默认行为
        if (typeof (event.preventDefault === "function")) {
            event.preventDefault();
        }
        //阻止事件冒泡到父节点
        if (typeof (event.stopPropagation == "function")) {
            event.stopPropagation();
        }
    }
};

外观设计模式能够很好的减少代码的复杂性，减少了对方法内部的修改，提高了代码的可维护性

坚持努力，无惧未来！