Javascript设计模式 - 05 - 外观模式

简介

外观模式为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用，他可以将一些复杂的操作封装起来，并创建一个简单的接口用于调用

个人理解

主要用于接口封装、兼容性封装、遗留代码封装

外观模式的作用是对客户屏蔽一组子系统的复杂性，外观模式对客户提供一个简单易用的高层接口，高层接口会把客户的请求转发给子系统来完成具体的功能实现

外观模式与普通的封装

外观模式容易跟普通的封装实现混淆，两者都是封装一些事物，但外观模式的关键是定义一个高层的接口去封装一组 ‘子系统’，这个‘子系统’至少应该是一组函数的集合，这些函数相互协作，可以组成一个系统中相对独立的部分

特点

• 为一组子系统提供一个简单便利的访问入口
• 隔离客户与复杂子系统之间的联系，客户不用去了解子系统的细节

代码

    function addEvent(dom, type, fn) {if (dom.addEventListener) {dom.addEventListener(type, fn, false);} else if (dom.attachEvent) {dom.attachEvent('on' + type, fn);} else {dom['on' + type] = fn;}}var btn = document.getElementById('btn');addEvent(btn, 'click', function () {console.log('btn is click');})

文章列表

1. javascript设计模式 – 设计原则
2. JavaScript设计模式–高阶函数
3. Javascript 设计模式 - 01 - 原型模式
4. Javascript 设计模式 - 02 - 单例模式
5. Javascript 设计模式 - 03 - 建造者模式
6. Javascript 设计模式 - 04 - 工厂模式
7. Javascript 设计模式 - 05 - 外观模式
8. Javascript 设计模式 - 06 - 代理模式
9. Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）
10. Javascript 设计模式 - 08 - 策略模式
11. Javascript 设计模式 - 09 - 命令模式
12. Javascript 设计模式 - 10 - 迭代器模式
13. Javascript 设计模式 - 11 - 职责链模式
14. Javascript 设计模式 - 12 - 适配器模式
15. Javascript 设计模式 - 13 - 模板方法
16. Javascript 设计模式 - 14 - 组合模式
17. Javascript 设计模式 - 15 - 享元模式
18. Javascript 设计模式 - 16 - 中介者模式
19. Javascript 设计模式 - 17 - 装饰者模式
20. Javascript 设计模式 - 18 - 状态模式