设计模式-外观模式

简介

外观模式(Facade Pattern)是软件工程中用于提供一个统一的接口来访问复杂子系统的结构型设计模式。这个模式的主要目的是隐藏系统的复杂性,并为客户端提供一个可以访问系统的接口。它通常涉及一个单一的类,这个类提供了客户端所需的方法,而这些方法则将客户端的请求委托给系统中的一个或多个模块处理

概念

外观模式通过创建一个提供更高级别操作的外观类来简化与底层系统的交互。这允许用户通过一个简化的接口与一个复杂的子系统进行交互,而不需要了解或处理子系统中的多个组件和复杂的依赖关系

结构组成

外观模式通常包括以下几个角色:

  • Facade(外观类):这个类知道哪些子系统类负责处理请求,将客户端的请求代理给适当的子系统对象。
  • Subsystem Classes(子系统类):这些类实现了子系统的功能。它们处理由 Facade 对象指派的工作。子系统类不知道外观的存在,它们只处理通过方法调用来的任务。

实现步骤

实现外观模式通常包括以下步骤:

  • 识别复杂子系统的组件:确定哪些系统功能是复杂的,需要被简化。
  • 创建外观类:设计一个外观类,它将包含为客户端提供服务的方法。
  • 委托调用:在外观类中,将客户端的请求委托给相应的子系统对象处理。
  • 客户端交互:客户端代码通过外观类的方法与子系统进行交互,而不是直接与子系统交互。

代码示例加深理解

考虑一个家庭影院系统,它包括灯光控制、音响系统和电视机等多个子系统。我们可以创建一个外观类来简化这个系统的操作:

javascript 复制代码
// 子系统 1:灯光控制
class Lighting {
    dimLight() {
        console.log("Lights are dimmed");
    }
}

// 子系统 2:音响系统
class SoundSystem {
    setVolume(level) {
        console.log(`Volume set to ${level}`);
    }
}

// 子系统 3:电视机
class Television {
    turnOn() {
        console.log("Television turned on");
    }
}

// 外观类
class HomeTheaterFacade {
    constructor() {
        this.lighting = new Lighting();
        this.soundSystem = new SoundSystem();
        this.television = new Television();
    }

    watchMovie() {
        this.lighting.dimLight();
        this.soundSystem.setVolume(5);
        this.television.turnOn();
        console.log("Enjoy your movie!");
    }
}

// 客户端代码
const homeTheater = new HomeTheaterFacade();
homeTheater.watchMovie();

优点

  • 简化接口:外观模式使得客户端从一个简单的接口与复杂子系统进行交互,提高了使用的便捷性。
  • 减少系统依赖:客户端不需要知道系统内部的复杂关系,所有的依赖都由外观类处理。

缺点

  • 不符合开闭原则:如果子系统发展或增加功能,外观类可能需要修改,违反了开闭原则。
  • 可能成为所有类的依赖中心:如果过度使用外观模式,外观类可能会变得非常庞大,承担太多的职责。

总结

外观模式是一个非常实用的设计模式,适用于那些需要定义简单接口来访问复杂系统的情况,尤其是在整合和维护大型软件系统时非常有效 。在实际应用中,它帮助我们隐藏了系统的复杂性,提供了一个清晰和简单的接口给系统的使用者。这不仅提高了系统的可用性,也增加了可维护性,使得未来对系统的修改和扩展变得更加容易

相关推荐
小镇程序员41 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron
想自律的露西西★2 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳2 小时前
vue3:瀑布流
前端·javascript·vue.js
霍先生的虚拟宇宙网络2 小时前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing2 小时前
第十章JavaScript的应用
开发语言·javascript·ecmascript