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 vvorld 在线加密破解方法
Nov 13 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 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/09/28 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php查看网页源代码的方法
2015/03/13 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
js中的布尔运算符使用介绍
2013/11/20 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python获得图片base64编码示例
2014/01/16 Python
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python函数嵌套实例
2014/09/23 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
详解django中Template语言
2020/02/22 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
教师绩效工资方案
2014/02/01 职场文书
团代会邀请函
2015/02/02 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
离婚民事起诉状
2015/08/03 职场文书
禁毒心得体会范文
2016/01/15 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers