外观/门面模式（Facade）

最新推荐文章于 2023-01-01 20:38:14 发布

魔豆爸

最新推荐文章于 2023-01-01 20:38:14 发布

阅读量112

点赞数

分类专栏： Design pattern 文章标签： facade

Design pattern 专栏收录该内容

5 篇文章

订阅专栏

本文阐述了外观模式在JavaScript中的使用场景、优势及弊端，重点介绍了如何通过外观模式简化复杂接口，提高代码可读性和减少耦合度。以jQuery为例，详细展示了外观模式在事件处理和Ajax操作中的经典应用。

Facade Pattern 国内有些书译为门面模式，如「Java与模式」，「JavaScript设计模式」。有些则译为外观模式，如「设计模式：可复用面向对象软件的基础」，「Java设计模式」。这里使用名词“外观模式”。

外观模式属于接口型模式，它提供一个更方便，高层接口，使用一致性的界面使得API更加容易使用。它有两个作用：

简化复杂接口
解耦和，屏蔽客户端对子系统的直接访问

外观模式在JavaScript中被众多类库频繁使用。由于早期各浏览器提供的API差异性较大，类库的基本作用之一是扫平这些凹凸不平，提供统一接口供前端工程师使用。使用外观模式，我们可以间接地与一个复杂子系统打交道，与直接访问相比耦合性更低，更不易出错。

比如添加事件标准浏览器使用addEventListener，旧版本IE使用attachEvent，可能自己需要封装一个addEvent函数，这个addEvent函数就是一个门面。

function addEvent(el, type, fn) {
    if (el.addEventListener) {
        el.addEventListener(type, fn, false)
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, fn)
    } else {
        el['on' + type] = fn
    }
}

实际就是将两个不同的函数放到自己定义的函数里，之后使用该函数完成特定功能而不再使用有差异性的函数。

又如处理DOM事件时，有时会同时使用以下方法

e.stopPropagation()
e.preventDefault()

可以使用外观模式创建一个新方法stop同时调用这两个方法

function stop(e) {
    e.stopPropagation()
    e.preventDefault()   
}

jQuery中大量使用外观模式，比如数据缓存模块，内部internalData，internalRemoveData是低级API，实现核心功能，外部提供了data，removeData这两个高级API供客户端程序员使用。

事件模块也是如此，内部有jQuery.event.add，jQuery.event.remove，jQuery.event.trigger等低级API，向外提供了on/bind，off/unbind，trigger等高级API，甚至再利用on又提供了.click/.dblclick/mouseover/mousedown等更快捷的添加事件API。

Ajax模块也是外观模式的典型例子，jQuery提供了一个基本的，低级接口$.ajax方法，通过封装$.ajax产生了一些便利函数$.get, $.post。再通过封装$.get又产生了$.getJSON，$.getScript等更高级的方法。

jQuery里的事件模块和Ajax模块可以说是外观模式在JS中的经典应用。

适用场合

对于那些反复同时出现的代码，如函数a和b多次同时出现在代码中，应考虑将a，b组合起来放到一个新函数中。

之利

简化了一些复杂接口（如$.ajax, $.event.add），清除不再需要的大对象以及提供一种更加单一，便利的方式展现接口功能。编写一次组合代码，就可以反复使用它，节省了代码量，时间和精力。它还提供了较高层的功能，抽象，降低客户端代码对底层接口的耦合。如$.getJSON，通过$.ajax方法也可以得到相同的效果。但每次都需要配置相同的参数，如果获取JSON的需求很频繁，页面中的相同的代码就需要写很多次。而封装一次$.getJSON，之后就少写很多代码，且该方法更直观。

之弊

外观模式并非必不可少，同样的功能不使用它也能完成功能。如不使用$.getJSON，通过$.ajax方法也可以得到相同的效果。此外由于增加了一层闭包，性能会有一定降低。