【SOLID原则前端中的应用】开闭原则(Open/Closed Principle)- vue3示例

开闭原则(Open/Closed Principle)在Vue 3中的应用

开闭原则(Open/Closed Principle,OCP)规定,软件实体(类、模块、函数等)应该对扩展开放,对修改关闭。
也就是说,我们应该能够通过扩展的方式来添加新功能,而不是通过修改已有的代码。
在Vue 3中,我们可以通过组合组件、插槽(slots)、和提供/注入(provide/inject)等机制来实现这一原则。

在这里插入图片描述

示例场景:通知组件的扩展

假设我们有一个基本的通知组件BaseNotification,我们希望在不修改这个组件的基础上,通过扩展的方式添加不同类型的通知(如错误通知、成功通知等)。

1. 创建基本通知组件 BaseNotification.vue
<!-- BaseNotification.vue -->
<template><div :class="['notification', typeClass]"><slot></slot></div>
</template><script>
export default {name: 'BaseNotification',props: {type: {type: String,default: 'info'}},computed: {typeClass() {return `notification--${this.type}`;}}
};
</script><style scoped>
.notification {padding: 20px;border-radius: 4px;margin: 10px 0;
}
.notification--info {background-color: #d9edf7;color: #31708f;
}
.notification--error {background-color: #f2dede;color: #a94442;
}
.notification--success {background-color: #dff0d8;color: #3c763d;
}
</style>
2. 创建特定类型的通知组件 ErrorNotification.vueSuccessNotification.vue

我们通过扩展 BaseNotification 来创建特定类型的通知组件,而不是修改 BaseNotification

<!-- ErrorNotification.vue -->
<template><BaseNotification type="error"><slot></slot></BaseNotification>
</template><script>
import BaseNotification from './BaseNotification.vue';export default {name: 'ErrorNotification',components: {BaseNotification}
};
</script>
<!-- SuccessNotification.vue -->
<template><BaseNotification type="success"><slot></slot></BaseNotification>
</template><script>
import BaseNotification from './BaseNotification.vue';export default {name: 'SuccessNotification',components: {BaseNotification}
};
</script>
3. 使用组件

在父组件中使用这些通知组件。

