JavaScript设计模式 -- 外观模式

外观模式(Facade Pattern)是一种设计模式,用于为复杂的子系统提供一个简单的接口,以减少子系统间的依赖和复杂性。在 JavaScript 中实现外观模式,通常是为了提供一个统一的接口来简化客户端与多个子系统交互的过程。

外观模式的优点

简化接口:通过单一的接口隐藏了系统的复杂性,使得客户端使用更加简单。

减少依赖:降低了客户端与子系统之间的耦合度,因为客户端不需要直接与子系统交互。

提高安全性:可以在外观中加入访问控制,限制客户端对子系统的直接访问。

外观模式的结构

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

Facade(外观角色):为多个子系统对外提供一个共同的接口。

Subsystem(子系统角色):一系列紧密相关的类的集合,它们共同完成了一个特定的功能。

示例实现

假设我们有一个复杂的系统,包括一个灯光控制模块、一个空调控制模块和一个电视控制模块,我们可以创建一个外观类来简化这些模块的交互。

  1. 定义子系统

class Light {

turnOn() {

console.log("Light is on");

}

turnOff() {

console.log("Light is off");

}

}

class AirConditioner {

setTemperature(temp) {

console.log(`Air conditioner temperature set to ${temp}`);

}

}

class TV {

turnOn() {

console.log("TV is on");

}

turnOff() {

console.log("TV is off");

}

setChannel(channel) {

console.log(`TV channel set to ${channel}`);

}

}

  1. 创建外观类

class HomeAutomationFacade {

constructor() {

this.light = new Light();

this.airConditioner = new AirConditioner();

this.tv = new TV();

}

watchTV() {

this.tv.turnOn();

this.tv.setChannel(10); // 假设我们想看第10频道新闻。

console.log("Ready to watch TV");

}

sleep() {

this.tv.turnOff();

this.light.turnOff();

this.airConditioner.setTemperature(25); // 假设我们想设置空调温度为25度。

console.log("Preparing for sleep");

}

}

  1. 使用外观类

const facade = new HomeAutomationFacade();

facade.watchTV(); // 使用外观类简化操作电视的过程。

facade.sleep(); // 使用外观类简化准备睡觉的过程。

通过这种方式,客户端代码只需要与 HomeAutomationFacade 类交互,而不需要直接与 Light、AirConditioner 和 TV 类交互,从而简化了客户端代码并降低了系统的耦合度。这就是外观模式在 JavaScript 中的典型应用。

相关推荐
程序员Sunday7 小时前
JavaScript 事件循环面试题,宏任务与微任务怎么执行|Sunday面试指南
开发语言·javascript·面试·校招·事件循环·程序员sunday
默_笙8 小时前
🌊 向量库和 ES 都查不出"关系",我只好给奶茶建了一张人脉网
前端·javascript
思无邪669 小时前
用 AI 做 JS 逆向:从抓包到复现的完整方法论
开发语言·javascript·人工智能
福兮说10 小时前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
可乐鸡翅yeah_11 小时前
video.js 集成 hls.js 开发 M3U8 播放器,新手高频踩坑
开发语言·前端·javascript·后端·ecmascript·m3u8·音视频在线播放
用户1179536547813 小时前
TRAE vs Claude Code 性能对比:从代码生成、多文件重构到底层吞吐,谁更适合你的日常开发?
javascript
kill52214 小时前
useRef
前端·javascript·react.js
米多科技14 小时前
我做了一个 3D 虚拟世界基底,在上面再搭 3D 世界或元宇宙,事半功倍
javascript·人工智能·github
霍营_托尼15 小时前
纯前端播 40GB 本地视频?我把浏览器改造成了「磁盘流式」播放器
前端·javascript·音视频开发
西柚小萌新15 小时前
【LLM&&AI应用开发 八股文】--4.2.Agent智能体(中)
前端·javascript·react.js