外观模式:为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更容易。在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>