外观模式 (门面模式),是一种相对简单而又无处不在的模式。外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用。
用一段再简单不过的代码来表示
1 2 3 4 5 6 |
var getName = function(){ return ''svenzeng" } var getSex = function(){ return 'man' } |
如果你需要分别调用 getName 和 getSex 函数. 那可以用一个更高层的接口 getUserInfo 来调用.
1 2 3 4 |
var getUserInfo = function(){ var info = a() + b(); return info; } |
也许你会问为什么一开始不把 getName 和 getSex 的代码写到一起, 比如这样
1 2 3 |
var getNameAndSex = function(){ return 'svenzeng" + "man"; } |
答案是显而易见的,饭堂的炒菜师傅不会因为你预定了一份烧鸭和一份白菜就把这两样菜炒在一个锅里。他更愿意给你提供一个烧鸭饭套餐。同样在程序设计中,我们需要保证函数或者对象尽可能的处在一个合理粒度,毕竟不是每个人喜欢吃烧鸭的同时又刚好喜欢吃白菜。
外观模式还有一个好处是可以对用户隐藏真正的实现细节,用户只关心最高层的接口。比如在烧鸭饭套餐的故事中,你并不关心师傅是先做烧鸭还是先炒白菜,你也不关心那只鸭子是在哪里成长的。
最后写个我们都用过的外观模式例子
1 2 3 4 |
var stopEvent = function( e ){ //同时阻止事件默认行为和冒泡 e.stopPropagation(); e.preventDefault(); } |
Dophin 2016 年 8 月 31 日
可以说是设计之初不用考虑吗?
GhostCode 2015 年 10 月 27 日
这个比喻不错,套餐模式,自由组合
JavaScript设计模式经典之外观模式 - 马开东博客 2014 年 9 月 30 日
[…] 原文来自: alloyteam […]
【Javascript设计模式3】-观察者模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 外观模式: http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-appearance-mode… […]
【Javascript设计模式1】-单例模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 外观模式: http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-appearance-mode… […]
【javascript设计模式16】- 享元模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 外观模式: http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-appearance-mode… […]
【javascript设计模式12】-迭代器模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 外观模式: http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-appearance-mode… […]
【javascript设计模式9】-策略模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 外观模式: http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-appearance-mode… […]
【javascript设计模式5】-代理模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 外观模式: http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-appearance-mode… […]
【javascript设计模式4】- 适配器模式 | Tencent AlloyTeam 2012 年 10 月 24 日
[…] 外观模式: http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-appearance-mode… […]