《JS设计模式》笔记-外观模式

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

作者的定义站位比较高,我简化一下理解就是:将方法的琐碎问题包装处理一下,提供出一个更稳健的方法。

添加一个点击事件,希望尽量使用dom2级事件,又要至少兼容到dom0级,但是写起来有比较麻烦,这时通过外观模式提炼出一个方法。

function addEvent(dom, type, fn) {
    // 对于支持 addEventListener的浏览器
    if (dom.addEventListener) {
        // addEventListener第三个参数 useCapture:是否在捕获阶段执行。默认为false,冒泡阶段执行。
        dom.addEventListener(type, fn, false)
    // 对于支持 attachEvent的浏览器
    } else if (dom.attachEvent) {
        dom.attachEvent('on' + type, fn)
    // 对于支持 on + '事件名' 的浏览器
    } else {
        dom['on' + type] = fn
    }
}

补充扩展:对于不兼容 e.prenentDefault()和 e.target 的IE低版本浏览器

// 获取事件对象
var getEvent = function (event) {
    //标准浏览器返回event,IE下返回window.event
    return event || window.event
}
// 获取元素
var getTarget = function (event) {
    var event = getEvent(event)
    return event.target || event.srcElement
}
// 阻止默认事件
var preventDefault = function (event) {
    var event = getEvent(event)
    if (event.preventDefault) {
        event.preventDefault()
    } else {
        event.returnValue = false
    }
}

随机浏览