【SOLID原则前端中的应用】定义及单一职责原则（Single Responsibility Principle，SRP）- vue3示例

2024/10/24 4:41:50 来源：https://blog.csdn.net/weixin_40887836/article/details/140142242 浏览: 次关键词：【SOLID原则前端中的应用】定义及单一职责原则（Single Responsibility Principle，SRP）- vue3示例

定义

SOLID原则是面向对象编程中的五个设计原则的缩写，分别是：

单一职责原则（Single Responsibility Principle）
开闭原则（Open/Closed Principle）
里氏替换原则（Liskov Substitution Principle）
接口隔离原则（Interface Segregation Principle）
依赖倒置原则（Dependency Inversion Principle）

单一职责原则（Single Responsibility Principle，SRP）在Vue 3中的应用

单一职责原则（Single Responsibility Principle，SRP）规定，一个类（或模块、组件）应该只有一个引起其变化的原因，即一个类只负责一项职责。
在Vue 3的开发中，我们可以通过将组件的职责分离来实现这一原则，使得每个组件只负责一项特定的功能，从而提升代码的可维护性和可读性。

示例场景：用户信息展示和数据获取

假设我们有一个需求，需要展示用户的信息，并在组件挂载时获取用户数据。
按照单一职责原则，我们将这个需求分成两个组件：

一个负责展示用户信息（UserDisplay.vue）
一个负责获取用户数据并传递给展示组件（UserContainer.vue）

1. 用户信息展示组件 `UserDisplay.vue`

这个组件只负责展示用户的信息。

<!-- UserDisplay.vue -->
<template><div class="user-display"><h2>{{ user.name }}</h2><p>{{ user.email }}</p></div>
</template><script>
export default {name: 'UserDisplay',props: {user: {type: Object,required: true}}
};
</script><style scoped>
.user-display {border: 1px solid #ccc;padding: 10px;border-radius: 5px;
}
</style>

2. 数据获取和传递组件 `UserContainer.vue`

这个组件负责获取用户数据，并将数据传递给展示组件。

<!-- UserContainer.vue -->
<template><div><UserDisplay v-if="user" :user="user" /><p v-else>Loading...</p></div>
</template><script>
import UserDisplay from './UserDisplay.vue';export default {name: 'UserContainer',components: {UserDisplay},data() {return {user: null};},async mounted() {const response = await fetch('https://xxx.com/users/1');const data = await response.json();this.user = data;}
};
</script><style scoped>
p {text-align: center;
}
</style>

3. 使用组件

在应用的根组件中使用 UserContainer。

<!-- App.vue -->
<template><div id="app"><UserContainer /></div>
</template><script>
import UserContainer from './components/UserContainer.vue';export default {name: 'App',components: {UserContainer}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>