JavaScript进阶：设计模式——外观模式（浏览器的兼容性处

1、前言

外观模式简化了底层代码对需求的不统一的问题，也可以解决浏览器的兼容性问题，如针对浏览器的点击事件，IE浏览器普遍使用的addEventListener，更老的IE浏览器可能使用的是attachEvent去处理点击事件，而在其他浏览器中，开发者更倾向于onclick去处理DOM元素的点击事件。

• 解决方法：
  使用外观模式，针对用户可能使用不同浏览器的情况，进行对所有的点击事件进行包装处理。从而所有的开发者只需要调用同一个事件名处理点击事件即可。

<div id="container" style="width: 200px;height: 60px;border: 1px solid blue;margin: auto;"></div>

// 获取container的DOM元素
var container = document.querySelector('#container');

// 使用外观模式
function addEvent(dom, type, fn) {
    if(dom.addEventListener) {
        // 如果支持DOM2级事件addEventListener
        dom.addEventListener(type, fn, false);
    } else if(dom.attachEvent) {
        // IE9以下的浏览器
        dom.attachEvent('on'+type, fn);
    } else {
        // 如果以上两种均不支持
        dom['on'+type] = fn;
    }
}

addEvent(container, 'click', function() {
    console.log('测试第一个方法');
}); 
        
addEvent(container, 'click', function() {
    console.log('测试第二个方法');
});

开发者在同一个DOM上操作点击事件时，就不会把之前的事件类型给覆盖掉。

2、使用外观模式进行浏览器的多兼容解决

针对阻止事件冒泡，阻止默认事件以及获取DOM元素等，不同浏览器的方法不一致，因此，也可以使用外观模式进行处理一下。

<div id="container" style="width: 200px;height: 60px;border: 1px solid blue;margin: auto;">
    <div id="box" style="width: 100px;height: 30px;border: 1px solid red;margin: auto;"></div>
</div>

// 获取container的DOM元素
var container = document.querySelector('#container');
// 获取container中的box元素
var box = document.querySelector('#box');

// 多浏览器兼容性去点击DOM元素
function addEvent(dom, type, fn) {
    if(dom.addEventListener) {
        // 如果支持DOM2级事件addEventListener
        dom.addEventListener(type, fn, false);
    } else if(dom.attachEvent) {
        // IE9以下的浏览器
        dom.attachEvent('on'+type, fn);
    } else {
        // 如果以上两种均不支持
        dom['on'+type] = fn;
    }
}

// 多浏览器兼容性去获取事件对象
var getEvent = function(e) {
    return e || window.e;
}

// 多浏览器兼容性去获取元素
var getTarget = function(e) {
    let event = getEvent(e);
    // 标准浏览器下获取的target，IE浏览器下获取的srcElement;
    return event.target || event.srcElement;
}

// 多浏览器兼容性去处理事件冒泡
var eventBubble = function(e) {
    let event = getEvent(e);
    if(event.stopPropagation) {
        // 标准浏览器
        event.stopPropagation();
    } else {
        // IE浏览器
        event.cancelBubble = true;
    }
}

// 多浏览器兼容性去处理默认事件
var defaultEvent = function(e) {
    let event = getEvent(e);
    if(event.preventDefault) {
        // 标准浏览器
        event.preventDefault();
    } else {
        // IE浏览器
        event.returnValue = true;
    }
}

// 点击外部的container容器
addEvent(container, 'click', function(e) {
    console.log('点击外部container元素');
}); 

// 点击内部box元素会触发默认事件
addEvent(box, 'click', function(e) {
    eventBubble(e);
    console.log('点击内部box元素');
});