深入理解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 相关文章推荐
Javascript变量作用域详解
Dec 06 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
WebPack基础知识详解
Jan 16 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
JS实现秒杀倒计时特效
Jan 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-redis中的sort排序函数总结
2015/07/08 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php实现网站留言板功能
2015/11/04 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
python中尾递归用法实例详解
2015/04/28 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python爬虫文件下载图文教程
2018/12/23 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
工地安全检查制度
2014/02/04 职场文书
市场专员岗位职责
2014/02/14 职场文书
初中生评语大全
2014/04/24 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
vue自定义右键菜单之全局实现
2022/04/09 Vue.js