脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript设计模式 – 外观模式

javascript设计模式 – 外观模式原理与用法实例分析

 更新时间：2020年04月15日 08:33:20   作者：李小强  
这篇文章主要介绍了javascript设计模式 – 外观模式,结合实例形式分析了javascript外观模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下

本文实例讲述了javascript设计模式 – 外观模式原理与用法。分享给大家供大家参考，具体如下：

介绍：外观模式是一种使用频率非常高的结构型设计模式，它通过引入一个外观角色来简化客户端与子系统之间的交互，为复杂的子系统调用提供一个统一的入口，隐藏系统复杂度，降低子系统与客户端的耦合度。

定义： 为子系统中的一组接口提供一个统一的入口。外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。

场景：我们还是用画圆的方式来介绍下外观模式。

示例：

var Rectangle = function(){
  this.draw = function(){
    console.log('画一个矩形');
  }
}
 
var Circle = function(){
  this.draw = function(){
    console.log('画一个圆');
  }
}
 
var Triangle = function(){
  this.draw = function(){
    console.log('画一个三角形');
  }
}
 
var ShapeMaker = function(){
  this.rectangle = new Rectangle();
  this.circle = new Circle();
  this.triangle = new Triangle();
 
  this.drawRectangle = function(){
    this.rectangle.draw();
  }
 
  this.drawCircle = function(){
    this.circle.draw();
  }
 
  this.drawTriangle = function(){
    this.triangle.draw();
  }
}
 
var shapeMaker = new ShapeMaker();
 
shapeMaker.drawRectangle(); //画一个矩形
shapeMaker.drawCircle(); //画一个圆
shapeMaker.drawTriangle(); //画一个三角形

是不是豁然开朗？其实我们日常最常用的就是外观模式。我们的工具类，jquery，包括一些浏览器兼容，我们都会把他们封装到一个对象里。

这就是外观模式提倡的把复杂的操作封装到一个简单接口中。几乎所有的涉及多个业务对象交互的场景都可以考虑使用外观模式进行重构。

外观模式总结：

优点：
* 对客户端屏蔽了子系统组件，减少了客户端所需处理的对象数目，并且提升使用便捷度。
* 实现了客户端与子系统之间的松耦合关系，这使得子系统的变化不会影响客户端。

缺点：
* 不能姮好的限制客户端直接使用子系统类
* 如果设计不当，增加新的子系统可能需要修改外观类的源代码，违背了开关原则

适用场景：
* 需要对一个复杂子系统提供一个简单入口时可以采用外观模式

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript实现文件下载的14种方法总结大全

    JavaScript实现文件下载的14种方法总结大全

    在JavaScript中实现文件下载的功能可以通过多种方式实现,这篇文章主要给大家介绍了关于JavaScript实现文件下载的14种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • IE6下CSS图片缓存问题解决方法

    IE6下CSS图片缓存问题解决方法

    ie6下如果用css图片平铺，会出现cpu短暂100%的情况，主要原因在于，ie6会重复下载图片。
    2010-12-12
  • webpack打包并将文件加载到指定的位置方法

    webpack打包并将文件加载到指定的位置方法

    下面小编就为大家分享一篇webpack打包并将文件加载到指定的位置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 编写更好的JavaScript条件式和匹配条件的技巧(小结)

    编写更好的JavaScript条件式和匹配条件的技巧(小结)

    这篇文章主要介绍了编写更好的JavaScript条件式和匹配条件的技巧(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • JavaScript实现登录滑块验证

    JavaScript实现登录滑块验证

    这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • uni-app使用Vite.config.js配置文件的超详细教程

    uni-app使用Vite.config.js配置文件的超详细教程

    这篇文章主要给大家介绍了关于uni-app使用Vite.config.js配置文件的超详细教程,在uniapp开发中,vue.config.js是配置webpack的关键文件之一,也可以说是uniapp项目自定义配置的中心,需要的朋友可以参考下
    2023-12-12
  • JavaScript WeakMap的具体使用

    JavaScript WeakMap的具体使用

    本文主要介绍了JavaScript WeakMap的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Javascript中Array用法实例分析

    Javascript中Array用法实例分析

    这篇文章主要介绍了Javascript中Array用法,实例分析了javascript中数组的遍历、传值、比较等常用技巧,需要的朋友可以参考下
    2015-06-06
  • JS Promise axios 请求结果后面的.then() 是什么意思

    JS Promise axios 请求结果后面的.then() 是什么意思

    本文主要介绍了JS Promise axios 请求结果后面的 .then() 是什么意思，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 微信小程序API—获取定位的详解

    微信小程序API—获取定位的详解

    这篇文章主要介绍了微信小程序API获取定位，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论