设计模式中的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 进度条 实现代码
Jul 30 Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP遍历二维数组的代码
2011/04/22 PHP
php加密解密实用类分享
2014/01/07 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Python类型转换的魔术方法详解
2020/12/23 Python
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
感恩节活动策划方案
2014/05/16 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
python not运算符的实例用法
2021/06/30 Python
mysql 索引合并的使用
2021/08/30 MySQL