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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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 禁止页面缓存输出
2009/01/07 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
javascript引导程序
2008/10/26 Javascript
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Python同时处理多个异常的方法
2020/07/28 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
会计与审计专业自荐信范文
2014/03/15 职场文书
竞聘书模板
2014/03/31 职场文书
关爱老人标语
2014/06/21 职场文书
简易版租房协议书范本
2014/10/13 职场文书
大学生学年个人总结
2015/02/15 职场文书
结婚司仪主持词
2015/06/29 职场文书
物业保洁员管理制度
2015/08/05 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Nginx配置之禁止指定IP访问
2022/05/02 Servers