设计模式中的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 EasyUI 数字格式化处理示例
May 05 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
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
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
详解js的六大数据类型
2016/12/27 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue服务端渲染缓存应用详解
2018/09/12 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
《日月潭》教学反思
2014/02/28 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
女儿满月酒致辞
2015/07/29 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS