如何运用外观模式简化JavaScript设计模式中的复杂用法？

本文共计1082个文字，预计阅读时间需要5分钟。

本示例介绍了JavaScript设计模式——外观模式及其原理与用法。分享给家长供参考，内容如下：

介绍：外观模式是一种常用的结构型设计模式，使用频率非常高。它通过引入一个外观对象，将复杂的子系统与客户端解耦，使得客户端可以简单调用外观对象来访问子系统，而无需直接操作各个子系统。

原理：外观模式通过一个外观类来管理一组子系统，客户端只需要与外观类交互，无需知道各个子系统之间的具体实现。外观类内部维护了一个子系统对象的集合，客户端通过调用外观类的方法，间接调用子系统的方法。

用法：以下是一个简单的外观模式示例：

javascript// 系统子系统function subsystem1() { console.log('子系统1被调用');}

function subsystem2() { console.log('子系统2被调用');}

// 外观类function Facade() { this.subsystem1=subsystem1; this.subsystem2=subsystem2;}

// 客户端var facade=new Facade();facade.subsystem1(); // 子系统1被调用facade.subsystem2(); // 子系统2被调用

在这个例子中，客户端通过调用`Facade`类的实例方法，间接访问了`subsystem1`和`subsystem2`两个子系统。这种方式简化了客户端与子系统的交互，降低了系统间的耦合度。

本文实例讲述了javascript设计模式 – 外观模式原理与用法。分享给大家供大家参考，具体如下：

介绍：外观模式是一种使用频率非常高的结构型设计模式，它通过引入一个外观角色来简化客户端与子系统之间的交互，为复杂的子系统调用提供一个统一的入口，隐藏系统复杂度，降低子系统与客户端的耦合度。

定义： 为子系统中的一组接口提供一个统一的入口。外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。

场景：我们还是用画圆的方式来介绍下外观模式。

示例：

var Rectangle = function(){ this.draw = function(){ console.log('画一个矩形'); } } var Circle = function(){ this.draw = function(){ console.log('画一个圆'); } } var Triangle = function(){ this.draw = function(){ console.log('画一个三角形'); } } var ShapeMaker = function(){ this.rectangle = new Rectangle(); this.circle = new Circle(); this.triangle = new Triangle(); this.drawRectangle = function(){ this.rectangle.draw(); } this.drawCircle = function(){ this.circle.draw(); } this.drawTriangle = function(){ this.triangle.draw(); } } var shapeMaker = new ShapeMaker(); shapeMaker.drawRectangle(); //画一个矩形 shapeMaker.drawCircle(); //画一个圆 shapeMaker.drawTriangle(); //画一个三角形

是不是豁然开朗？其实我们日常最常用的就是外观模式。我们的工具类，jquery，包括一些浏览器兼容，我们都会把他们封装到一个对象里。

这就是外观模式提倡的把复杂的操作封装到一个简单接口中。几乎所有的涉及多个业务对象交互的场景都可以考虑使用外观模式进行重构。

外观模式总结：

优点：
* 对客户端屏蔽了子系统组件，减少了客户端所需处理的对象数目，并且提升使用便捷度。
* 实现了客户端与子系统之间的松耦合关系，这使得子系统的变化不会影响客户端。

缺点：
* 不能姮好的限制客户端直接使用子系统类
* 如果设计不当，增加新的子系统可能需要修改外观类的源代码，违背了开关原则

适用场景：
* 需要对一个复杂子系统提供一个简单入口时可以采用外观模式

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。