js设计模式(结构型设计模式)-外观模式

  外观模式:为一组复杂的子系统提供一个更高级的统一接口，通过这个接口可以对子系统访问很轻松。就像我们点的套餐一样，下面详细说明。

1.场景:添加点击事件

为页面document添加onclick事件，

重新添加了，会覆盖。而且存在阻止默认事件的兼容问题。

document.body.onclick=function(e){

e.preventDefault();

console.log(1)

}

2.外观模式来处理

每天中午，我们急冲冲得去餐厅吃饭，人很多，无论是商家还是我们都希望能快点填饱肚子。通常我们都是点套餐，而不点单品，一则省钱，二则省心。套餐简洁明了，他把主食、菜品、饮料都定制好了。外观模式就是如此，他提供一个统一对外接口，这样就能很简单的实现功能而不用管内部的复杂多样。代码如下

addEvent方法实现

var bc = {

        addHandler: function(oElement, sEvent, fnHandler) {

            oElement.addEventListener ?

                oElement.addEventListener(sEvent, fnHandler, false) :

                oElement.attachEvent("on" + sEvent, fnHandler)

        }

    }

原生js有很多兼容代码，我们可以利用外观模式封装一个小型的代码库。(可以用单例模式)