第七章 外观模式
什么是外观模式
外观模式(Facade):为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更加容易。在JavaScript中又是也会用于对底层结构兼容性做统一封装来简化用户使用。
外观模式的作用
作用1:兼容方式
我们在进行JavaScript编程时,经常会出现兼容问题,比如时间字符串转Date类型时就会出现以下问题:
function getTime(dateString){
let date = dateString
date = new Date(date)
return date
}
console.log(getTime('2021-05-04 18:57:00'))
在谷歌浏览器中的表现:
在火狐浏览器中的表现:
在IE浏览器中的表现:
可以看到,使用new Date()方法进行时间转字符串,在谷歌和火狐浏览器中都正常,但是在IE浏览器中却无法识别 ‘2021-05-04 18:57:00’ 时间字符串,因此才会出现Invalid Date。这是因为IE无法识别yyyy-MM-dd HH:mm:ss格式的时间格式,但是IE和其他浏览器都能识别的时间格式是yyyy/MM/dd HH:mm:ss,因此将时间字符串中的 - 转换为 / 即可。
改造后的兼容代码:
function getTime(dateString){
let date = dateString
if(typeof date === 'string' && date.indexOf('-')){
date = date.replace(/\-/g, '/')
}
date = new Date(date)
return date
}
console.log(getTime('2021-05-04 18:57:00'))
在IE浏览器中的表现:
在火狐浏览器中的表现:
在谷歌浏览器中的表现:
作用2:简化底层操作
在下面一个例子中,我们使用外观模式来封装多个功能,简化底层操作方法,比如我们简单实现获取元素的属性样式的简单方法库。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var A = {
// 根据id获取元素
g:function(id){
return document.getElementById(id)
},
// 设置元素的css属性
css:function(id,key,value){
this.g(id).style[key] = value
},
// 设置元素的属性
attr:function(id,key,value){
this.g(id)[key] = value
},
// 设置元素的内容
html:function(id,html){
this.g(id).innerHTML = html
},
// 为元素绑定事件
on:function(id,type,fn){
this.g(id)['on' + type] = fn
}
}
A.css('box','width','200px')
A.css('box','height','100px')
A.css('box','background','yellow')
A.attr('box','newAttr','attrValue')
console.log(A.g('box')['newAttr'])
A.html('box','This is new content')
A.on('box','click',function(){
alert(123)
})
</script>
</body>
</html>
结果:
练习:使用外观模式获取不同浏览器下的css样式
HTML文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<style>
#box{
background-color: aqua;
}
</style>
</head>
<body>
<div id="box" style="width: 200px;height: 100px;">htmlContent</div>
<script>
function getCss(id,key){
var dom = document.getElementById(id)
return dom.style[key]
// var style = window.getComputedStyle(dom,null)
// return style[key]
}
// 返回行内样式
console.log(getCss('box','width'))
// 返回<style></style>中的样式
console.log(getCss('box','background-color'))
// 返回css文件中引入的样式
console.log(getCss('box','margin'))
</script>
</body>
</html>
CSS文件(index.css):
#box {
margin: 50px auto;
text-align: center;
}
1)尝试使用element.style方式:
function getCss(id,key){
var dom = document.getElementById(id)
return dom.style[key]
}
// 返回行内样式
console.log(getCss('box','width'))
// 返回<style></style>中的样式
console.log(getCss('box','background-color'))
// 返回css文件中引入的样式
console.log(getCss('box','margin'))
谷歌浏览器:
火狐浏览器:
IE浏览器:
得出结论:lement.style方法只能获取行内样式,对<style></style>中的样式和css文件中的样式无法获取。
2)使用getComputedStyle()
function getCss(id,key){
var dom = document.getElementById(id)
var style = window.getComputedStyle(dom,null)
return style[key]
}
// 返回行内样式
console.log(getCss('box','width'))
// 返回<style></style>中的样式
console.log(getCss('box','background-color'))
// 返回css文件中引入的样式
console.log(getCss('box','margin'))
谷歌:
火狐:
IE:
得出结论:getComputedStyle()方法在谷歌浏览器可以使用,但是在火狐和IE浏览器中都无法获取外部css文件中的样式。
3)使用ele.currentStyle方式
currentStyle是IE浏览器自己的一个属性,其语法与ele.style类似,差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的
function getCss(id,key){
var dom = document.getElementById(id)
var style = dom.currentStyle
return style[key]
}
// 返回行内样式
console.log(getCss('box','width'))
// 返回<style></style>中的样式
console.log(getCss('box','background-color'))
// 返回css文件中引入的样式
console.log(getCss('box','margin'))
但是改方法只能在IE中生效
4)使用getPropertyValue()结合getComputedStyle()
function getCss(id,key){
var dom = document.getElementById(id)
return window.getComputedStyle(dom, null).getPropertyValue(key);
}
// 返回行内样式
console.log(getCss('box','width'))
// 返回<style></style>中的样式
console.log(getCss('box','background-color'))
// 返回css文件中引入的样式
console.log(getCss('box','margin'))
该方法和第二种方法的结果相同,都是在谷歌中生效,在IE和火狐中无法获取外部css文件的值
5)最终的兼容
function getCss(id,key){
var dom = document.getElementById(id)
var style = null
if(window.getComputedStyle){
style = window.getComputedStyle(dom,null)
}
if(dom.currentStyle){
style = dom.currentStyle
}
return style[key];
}
// 返回行内样式
console.log(getCss('box','width'))
// 返回<style></style>中的样式
console.log(getCss('box','background-color'))
// 返回css文件中引入的样式
console.log(getCss('box','margin'))
console.log(getCss('box','text-align'))
谷歌:
IE:
火狐:
结论:目前使用外观模式可以兼容谷歌、IE浏览器和火狐浏览器。 但是我们有发现了一个问题,对于margin属性,火狐浏览器返回<empty string>,开始我以为是因为外部css文件的问题,可是当该属性换到<style></style>或者行内样式时,返回结果仍然为<empty string>。
所以我试着对margin-top和margin-left属性取值,在不同浏览器中的值分别为:
谷歌:
IE:
火狐:
发现火狐是可以获取margin-top和margin-left的值,所以我推测火狐在最终渲染的时候,是将margin值计算分为margin-top、margin-bottom、margin-left和margin-right四个值进行渲染,margin值最终并不保存在渲染的属性中。
总结
外观模式作为结构型设计模式中的一种,方式是对接口进行进一步封装。作用和目的主要有2个,一是兼容不同子系统(比如不同的浏览器需要使用不同的语句才能将时间字符串转为Date类型),二是简化函数(使用者只需要传入必要的参数即可返回结果,而不需要了解中间的过程)。
下一章 适配器模式