第七章外观模式

最新推荐文章于 2024-07-26 11:41:15 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量298

点赞数

分类专栏： JavaScript设计模式文章标签： JavaScript设计模式 javascript 设计模式前端

本文链接：https://blog.csdn.net/qq_39055970/article/details/116403672

版权

JavaScript设计模式专栏收录该内容

10 篇文章 0 订阅

订阅专栏

第七章外观模式

什么是外观模式
外观模式的作用
- 作用1：兼容方式
- 作用2：简化底层操作
练习：使用外观模式获取不同浏览器下的css样式
总结

什么是外观模式

外观模式（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类型），二是简化函数（使用者只需要传入必要的参数即可返回结果，而不需要了解中间的过程）。

下一章适配器模式

Sheldon一蓑烟雨任平生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第七章外观模式

第七章外观模式什么是外观模式外观模式的作用作用1：兼容方式作用2：简化底层操作练习：使用外观模式获取不同浏览器下的css样式什么是外观模式外观模式（Facade）：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更加容易。在JavaScript中又是也会用于对底层结构兼容性做统一封装来简化用户使用。外观模式的作用作用1：兼容方式我们在进行JavaScript编程时，经常会出现兼容问题，比如时间字符串转Date类型时就会出现以下问题： function g
复制链接

扫一扫