javascript之外观模式 -- 2022-11-20

/**
 * 概念：外观模式
 * 为一组复杂的子系统接口提供一个更高级的统一接口
 * 通过这个接口使得子系统接口的访问更容易。在Javascrip中有时也会用于对底层结构兼容性做统一封装来简化用户使用
 */

// 案例---使用外观封装一个点击事件，使其兼容IE浏览器和常用的浏览器，即兼容性封装
// 外观模式实现
function addEvent(dom, tyoe, fn) {
    // 对于支持DOM2级事件处理程序addEventListener 方法的浏览器
    if(dom.addEventListener) {
        dom.addEventListener(type, fn, false);
        // 对于不支持addEventListener方法但支持attachEvent 方法的浏览器
    } else if(dom.attachEvent) {
        dom.attachEvent('on' + type , fn);
        // 对于不支持addEventListener 方法也不支持attachEvent方法，但支持on + '事件名'的浏览器
    }else {
        dom['on' + type] = fn;
    }
}

// 通过上面的放我对于支持addEventListener 或者 attachEvent 方法的浏览器就可以放心地绑定多个事件了
// 用例
var myInput = document.getElementById('myinput')
addEvent(myInput, 'click', function() {
    console.log('绑定第一个事件')
})
addEvent(myInput, 'click', function() {
    console.log('绑定第二个事件')
})
addEvent(myInput, 'click', function() {
    console.log('绑定第三个事件')
})

// 使用外观模式解决IE 低版本浏览器不兼容e.preventDefault() 和 e.target 
// 获取事件对象
var getEvent = function(event) {
    // 标准浏览器返回event ，IE下 window.event
    return event || window.event;
}
// 获取元素
var getTarget = function (event) {
    var event = getEvent(event);
    // 标准浏览器下 event.target , IE 下event.scrElement 
    return event.target || event.srcElement;
} 

// 阻止默认行为
var preventDefault = function(event) {
    var event = getEvent(event);
    // 标准浏览器
    if(event.preventDefault) {
        event.preventDefault();
        // IE浏览器
    }else {
        event.returnValue = false
    }
}
// 用例
document.onclick = function (e) {
    // 阻止默认行为
    preventDefault(e);
    // 获取事件源目标对象
    if(getTarget(e) !== document.getElementById('myinput')) {
        // 
    }
}


// 简单实现获取元素的属性样式的简单方法库
var B = {
    // 通过ID获取元素
    g: function(id) {
        return document.getElementById(id);
    },
    // 设置元素css 属性
    css: function(id, key, value) {
        document.getElementById(id).style[key] = value;
    },
    // 设置元素的属性
    attr: function(id, key, value) {
        document.getElementById(id)[key] = value;
    },
    html: function(id, html){
        document.getElementById(id).innerHTML = html;
    },
    // 为元素绑定事件
    on: function(id, type, fn) {
        document.getElementById(id)['on' + type] = fn;
    }
}

// 上面封装了操作元素属性样式的代码库
// 用例如下
B.css('box', 'background', 'red'); // 设置css样式
B.attr('box', 'className', 'box') // 设置class 
B.html('box', '这是新添加的内容') // 设置内容
B.on('box', 'click', function() {
    B.css('box', 'width', '500px')
})


/**
 * 总结：
 * 外观模式是对接口方法的外层包装，以供上层代码调用
 */