设计模式中的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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
ES6 Symbol在对象中的作用实例分析
Jun 06 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 FTP类的详解
2013/06/13 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
简单的分页代码js实现
2016/05/17 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
python解决字符串倒序输出的问题
2018/06/25 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
Python中的集合介绍
2019/01/28 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
安全生产网格化管理实施方案
2014/03/01 职场文书
学生检讨书
2015/01/27 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
元宵节晚会主持词
2015/07/01 职场文书
团组织关系介绍信
2019/06/24 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript