深入理解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里的条件判断
Feb 27 Javascript
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
js实现禁止中文输入的方法
2015/01/14 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
零基础小白多久能学会python
2020/06/22 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Python爬取某平台短视频的方法
2021/02/08 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
2014年班组工作总结
2014/11/20 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server