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 兼容firefox的一些问题
May 21 Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
详解VUE 数组更新
Dec 16 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 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实现分页的一个示例
2006/10/09 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
拖拉表格的JS函数
2008/11/20 Javascript
28个JS验证函数收集
2010/03/02 Javascript
jquery 学习笔记一
2010/04/07 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
简单解析Django框架中的表单验证
2015/07/17 Python
python贪吃蛇游戏代码
2020/04/18 Python
Python转换时间的图文方法
2019/07/01 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
医院后勤自我鉴定
2013/10/13 职场文书
学生励志演讲稿
2014/01/06 职场文书
安全事故检讨书
2014/01/18 职场文书
工作时间上网检讨书
2014/02/03 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
给校长的建议书
2014/03/12 职场文书
党员政治学习材料
2014/05/14 职场文书
股份合作协议书
2014/09/10 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2014年采购员工作总结
2014/11/18 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
工作经历证明范本
2015/06/15 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
mysql如何配置白名单访问
2021/06/30 MySQL
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS