深入理解JavaScript系列(30):设计模式之外观模式详解


Posted in Javascript onMarch 03, 2015

介绍

外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用。

正文

外观模式不仅简化类中的接口,而且对接口与调用者也进行了解耦。外观模式经常被认为开发者必备,它可以将一些复杂操作封装起来,并创建一个简单的接口用于调用。

外观模式经常被用于JavaScript类库里,通过它封装一些接口用于兼容多浏览器,外观模式可以让我们间接调用子系统,从而避免因直接访问子系统而产生不必要的错误。

外观模式的优势是易于使用,而且本身也比较轻量级。但也有缺点 外观模式被开发者连续使用时会产生一定的性能问题,因为在每次调用时都要检测功能的可用性。

下面是一段未优化过的代码,我们使用了外观模式通过检测浏览器特性的方式来创建一个跨浏览器的使用方法。

var addMyEvent = function (el, ev, fn) {

    if (el.addEventListener) {

        el.addEventListener(ev, fn, false);

    } else if (el.attachEvent) {

        el.attachEvent('on' + ev, fn);

    } else {

        el['on' + ev] = fn;

    }

};

再来一个简单的例子,说白了就是用一个接口封装其它的接口:
var mobileEvent = {

    // ...

    stop: function (e) {

        e.preventDefault();

        e.stopPropagation();

    }

    // ...

};

总结

那么何时使用外观模式呢?一般来说分三个阶段:

首先,在设计初期,应该要有意识地将不同的两个层分离,比如经典的三层结构,在数据访问层和业务逻辑层、业务逻辑层和表示层之间建立外观Facade。

其次,在开发阶段,子系统往往因为不断的重构演化而变得越来越复杂,增加外观Facade可以提供一个简单的接口,减少他们之间的依赖。

第三,在维护一个遗留的大型系统时,可能这个系统已经很难维护了,这时候使用外观Facade也是非常合适的,为系系统开发一个外观Facade类,为设计粗糙和高度复杂的遗留代码提供比较清晰的接口,让新系统和Facade对象交互,Facade与遗留代码交互所有的复杂工作。

参考:大话设计模式

Javascript 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 #Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 #Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 #Javascript
JS运动基础框架实例分析
Mar 03 #Javascript
jQuery DOM插入节点操作指南
Mar 03 #Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 #Javascript
jQuery DOM删除节点操作指南
Mar 03 #Javascript
You might like
php GeoIP的使用教程
2011/03/09 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python实现115网盘自动下载的方法
2014/09/30 Python
Python函数的周期性执行实现方法
2016/08/13 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python更新所有已安装包的操作
2020/02/13 Python
python如何实现word批量转HTML
2020/09/30 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
sort命令的作用和用法
2013/08/25 面试题
人事助理自荐信
2014/02/02 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
计划生育工作汇报
2014/10/28 职场文书
仓库管理制度范本
2015/08/04 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
redis中lua脚本使用教程
2021/11/01 Redis