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


Posted in Javascript onApril 15, 2020

本文实例讲述了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,包括一些浏览器兼容,我们都会把他们封装到一个对象里。

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

外观模式总结:

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

缺点:
* 不能??玫南拗瓶突Ф酥苯邮褂米酉低忱?br /> * 如果设计不当,增加新的子系统可能需要修改外观类的源代码,违背了开关原则

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

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

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

Javascript 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
微信小程序入门之指南针
Oct 22 Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 #Javascript
vue-cli设置publicPath小记
Apr 14 #Javascript
vue 实现用户登录方式的切换功能
Apr 14 #Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 #Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 #Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
You might like
解析php入库和出库
2013/06/25 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python实现计算资源图标crc值的方法
2014/10/05 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
python用700行代码实现http客户端
2021/01/14 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
后勤岗位职责
2013/11/26 职场文书
公司管理建议书范文
2014/03/12 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
分享Python获取本机IP地址的几种方法
2022/03/17 Python
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python