深入理解JavaScript系列（30）：设计模式之外观模式详解
更新时间：2015年03月03日 11:25:03 投稿：junjie
这篇文章主要介绍了深入理解JavaScript系列（30）：设计模式之外观模式详解,外观模式（Facade）为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用,需要的朋友可以参考下
介绍
外观模式（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与遗留代码交互所有的复杂工作。
参考：大话设计模式
您可能感兴趣的文章:
- 设计模式中的facade外观模式在JavaScript开发中的运用
- JavaScript设计模式之外观模式介绍
- JavaScript设计模式之外观模式实例
- javascript设计模式 – 装饰模式原理与应用实例分析
- javascript设计模式 – 组合模式原理与应用实例分析
- javascript设计模式 – 桥接模式原理与应用实例分析
- javascript设计模式 – 适配器模式原理与应用实例分析
- JS中间件设计模式的深入探讨与实例分析
- javascript设计模式 – 建造者模式原理与应用实例分析
- javascript设计模式 – 原型模式原理与应用实例分析
- javascript设计模式 – 外观模式原理与用法实例分析
相关文章
本文详细讲解了JavaScript图表插件highcharts的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
鉴于有同学在学习的时候容易混肴，所以笔者还是将其加以区别,需要的朋友可以参考下2013-07-07
本节是javascript语言的一个快速预览，也是本书的第一部分快速预览。有想阅读此书的小伙伴，建议先读下本系列文章。2015-02-02
这篇文章主要介绍了HTML form表单提交方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
Promise 是 ES6 新增的一个异步解决方案，它同 await 一样，是异步的解决方案，但是相比于 await，Promise 可以同时统一处理多个异步操作。这一点是很方便的。下面我们来一起学习一下吧2019-06-06
当一个事件处理器被触发时，名为Event的类实例会作为第一个参数传入处理器中，下面为大家详细介绍下它的应用2013-05-05
下面小编就为大家带来一篇javascript 继承学习心得总结。小编觉得挺不错的。现在分享给大家。给大家做个参考2016-03-03
上下文是从英文context翻译过来，指的是一种环境。在软件工程中，上下文是一种属性的有序序列，它们为驻留在环境内的对象定义环境。在对象的激活过程中创建上下文，对象被配置为要求某些自动服务。又比如计算机技术中，相对于进程而言，上下文就是进程执行时的环境2021-10-10
JavaScript学习笔记（一） js基本语法，想要学习js的朋友可以参考下。2011-10-10
这篇文章主要介绍了简介JavaScript中的setTime()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
最新评论