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

var getName = function(){
return ''svenzeng"
}
var getSex = function(){
return 'man'
}

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

var getUserInfo = function(){
var info = a() + b();
return info;
}

也许你会问为什么一开始不把getName和getSex的代码写到一起, 比如这样

var getNameAndSex = function(){
return 'svenzeng" + "man";
}

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

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

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

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

JS常用的设计模式(7)—— 外观模式的更多相关文章

  1. JS常用的设计模式(13)——组合模式

    组合模式又叫部分-整体模式,它将所有对象组合成树形结构.使得用户只需要操作最上层的接口,就可以对所有成员做相同的操作. 一个再好不过的例子就是jquery对象,大家都知道1个jquery对象其实是一组 ...

  2. JS常用的设计模式(17)—— 状态模式

    状态模式主要可以用于这种场景 1 一个对象的行为取决于它的状态 2 一个操作中含有庞大的条件分支语句 回想下街头霸王的游戏. 隆有走动,攻击,防御,跌倒,跳跃等等多种状态,而这些状态之间既有联系又互相 ...

  3. JS常用的设计模式(8)——访问者模式

    GOF官方定义: 访问者模式是表示一个作用于某个对象结构中的各元素的操作.它使可以在不改变各元素的类的前提下定义作用于这些元素的新操作.我们在使用一些操作对不同的 对象进行处理时,往往会根据不同的对象 ...

  4. JS常用的设计模式(14)—— 备忘录模式

    备忘录模式在js中经常用于数据缓存. 比如一个分页控件, 从服务器获得某一页的数据后可以存入缓存.以后再翻回这一页的时候,可以直接使用缓存里的数据而无需再次请求服务器. 实现比较简单,伪代码: var ...

  5. JS常用的设计模式(12)—— 迭代器模式

    迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示. js中我们经常会封装一个each函数用来实现迭代器. array的迭代器: forEach = functio ...

  6. JS常用的设计模式(9)——策略模式

    策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.一个小例子就能让我们一目了然. 回忆下jquery里的animate方法. $( div ).animate( {&quo ...

  7. JS常用的设计模式(6)——桥接模式

    桥接模式的作用在于将实现部分和抽象部分分离开来, 以便两者可以独立的变化.在实现api的时候, 桥接模式特别有用.比如最开始的singleton的例子. var singleton = functio ...

  8. JS常用的设计模式(5)——代理模式

    代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作. 举一个例子, 我在追一个MM想给她送一束花,但是我因为我性格比较腼腆,所以我托付了MM的一个好朋友来送. 这个例子不是非常好, 至少我 ...

  9. js设计模式——2.外观模式

    js设计模式——2.外观模式

随机推荐

  1. 3.函数Function

    所谓函数,本质上是一种代码的分组形式.我们可以通过这种形式赋予某组代码一个名字,便于日后重用是调用. function sum(a,b){ var c = a+b; return c; } 1.一个函 ...

  2. JAVA 方法重载

    方法的重载是指:一个类中可以定义有相同的名字,但参数不同的多个方法,调用时会根据不同的参数列表选择对应的方法. 实例: W.java public class W{ public void F(Str ...

  3. UEditor使用有感(黄色)

    UEditor 介绍 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 1 入门部署 ...

  4. linux 好玩的命令

    发现一个linux好玩的命令,随机显示名言警句和诗词:fortune 和 fortune-zh (中文) cowsay: 小动物说话- ________________________________ ...

  5. mycat未配置对应表导致报错

    Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: can't find table define in sch ...

  6. dedecms v5.7 sp1 给栏目添加缩略图功能

    一.给数据库添加字段typeimg 如图:   二 . 修改 dede/catalog_add.php 找到 $in_query = "INSERT INTO `#@__arctype`(r ...

  7. struts(五) 使用通配符 接收参数

    1.使用通配符简化配置 约定优于配置 <action name="student*" class="com.gc.StudentAction" metho ...

  8. matplotlib python高级绘图库 一周总结

    matplotlib python高级绘图库 一周总结 官网 http://matplotlib.org/ 是一个python科学作图库,可以快速的生成很多非常专业的图表. 只要你掌握要领,画图将变得 ...

  9. rhel5 新建用户提示:the home directory already exists.

    rhel5 新建用户提示:the home directory already exists.(as4不存在这个问题) 环境如下: [oracle@rhel5 ~]$ df -hFilesystem  ...

  10. poj 1860 Currency Exchange :bellman-ford

    点击打开链接 Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16635   Accept ...