JS常用的设计模式(7)—— 外观模式

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

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();
} 
时间: 2024-10-11 06:43:14

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

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

组合模式又叫部分-整体模式,它将所有对象组合成树形结构.使得用户只需要操作最上层的接口,就可以对所有成员做相同的操作. 一个再好不过的例子就是jquery对象,大家都知道1个jquery对象其实是一组对象集合.比如在这样一个HTML页面 <div> <span></span> <span></span> </div> 我们想取消所有节点上绑定的事件, 需要这样写 var allNodes = document.getElementsB

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

GOF官方定义: 访问者模式是表示一个作用于某个对象结构中的各元素的操作.它使可以在不改变各元素的类的前提下定义作用于这些元素的新操作.我们在使用一些操作对不同的 对象进行处理时,往往会根据不同的对象选择不同的处理方法和过程.在实际的代码过程中,我们可以发现,如果让所有的操作分散到各个对象中,整个系统会变得 难以维护和修改.且增加新的操作通常都要重新编译所有的类.因此,为了解决这个问题,我们可以将每一个类中的相关操作提取出来,包装成一个独立的对象,这 个对象我们就称为访问者(Visitor).利

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

状态模式主要可以用于这种场景 1 一个对象的行为取决于它的状态 2 一个操作中含有庞大的条件分支语句 回想下街头霸王的游戏. 隆有走动,攻击,防御,跌倒,跳跃等等多种状态,而这些状态之间既有联系又互相约束.比如跳跃的时候是不能攻击和防御的.跌倒的时候既不能攻击又不能防御,而走动的时候既可以攻击也可以跳跃. 要完成这样一系列逻辑, 常理下if else是少不了的. 而且数量无法估计, 特别是增加一种新状态的时候, 可能要从代码的第10行一直改到900行. if ( state === 'jump'

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

备忘录模式在js中经常用于数据缓存. 比如一个分页控件, 从服务器获得某一页的数据后可以存入缓存.以后再翻回这一页的时候,可以直接使用缓存里的数据而无需再次请求服务器. 实现比较简单,伪代码: var Page = function(){ var page = 1, cache = {}, data; return function( page ){ if ( cache[ page ] ){ data = cache[ page ]; render( data ); }else{ Ajax.s

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

迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示. js中我们经常会封装一个each函数用来实现迭代器. array的迭代器: forEach = function( ary, fn ){ for ( var i = 0, l = ary.length; i < l; i++ ){ var c = ary[ i ]; if ( fn.call( c, i , c ) === false ){ return false; } }} forEach( [ 1,

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

策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.一个小例子就能让我们一目了然. 回忆下jquery里的animate方法. $( div ).animate( {"left: 200px"}, 1000, 'linear' ); //匀速运动 $( div ).animate( {"left: 200px"}, 1000, 'cubic' ); //三次方的缓 这2句代码都是让div在1000ms内往右移动200个像素. linear(

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

桥接模式的作用在于将实现部分和抽象部分分离开来, 以便两者可以独立的变化.在实现api的时候, 桥接模式特别有用.比如最开始的singleton的例子. var singleton = function( fn ){ var result; return function(){ return result || ( result = fn .apply( this, arguments ) ); } }<span id="more-3614"></span> v

【设计模式】外观模式

外观模式:它为子系统中的一组接口提供一个统一的高层接口,使得子系统更容易使用.这其实就是一个分层的思想,将较低层复杂的操作交由较高层同一管理,并向用户程序提供简单易用的接口.下面是一个用C++编写的外观模式的例子. #include <iostream> #include <string> using namespace std; // 键盘类 class Keyboard { public: string Type(const string &input) { retur

设计模式之外观模式(Facade)摘录

23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程,它们帮助一个系统独立于如何创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而一个对象创建型模式将实例化委托给另一个对象.创建型模式有两个不断出现的主旋律.第一,它们都将关于该系统使用哪些具体的类的信息封装起来.第二,它们隐藏了这些类的实例是如何被创建和放在一起的.整个系统关于这些对象所知道的是由抽象类所定义的接口.因此,创建型模式在什么被创建,谁创建它,它是怎样被创建的,以