<!-- App.vue -->
<template><div id="app"><BaseNotification type="info">This is an info notification.</BaseNotification><ErrorNotification>This is an error notification.</ErrorNotification><SuccessNotification>This is a success notification.</SuccessNotification></div>
</template><script>
import BaseNotification from './components/BaseNotification.vue';
import ErrorNotification from './components/ErrorNotification.vue';
import SuccessNotification from './components/SuccessNotification.vue';export default {name: 'App',components: {BaseNotification,ErrorNotification,SuccessNotification}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
总结

在这个示例中,我们通过以下方式实现了开闭原则:

  1. 基本通知组件 BaseNotification:这个组件是对扩展开放的,对修改关闭的。它提供了一个基础的通知样式,并通过type属性来控制不同类型的通知样式。

  2. 特定类型的通知组件 ErrorNotificationSuccessNotification:这些组件通过扩展BaseNotification来实现特定类型的通知,而不需要修改BaseNotification的代码。我们使用了插槽(slots)来传递内容,从而实现灵活的内容插入。

通过这种方式,我们可以在不修改已有代码的情况下,通过创建新的组件来扩展功能,完全遵循了开闭原则。这不仅使代码更加稳定和可维护,还提升了代码的可扩展性。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型网站软件系统架构演进过程

在我们的生活中,通常会使用大型网站系统,比如购物网站淘宝,京东,阿里1688;大型搜索引擎网站百度,社交类的如腾讯旗下的微信,QQ及新浪旗下的微博等,他们通常都有一下特点: 高并发、大流量&#xff1a;这些系统必须能够处理成千上万甚至数百万的并发用户请求&#xff0c;以及持续…

Dubbo内部通信流程

我当时在学习的过程中搭建过demo&#xff0c;具体流程就是&#xff0c;我先定义了一个api接口模块&#xff0c;还定义一个服务提供者模块&#xff0c;然后服务提供方实现该接口&#xff0c;定义该方法具体的实现impl类&#xff0c;服务提供方启动时&#xff0c;将要暴露的服务和…

在线快速制作二维码的技巧,支持生成多种内容二维码

现在用二维码来分享内容是很多场景下会使用的一种方式&#xff0c;常见的展示内容有图片、文件、文本、音频、视频等&#xff0c;都可以生成二维码之后。通过手机扫码来查看内容&#xff0c;有利于内容的快速传播&#xff0c;并且用户获取信息也更加的方便。 下面来教大家使用…

Web应用防火墙用在哪些场景?

WAF是Web Application Firewall的缩写&#xff0c;翻译为“Web应用防火墙”是一种网络安全设备或服务&#xff0c;用于保护Web应用程序免受各种网络攻击和漏洞的影响。 WAF特别设计用于识别和阻止特定于Web应用程序的攻击&#xff0c;例如SQL注入、跨站脚本(XSS)、跨站请求伪造…

力扣习题--哈沙德数

一、前言 本系列主要讲解和分析力扣习题&#xff0c;所以的习题均来自于力扣官网题库 - 力扣 (LeetCode) 全球极客挚爱的技术成长平台 二、哈沙德数 1. 哈沙德数 如果一个整数能够被其各个数位上的数字之和整除&#xff0c;则称之为 哈沙德数&#xff08;Harshad number&…

CTF常用sql注入(二)报错注入(普通以及双查询)

0x05 报错注入 适用于页面无正常回显&#xff0c;但是有报错&#xff0c;那么就可以使用报错注入 基础函数 floor() 向下取整函数 返回小于或等于传入参数的最大整数。换句话说&#xff0c;它将数字向下取整到最接近的整数值。 示例&#xff1a; floor(3.7) 返回 3 floor(-2…

5.基于SpringBoot的SSMP整合案例-数据层开发

目录 1.新建项目 2.实体类开发&#xff1a; 2.1在pom.xml中增加Lombok坐标&#xff1a; 2.2添加Book实体类 3.数据层开发&#xff1a; 3.1 配置MyBatisPlus与Druid 3.2创建数据层接口 3.3写测试类 3.4点击运行&#xff1a; 4.数据层快速开发&#xff1a; 4.1配置MyB…

C++视觉开发 四.手势识别

本章记录传统手势识别&#xff0c;在表示0-5六个数值时的识别问题。例如识别剪刀石头布&#xff0c;手势&#xff0c;以及其表示的动作。在识别时将手势中的凹陷区域称为凸缺陷&#xff0c;其个数作为识别的重要依据。 需要注意&#xff0c;在凸缺陷个数为0时&#xff0c;无法…

S272钡铼技术4G无线RTU支持多路DIN输入和模拟量转换至4G网络

钡铼第四代RTU S272是一款先进的工业级4G远程遥测终端&#xff0c;为各种远程工业数据采集和控制系统提供了高效解决方案。结合了现代通信技术和多功能的输入输出接口&#xff0c;S272不仅支持多路数字量和模拟量输入&#xff0c;还具备灵活的扩展性和强大的控制功能&#xff0…

WEB攻防-XSS跨站反射型存储型DOM型标签闭合输入输出JS代码解析

文章目录 XSS跨站-输入输出-原理&分类&闭合XSS跨站-分类测试-反射&存储&DOM反射型XSS存储型XSSDOM-base型XSS XSS跨站-输入输出-原理&分类&闭合 漏洞原理&#xff1a;接受输入数据&#xff0c;输出显示数据后解析执行 基础类型&#xff1a;反射(非持续…

典型案例 | 基于全数字实时仿真的嵌入式DevOps解决方案

为丰富浙江省信息技术应用创新&#xff08;以下简称“信创”&#xff09;产业生态&#xff0c;在全社会各领域形成示范效应&#xff0c;浙江省经信厅联合省密码管理局开展2023年浙江省深化信创典型案例评选工作。 经过征集申报、专家评选、名单公示等程序&#xff0c;确定36个…

实现前端项目自动构建和部署(Gitee Go)

前言 相信所有的前端开发者都希望将自己的代码部署在服务器上让所有人都能访问到&#xff0c;但是却不知道如何进行部署。其实要是实现代码上线非常简单&#xff0c;我们只需要将build之后的代码上传到服务器&#xff0c;然后通过Nginx起一个服务指向我们build后的代码就可以了…

Cocos 7.2~7.4

这几天没更新CSDN&#xff0c;跑去玩Cocos了。自从知道我的粉丝百分之十之八九都是假人&#xff0c;更新确实没什么动力了。主要还是把这边当成一个日记本吧。 选择cocos的原因也很简单。会点js&#xff0c;技术栈比较接近&#xff0c;上手估计也快。简单记录下这几天的内容 主…

@amap/amap-jsapi-loader 实现高德地图中添加多边围栏,并可编辑,编辑后获得围栏各个点的经纬度

先上一张效果图 看看是不是大家想要的效果&#xff5e; ❤️ 希望其中的小点能帮助大家&#xff0c;主要看怎么绘制在地图上的代码即可 1.第一步要加入项目package.json中或者直接yarn install它都可以 想必大家应该都会 "amap/amap-jsapi-loader": "0.0.7&qu…

C语言作业笔记

1. 要找俩个数使其相加等于一个数&#xff0c;那么俩个数从头尾出发&#xff0c;先动一边&#xff0c;假设是尾先动&#xff0c;一开始俩个数相加大于sum&#xff08;小于的话就动头&#xff09;&#xff0c;那么总有一时刻俩数相加小于sum&#xff0c;则就在那一刻停下来&…

关于5G和卫星

手机&#xff0c;已经串联起了我们生活中的一切环节。我们随时随地拿出手机&#xff0c;都能畅快地上网。 这一切是如此地理所当然&#xff0c;以至于我们甚至想不到这样不可思议的问题&#xff1a; 移动通信网络真的无处不在吗&#xff1f; 我们都知道&#xff0c;地球虽叫…

毕业论文初稿写作方法与过程

毕业论文初稿写作方法与过程 毕业论文是大学生在学业结束前必须完成的一项重要任务&#xff0c;它不仅是对学生所学知识的综合运用&#xff0c;也是对学生研究能力和写作能力的检验。写好毕业论文初稿是完成高质量毕业论文的关键一步。下面将具体阐述毕业论文初稿的写作方法和过…

Redis 7.x 系列【18】事务

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 命令2.1 MULTI2.2 EXEC2.3 DISCARD2.4 WATCH2.5 UNWATCH 3. 事务中的错误4.…

无法识别为 cmdlet、函数、脚本文件或可运行程序的名称

一、遇到问题 PS D:\software\nacos\nacos-server-2.3.1\bin> startup.cmd -m standalone startup.cmd : 无法将“startup.cmd”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c; 请确保路径正确&#xff0c;然后…

Ubuntu su命令输入密码后提示“su: 认证失败”

在Ubuntu系统中&#xff0c;使用su命令切换到root用户时提示“su: 认证失败”通常是因为root账户默认情况下是被锁定的&#xff0c;没有设置密码。以下是一些解决这个问题的方法&#xff1a; 使用sudo命令&#xff1a;Ubuntu推荐使用sudo命令代替直接使用root用户。sudo命令允许…