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

    }

}

2. 创建外观类

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");

    }

}

3. 使用外观类

const facade = new HomeAutomationFacade();

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/977339.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Deepseek本地化部署指南:在Linux环境下部署,windows远程web-ui访问(Ubuntu环境+window环境)

一、在Ubuntu服务器上部署DeepSeek模型 要在Ubuntu上通过Ollama安装和使用DeepSeek模型,可以按照以下步骤操作: 安装Ollama 1、使用命令安装Ollama 命令语句:curl -sSfL https://ollama.com/install.sh | sh 2、验证安装是否成功 安装完…

数据库(MySQL)二

MySQL 六、MySQL索引视图6.1 索引底层原理6.1.1 索引hash算法6.1.2 索引二叉树算法6.1.3 索引平衡二叉树算法6.1.4 索引BTREE树算法6.1.5 普通SQL全表扫描过程 6.2 索引分类6.2.1 按数据结构层次分类6.2.2 按字段数量层次分类6.2.3 按功能逻辑层次分类(面试题&#…

element ui的select选择框

我们首先先试一下&#xff0c;这个东西怎么玩的 <el-select v-model"select" change"changeSelect"><el-option value"香蕉"></el-option><el-option value"菠萝"></el-option><el-option value&quo…

git 的一些操作总结

1. Git 分支及基础操作指令 1.1 创建分支 # 创建新分支 git branch <branch_name># 创建并切换到新分支 git checkout -b <branch_name>1.2 切换分支 # 切换到指定分支 git checkout <branch_name># 切换到上一个分支 git checkout -1.3 查看分支 # 查看…

华为2025年技术发布会:智能汽车核心技术大爆发

近日&#xff0c;华为在鸿蒙智行尊界技术发布会上发布了多项智能汽车核心技术&#xff0c;涵盖智能驾驶、安全防护、通信系统、座舱交互及电池技术等领域&#xff0c;标志着其从“被动智能”向“自主智能”的战略升级。 以下是核心技术的综合梳理&#xff1a; 六大核心创新 途…

计算机视觉算法实战——产品分拣(主页有源码)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ 1. 领域简介✨✨ 产品分拣是工业自动化和物流领域的核心技术&#xff0c;旨在通过机器视觉系统对传送带上的物品进行快速识别、定位和分类&a…

WIN10 本地部署 BGE Embedding 向量化模型

WIN10 本地部署 BGE Embedding 向量化模型 1.下载 BGE 模型2.安装1.创建虚拟环境2.安装依赖3.本地测试 3.将服务封装为HTTP可调用形式1.生成向量值2.相似度测试 1.下载 BGE 模型 Hugging Face 官网 最好是科学上网&#xff0c;或者从其他渠道下载 2.安装 本文通过 Anconda …

8.spring对logback的支持

文章目录 一、入口二、源码解析LoggingApplicationListener 三、其它支持四、总结 本节以logback为背景介绍的 一、入口 gav: org.springframework.boot:spring-boot:3.3.4 spring.factories文件中有如下两个配置 org.springframework.boot.logging.LoggingSystemFactory\ …

【数据结构】(11) Map 和 Set

一、Map 和 Set 的简介 1、Set 和 Map Map 和 Set 是集合类框架学习的最后一部分。Map 和 Set 都是接口&#xff0c;需要通过 TreeSet、HashSet 和 TreeMap、HashMap 实例化。注意&#xff0c;Set 实现了 Collection&#xff0c;Map 并没有。 Set 存放的是键&#xff08;Key&a…

Word(2010)排版技巧

设置标题样式 选择需要设置的标题 如下图所示。选择文字后&#xff0c;点击对应的样式即可设置。 设置标题格式 设置字体格式 设置段落格式 显示所有样式 标题样式展示 建议 建议新建一个正文样式&#xff0c;可以命名为正文1&#xff0c;因为所有的样式参考的“样式基准…

Docker(Nginx)部署Vue

简介&#xff1a;目标使用docker将vue生成的dist文件&#xff0c;结合nginx生成镜像&#xff0c;然后运行&#xff1b; 1、首选确保vue项目正确运行&#xff0c;并能正确打包dist文件&#xff1b; 2、查看已经生成的dist文件 3、将dist文件打包为rar文件或者zip文件&#xf…

Helix——Figure 02发布的通用人形机器人控制VLA:不用微调即可做多个任务的快与慢双系统,让两个机器人协作干活(含清华HiRT详解)

前言 过去一周&#xff0c;我花了很大的心思、力气&#xff0c;把deepseek的GRPO、MLA算法的代码解析通透&#xff0c;比如GRPO与PPO的详细对比&#xff0c;再比如MLA中&#xff0c;图片 公式 代码的一一对应&#xff0c;详见此专栏《火爆全球的DeepSeek系列模型》 2.20日晚&…

【学习笔记】LLM+RL

文章目录 1 合成数据与模型坍缩&#xff08;model collapse&#xff09;,1.1 递归生成数据与模型坍缩1.2 三种错误1.3 理论直觉1.4 PPL指标 2 基于开源 LLM 实现 O1-like step by step 慢思考&#xff08;slow thinking&#xff09;&#xff0c;ollama&#xff0c;streamlit2.1…

七.智慧城市数据治理平台架构

一、整体架构概览 智慧城市数据治理平台架构描绘了一个全面的智慧城市数据治理平台&#xff0c;旨在实现城市数据的统一管理、共享和应用&#xff0c;为城市运行、管理和决策提供数据支撑。整体架构呈现出分层、模块化、集约化的特点&#xff0c;并强调数据安全和标准规范。 智…

家用路由器的WAN口和LAN口有什么区别

今时今日&#xff0c;移动终端盛行的时代&#xff0c;WIFI可以说是家家户户都有使用到的网络接入方式。那么路由器当然也就是家家户户都不可或缺的设备了。而路由器上的两个实现网络连接的基础接口 ——WAN 口和 LAN 口&#xff0c;到底有什么区别&#xff1f;它们的功能和作用…

SpringSecurity的核心过滤器-CsrfFilter

Spring Security除了认证授权外功能外,还提供了安全防护功能。本文我们来介绍下SpringSecurity中是如何阻止CSRF攻击的。 一、什么是CSRF攻击 跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF…

hbase笔记总结1

hbase是nosql的一种&#xff0c;非关系型数据库&#xff0c;not only sql&#xff0c;可处理大规模、高并发的数据&#xff0c;是web2.0以后的产物hbase的扩展性和灵活性更好&#xff0c;而且筛选能力相较于MySQL更优nosql的四大特点&#xff1a; 灵活的数据模型 &#xff08;1…

2025年微店平台商品详情接口调用指南(Python代码示例)

一、接口概述 微店商品详情接口&#xff08;/item/get&#xff09;提供商品基础信息、SKU数据、库存价格等核心数据获取能力&#xff0c;采用RESTful风格&#xff0c;返回JSON格式数据。 二、前期准备 创建微店开放平台应用 获取API权限&#xff1a;商品读取权限&#xff08;…

C# httpclient 和 Flurl.Http 的测试

关于C#调用接口或Post,Flurl封装了httpclient, CSDN有哥们提供了一个公网的测试网站&#xff0c;可以测试Post调用&#xff0c;我写了2个函数&#xff0c;测试httpclient和Flurl使用Post: async 和 await 是成对使用的&#xff0c;为了接受web异步返回的数据&#xff0c;winfor…

ONNX转RKNN的环境搭建和部署流程

将ONNX模型转换为RKNN模型的过程记录 工具准备 rknn-toolkit:https://github.com/rockchip-linux/rknn-toolkit rknn-toolkit2:https://github.com/airockchip/rknn-toolkit2 rknn_model_zoo:https://github.com/airockchip/rknn_model_zoo ultralytics_yolov8:https://github…