设计模式中的facade外观模式在JavaScript开发中的运用


Posted in Javascript onMay 18, 2016

概念

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

外观模式并不是适配器模式,适配器模式是一种包装器,用来对接口进行适配以便在不兼容系统中使用它。而创建外观元素则是图个方便。它并不用于达到需要特定接口的客户系统打交道这个目的,而是用于提供一个简化的接口。

JavaScript代码示例

用一段再简单不过的代码来表示

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();
}

我知道外观模式的概念很容易掌握,你都不一定需要一个JavaScript代码的例子,但是总有些人更在乎代码,会觉得那样才更容易理解。更何况,没有代码示例的JavaScript文章根本就不具说服力,就应该从网上删掉。 我们从一个简单的事件监听器的例子开始。大家都知道要添加一个事件监听器并不是一件容易的事,除非只想让代码运行在少数几个浏览器上。你不得不测试很多方法以确保针对不同浏览器的代码都能正常运行。在这个代码示例中我们只是把特性检测添加到这个方法中:

function addEvent(element, type, func) {
  if (window.addEventListener) {
    element.addEventListener(type, func, false);
  }
  else if (window.attachEvent) {
    element.attachEvent('on'+type, func);
  }
  else {
    element['on'+type] = func;
  }
}

简单吧!我真希望我可以不用写那些不必要的代码,让它们越简单越好,但是如果真是这样就没什么意思了,你也不会想读下去了,对吧?所以我不这么认为,我想我要给你看点更复杂的东西。我只是想说,你的代码原本看起来会有些像下面这样:

var foo = document.getElementById('foo');
  foo.style.color = 'red';
  foo.style.width = '150px';

var bar = document.getElementById('bar');
  bar.style.color = 'red';
  bar.style.width = '150px';

var baz = document.getElementById('baz');
  baz.style.color = 'red';
  baz.style.width = '150px';

太蹩脚了!你对每个元素做了一模一样的事!我认为我们可以让它变得更简单点:

function setStyle(elements, property, value) {
  for (var i=0, length = elements.length; i < length; i++) {
    document.getElementById(elements[i]).style[property] = value;
  }
}

// 现在你可以这么写:
setStyle(['foo', 'bar', 'baz'], 'color', 'red');
setStyle(['foo', 'bar', 'baz'], 'width', '150px');

是不是觉得咱们NB坏了?你快算了吧!咱们可是JavaScript程序员呀!能不能用点脑子,来点真格的。也许我们可以只调用一次就能设置所有的样式。看下这个:

function setStyles(elements, styles) {
  for (var i=0, length = elements.length; i < length; i++) {
    var element = document.getElementById(elements[i]);

    for (var property in styles) {
      element.style[property] = styles[property];
    }
  }
}

//现在你只要这样写:
setStyles(['foo', 'bar', 'baz'], {
  color: 'red',
  width: '150px'
});

如果我们有很多元素想设置相同的样式,那这段代码真是为我们节省了不少时间。

外观模式之利:
使用外观模式的目的就是要让程序员过的更轻松一些,编写一次组合代码,然后就可以反复使用它,这有助于节省时间和精力。给一些复杂的问题提供一个简化接口。

外观方法方便了开发人员,斌共提供过了比较高层的功能,降低对外部代码的依赖程度,为应用系统的开发增加了一些额外的灵活性。通过使用外观模式,可以避免与下层子系统紧密耦合。这样就可以对这个系统进行修改而不会影响到客户代码。

外观模式之弊:
有时候外观元素也会带来一些不必要的额外负担。在实施一些套路之前应该认真掂量一下其实用性。有时相比一个庞杂的外观函数,其组成函数在力度方面更有吸引力。这是因为外观函数可能常常会执行一些你并不需要的任务。

对于简单的个人网站或少量营销网页来说,仅为工具提示和弹出式窗口这样一点增强行为就导入这个Javascript库可能并不明智。此时考虑只使用少许简单的外观元素而不是一个满是这类东西的库。

外观函数为执行各种复杂任务提供了一个简单的接口,它们使代码更容易维护和理解。它们还能弱化子系统和客户代码的耦合。把经常相伴出现的常用函数组合在一起。这个模式在DOM脚本编程这种需要面对葛洪不一致的浏览器接口的环境中很常用。

Javascript 相关文章推荐
简单的代码实现jquery定时器
Nov 17 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
jQuery定义插件的方法
Dec 18 Javascript
Three.js学习之几何形状
Aug 01 Javascript
vue组件实例解析
Jan 10 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
JQuery.validate在ie8下不支持的快速解决方法
May 18 #Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 #Javascript
JQuery解析XML数据的几个简单实例
May 18 #Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 #Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 #Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 #Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python探索之修改Python搜索路径
2017/10/25 Python
pandas数值计算与排序方法
2018/04/12 Python
python实现五子棋小游戏
2020/03/25 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
消防战士优秀事迹材料
2014/02/13 职场文书
《四季》教学反思
2014/04/08 职场文书
《春晓》教学反思
2014/04/20 职场文书
导游词开场白
2015/01/31 职场文书
门店店长岗位职责
2015/04/14 职场文书
工程合作意向书范本
2015/05/09 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
聘任书格式及范文
2015/09/21 职场文书