JavaScript设计模式之外观模式实例


Posted in Javascript onOctober 10, 2014

外观模式(门面模式),是一种相对简单而又无处不在的模式。外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用。

用一段再简单不过的代码来表示:

var getName = function(){

return ”svenzeng”

}

var getSex = function(){

return ‘man'

}

如果你需要分别调用getName和getSex函数. 那可以用一个更高层的接口getUserInfo来调用.

var getUserInfo = function(){

var info = a() + b();

return info;

}

答案是显而易见的,饭堂的炒菜师傅不会因为你预定了一份烧鸭和一份白菜就把这两样菜炒在一个锅里。他更愿意给你提供一个烧鸭饭套餐。同样在程序设计中,我们需要保证函数或者对象尽可能的处在一个合理粒度,毕竟不是每个人喜欢吃烧鸭的同时又刚好喜欢吃白菜。

外观模式还有一个好处是可以对用户隐藏真正的实现细节,用户只关心最高层的接口。比如在烧鸭饭套餐的故事中,你并不关心师傅是先做烧鸭还是先炒白菜,你也不关心那只鸭子是在哪里成长的。

最后写个我们都用过的外观模式例子:

var stopEvent = function( e ){   //同时阻止事件默认行为和冒泡

e.stopPropagation();

e.preventDefault();

}
Javascript 相关文章推荐
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 #Javascript
JavaScript设计模式之策略模式实例
Oct 10 #Javascript
JavaScript运行机制之事件循环(Event Loop)详解
Oct 10 #Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 #Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 #Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 #Javascript
分享一款基于jQuery的视频播放插件
Oct 09 #Javascript
You might like
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
layui表格数据复选框回显设置方法
2019/09/13 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python fileinput模块使用实例
2015/06/03 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
2014年大学生自我评价
2014/01/19 职场文书
企业法人授权委托书
2014/09/25 职场文书
社会实践活动总结
2015/02/05 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
Echarts如何重新渲染实例详解
2022/05/30 Javascript