设计模式中的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 相关文章推荐
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
node crawler如何添加promise支持
Feb 01 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导入大量数据到mysql性能优化技巧
2014/12/29 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
Node.js编码规范
2014/07/14 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
Vuex之理解Getters的用法实例
2017/04/19 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
详解vue.js之props传递参数
2017/12/12 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
简单易懂的python环境安装教程
2017/07/13 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python字典排序的方法
2019/10/12 Python
keras导入weights方式
2020/06/12 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
致400米运动员广播稿
2014/02/07 职场文书
大学军训感言1000字
2014/02/25 职场文书