深入理解JavaScript系列（30）：设计模式之外观模

深入理解JavaScript设计模式之外观模式详解

介绍

在软件设计中，外观模式（Facade）为复杂系统提供了一个简洁的界面。此模式的主要目标是简化大型或复杂系统的使用，通过提供一个统一的接口来访问子系统中的一组接口。外观模式在JavaScript中广泛应用，特别是在需要兼容多浏览器的场合。

正文

外观模式是一种结构型设计模式，它通过提供一个高级接口来简化子系统的使用。在JavaScript中，外观模式的应用主要体现在以下几个方面：

一、简化接口：外观模式通过封装复杂的操作并创建一个简单的接口来调用，使得代码更加简洁易懂。例如，在狼蚁网站的SEO优化代码中，我们使用了外观模式通过检测浏览器特性的方式来创建一个跨浏览器的使用方法。代码如下：

```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;

}

};

```

二、解耦接口与调用者：外观模式不仅简化了接口，还对接口与调用者进行了解耦。这意味着，即使子系统发生变化，调用者也不需要更改代码。这在大型项目中尤其重要，因为子系统可能会因为不断的重构和演化而变得越来越复杂。增加外观Facade可以提供一个简单的接口，减少它们之间的依赖。

三、遗留系统的改造：在维护一个遗留的大型系统时，可能这个系统已经很难维护了。这时，我们可以使用外观模式来为系统提供一个清晰的接口。例如，为设计粗糙和高度复杂的遗留代码开发一个外观Facade类。这个Facade类负责与遗留代码交互所有的复杂工作，让新系统和Facade对象交互，从而简化了系统的使用。

在JavaScript中，一个简单的外观模式的例子就是用一个接口封装其它的接口。例如：

```javascript

var mobileEvent = {

// ...

s: function (e) {

e.preventDefault();

e.sPropagation(); // 外观模式封装了内部的复杂操作

}

// ...

};

```

外观模式是一种非常实用的设计模式，它可以简化复杂系统的使用，减少接口与调用者之间的耦合，提高系统的可维护性。在JavaScript开发中，我们应该根据实际情况灵活运用外观模式，以提高代码的质量和可维护性。参考大话设计模式，深入理解并应用外观模式，将有助于我们更好地设计和开发JavaScript应用程序。在适当的阶段使用外观模式，我们可以更有效地管理和组织代码，提高软件的质量和效率。