门面模式是什么
外部与一个子系统的通信必须通过一个系统的一个门面对象进行，这就是门面模式。 它有两个作用，一是简化类的接口，二是消除类与使用它的客户代码的耦合
门面模式之利
- 简化接口
- 减少与子系统的耦合
- 降低对外部代码的依赖
门面模式之弊
- 不符合开闭原则，对扩展开发，对修改关闭
适用场合
- 事件监听器
function addEvent(el,type,fn) {
if (window.addEventListener) {
el.addEventListener(type,fn,false)
}
else if (window.attachEvent) {
el.attachEvent('on'+type , fn)
}
else{
el['on'+type] = fn;
}
}
- js库
JavaScript库是人为设计的。设计它们的目的在于节省时间、简化常见任务和提供比每个浏览器都实现了的内置JavaScript函数更易于使用的接口。
- 便利方法
var DED = window.DED || {};
DED.util = {
//阻止冒泡
stopPropagation:function(e){
if (e.stopPropagation) {
e.stopPropagation
}
else{
e.cancelBubble = true
}
},
// 阻止默认行为
preventDefault:function(e){
if (e.preventDefault) {
e.preventDefault()
}
else{
e.returnValue = true;
}
},
stopEvent:function(e){
DED.util.stopPropagation(e);
DED.util.preventDefault(e);
}
}
一个栗子
// 例如想要将ID为content的div元素的文本颜色设置为红色，可以使用下面的代码
var element = document.getElementById('content');
element.style.color = 'red';
// 现在假设要一次设置几个元素的某个样式。如果有三个ID分别为foo、bar和baz的元素，并且想把它们的文本颜色设置为红色 可以这样做
var element1 = document.getElementById('foo')
element1.style.color = 'red'
var element2 = document.getElementById('bar')
element2.style.color = 'red'
var element3 = document.getElementById('baz')
element3.style.color = 'red'
// 这样不停的写getElementById并且为每一个元素设置同样的属性和值不够优雅。
// 为了代码更加优雅，我们来写一个门面元素来简化我们的工作。
setStyle(['foo','bar','baz'],'color','red');
// 逆向思维 先写出怎么用 然后再来设计这个函数
function setStyle(elements,prop,val) {
for (let i = 0; i < elements.length; i++) {
document.getElementById(elements[i]).style[prop] = val;
}
}
// 我们还可以设计一个更复杂的接口，把所有逻辑都组合在另一个门面元素中。以便一次调用就可以处理所有问题 我们把它命名为setCSS
setCSS(['foo'],{
positon:"absolute",
top:"50px",
left:"300px"
})
function setCss(el,styles) {
for (var prop in styles) {
if (!styles.hasOwmProperty(prop)) continue;
setStyle(el,prop,styles[prop])
}
}
// 现在我们就可以像这样一次设置多个元素的多个样式
setCSS(['foo','bar','baz'],{
color:"red",
background:"black",
fontSize:"16px",
})
