09外观模式.md

外观模式

又称门面模式，定义一个将子系统的一组接口集成在一起的高层接口，以提供一个外观。例如：遥控器等

解决问题：

• 封装交互，简化使用

优点：

• 使用简单，符合最少知识原则，增强了可阅读性和可移植性
• 解耦合：访问者和子系统
• 结构清晰，提升安全性

缺点：

• 不符合开放-封闭原则：如果外观模式出错，只能修改，因为外观模式是子系统的唯一出口

使用场景：

• 维护设计难以理解的遗留系统（兼容性处理）
• 组合小模块，以外观模式提供清晰的接口
• 构建多层系统，使用外观模式分层

与其他设计模式区别：

• 外观模式：封装使用者对子系统内模块的直接交互，方便使用者对子系统的调用
• 中介者模式：封装子系统间各个模块之间的直接交互，松散模块间的耦合

代码实现

function addEvent(element, type, fn) {
    if (element.addEventListener) {      // 支持 DOM2 级事件处理方法的浏览器
        element.addEventListener(type, fn, false)
    } else if (element.attachEvent) {    // 不支持 DOM2 级但支持 attachEvent
        element.attachEvent('on' + type, fn)
    } else {
        element['on' + type] = fn        // 都不支持的浏览器
    }
}

var myInput = document.getElementById('myinput')

addEvent(myInput, 'click', function() {
    console.log('绑定 click 事件')
})

参考

JavaScript 设计模式精讲 - 第三章 15外观模式