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 相关文章推荐
js控制web打印(局部打印)方法整理
May 29 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php中JSON的使用方法
2015/04/30 PHP
php常用正则函数实例小结
2016/12/29 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
win与linux系统中python requests 安装
2016/12/04 Python
python中的随机函数小结
2018/01/27 Python
python3模块smtplib实现发送邮件功能
2018/05/22 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
驾驶员安全责任书
2014/07/22 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
弄虚作假心得体会
2014/09/10 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS