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 相关文章推荐
js substr、substring和slice使用说明小记
Sep 15 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
canvas时钟效果
Feb 16 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
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&mysql(五)
2006/10/09 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP微信分享开发详解
2017/01/14 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
jQuery 表格工具集
2010/04/25 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
管理科学大学生求职信
2013/11/13 职场文书
晚会邀请函范文
2014/01/24 职场文书
测控技术自荐信
2014/06/05 职场文书
公司授权委托书范文
2014/09/21 职场文书
组织生活会发言材料
2014/12/15 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
导游词之清晏园
2019/11/22 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
webpack的移动端适配方案小结
2021/07/25 Javascript
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS