![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
SOLID原则前端中的应用
文章平均质量分 63
无言非影
这个作者很懒,什么都没留下…
展开
-
【SOLID原则前端中的应用】接口隔离原则(Interface Segregation Principle,ISP)- vue3示例
按照接口隔离原则,将这个需求分解成两个独立的组件:一个负责展示用户信息(UserDisplay.vue),另一个负责编辑用户信息(UserEdit.vue)。换句话说,我们应该避免创建包含过多职责的“胖接口”,而应该创建细粒度的接口,使得每个接口只包含客户端实际需要的方法。这样做不仅使组件更加简洁、易于理解和测试,还可以在需要时更容易地对组件进行重用和维护。通过这种方式,确保每个组件都有明确的职责,避免创建包含过多职责的“胖组件”。在Vue 3中,这可以通过将组件的职责分解成更小的、功能单一的组件来实现。原创 2024-07-05 09:01:09 · 461 阅读 · 0 评论 -
【SOLID原则前端中的应用】里氏替换原则(Liskov Substitution Principle,LSP)- vue3示例
上面的示例中,首先创建了一个通用输入组件BaseInput,它可以接受任何类型的输入。然后,创建了一个电子邮件输入组件EmailInput,通过扩展BaseInput来专门处理电子邮件输入,并增加了电子邮件格式验证和错误提示功能。EmailInput继承了BaseInput的所有属性和方法,同时增加了对电子邮件格式的验证。如果输入的电子邮件格式不正确,会显示错误提示信息。这样,我们可以在需要电子邮件输入的地方无缝替换BaseInput为EmailInput,而不需要修改其他代码。原创 2024-07-04 08:59:19 · 382 阅读 · 0 评论 -
【SOLID原则前端中的应用】开闭原则(Open/Closed Principle)- vue3示例
基本通知组件:这个组件是对扩展开放的,对修改关闭的。它提供了一个基础的通知样式,并通过type属性来控制不同类型的通知样式。特定类型的通知组件和:这些组件通过扩展来实现特定类型的通知,而不需要修改的代码。我们使用了插槽(slots)来传递内容,从而实现灵活的内容插入。通过这种方式,我们可以在不修改已有代码的情况下,通过创建新的组件来扩展功能,完全遵循了开闭原则。这不仅使代码更加稳定和可维护,还提升了代码的可扩展性。原创 2024-07-03 09:35:48 · 391 阅读 · 0 评论 -
【SOLID原则前端中的应用】定义及单一职责原则(Single Responsibility Principle,SRP)- vue3示例
单一职责原则(Single Responsibility Principle)开闭原则(Open/Closed Principle)里氏替换原则(Liskov Substitution Principle)接口隔离原则(Interface Segregation Principle)依赖倒置原则(Dependency Inversion Principle)只负责展示用户的信息,不关心数据是如何获取的。负责获取用户数据,并将数据传递给进行展示。原创 2024-07-03 09:35:30 · 662 阅读 · 1 评论