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 相关文章推荐
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 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修改Linux或Unix口令的方法分享
2012/01/30 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
浅析return false的正确使用
2013/11/04 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
农民致富事迹材料
2014/01/23 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
保护环境倡议书500字
2014/05/19 职场文书
北大自主招生自荐信
2015/03/04 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