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 相关文章推荐
node中socket.io的事件使用详解
Dec 15 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
vue中轮训器的使用
Jan 27 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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 输出简单动态WAP页面
2009/06/09 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
JSON 教程 json入门学习笔记
2020/09/22 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
Python实现通讯录功能
2018/02/22 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python八皇后问题解答过程详解
2019/07/29 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python面向对象封装操作案例详解
2019/12/31 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
开会迟到检讨书
2014/01/08 职场文书
人事经理岗位职责
2014/04/28 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
2015年教师国培感言
2015/08/01 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers