js设计模式 套餐服务——外观模式

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

兼容模式

<a id="myinput">click</a>
<script>
function addEvent(dom, type, 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;
    }
}
var myInput = document.getElementById('myinput');
addEvent(myInput, 'click', function () {
    console.log("绑定第一个事件");
});
addEvent(myInput, 'click', function () {
    console.log("绑定第二个事件");
});
addEvent(myInput, 'click', function () {
    console.log("绑定第三个事件");
});
</script>

·简约版属性样式

<div id="box">click</div>
<script>
// 简约版属性样式方法库
var A = {
    // 通过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;
    }
};
A.css('box', 'background', 'red'); // 设置css样式
A.attr('box', 'className', 'box'); // 设置class
A.html('box', '这是新添加的内容'); // 设置内容
A.on('box', 'click', function () {
    A.css('box', 'width', '500px');
});
</script>