深入理解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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
JavaScript基本对象
Jan 11 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
详解小程序循环require之坑
Mar 08 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
微信小程序实现签到弹窗动画
Sep 21 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利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
canvas时钟效果
2017/02/16 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python使用正则筛选信用卡
2019/01/27 Python
基于python图像处理API的使用示例
2020/04/03 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
无犯罪记录证明
2014/09/19 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
感恩教育观后感
2015/06/17 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Android Studio 计算器开发
2022/05/20 Java/Android