设计模式-外观模式

简介

外观模式(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();

优点

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

缺点

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

总结

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

相关推荐
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
噢,我明白了7 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__7 小时前
APIs-day2
javascript·css·css3
关你西红柿子8 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根8 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.8 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容,webpack类型,全程扣代码,最后实现接口调用翻译,仅供学习参考
javascript·python·学习·webpack·分享·逆向分析
Aphasia3119 小时前
一次搞懂 JS 对象转换,从此告别类型错误!
javascript·面试
m0_748256569 小时前
Vue - axios的使用
前端·javascript·vue.js
m0_748256349 小时前
QWebChannel实现与JS的交互
java·javascript·交互
胡西风_foxww9 小时前
【es6复习笔记】函数参数的默认值(6)
javascript·笔记·es6·参数·函数·默认值