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自定义事件介绍
Aug 29 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
jQuery实现手风琴特效
Jan 11 jQuery
写给新手同学的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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
css3 实现滚动条美化效果的实例代码
2021/01/06 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
新员工培训个人的自我评价
2013/10/09 职场文书
大学自我鉴定范文
2013/12/26 职场文书
优秀干部获奖感言
2014/01/31 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
工程资料员岗位职责
2014/03/10 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
2015年校医个人工作总结
2015/07/24 职场文书